I am making a 3D button that has a cutout to show a picture. The background image somehow shows much smaller than the actual circle.
Here are the lines in question (below is the CodePen link):
<g>
<defs>
<pattern id="image" patternUnits="objectBoundingBox" height="78" width="78">
<image
xlink:href="https://vignette.wikia.nocookie.net/mighty355/images/b/b1/025Pikachu_XY_anime_3.png/">
</image>
</pattern>
</defs>
<circle cx="133.6" cy="133.7" r="78.7" fill="url(#image)" />
</g>
The entire file is this:
https://codepen.io/lemmerelassal/pen/GRjrNwe
Any help is appreciated.
<g>
<image xlink:href="https://vignette.wikia.nocookie.net/mighty355/images/b/b1/025Pikachu_XY_anime_3.png/"
style="clip-path: circle(30% at 50% 50%); width: 267px; height: 267px ;">
</image>
</g>
works
Related
I have a SVG that needs to have a fixed height so its not super big when the width is 2000+ pixels (widescreens...)
The clipping mask should always be visible and the background image should be sliced and not be stretchend, i tried several things but nothing seems to work.
This is what i have now:
https://codepen.io/bucky208/pen/OEqbPp
div {
width: 100%;
}
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1381.5" preserveAspectRatio="none" style="display: block; position: absolute; width: 100%;height: 400px;">
<g id="clipgroup">
<defs>
<polygon id="mask" points="0,572.1 0,1381.3 1024,1040.5 1024,337.6 0,0"/>
</defs>
<clipPath id="mask_1_">
<use xlink:href="#mask" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#mask_1_);">
<image style="overflow:visible;" width="331" height="444" id="theimage" xlink:href="https://image.ibb.co/ipbNkJ/56_E0406_E5_C8_EF897.jpg" transform="matrix(3.1119 0 0 3.1111 -3.0528 -2.604167e-04)"></image>
</g>
</g>
</svg>
</div>
Do i need another wrapper around everything? How do i restore the image ratio?
Kind regards and a big thank you for everyone trying to help.
In order to get image fills to fill their container but preserve the original aspect ratio, a filter combined with objectBoundingBox sizing and preserveAspectRatio is your friend. The following code does what I think you want:
svg {
background: red;
}
#svgcont {
position: absolute;
width: 100%;
}
<div id="svgcont">
<svg x="0" y="0" width="100%" height="800px">
<defs>
<filter id="image-fill-nostretch" primitiveUnits="objectBoundingBox">
<feImage x="0" y="0" width="1" height="1" id="theimage" xlink:href="https://image.ibb.co/ipbNkJ/56_E0406_E5_C8_EF897.jpg" preserveAspectRatio="xMidYMid slice"/>
<feComposite operator="in" x1="SourceGraphic"/>
</filter>
<clipPath id="mask_1_" clipPathUnits="objectBoundingBox">
<polygon id="mask" points="0,0.5 0,1 1,0.75 1,0.25 0,0"/>
</clipPath>
</defs>
<g clip-path="url(#mask_1_)">
<rect width="100%"height="100%" x="0%" y="0%" filter="url(#image-fill-nostretch)"/>
</g>
</svg>
</div>
I am trying to create a SVG circle with an image inside of it. The image is supposed to be inside of the SVG circle with a radius that is slightly below the radius of the outer circle. To clip the image I am using the <clipPath> element on the <image> element. But is won't clip the right path. Here is a Codepen to give an example:
https://codepen.io/Martin36/pen/BdpMbX
As you can see in the example the <clipPath> clips the upper left corner of the image even though the clipping <circle> is placed directly above the <image> element. Here is the code:
<svg width="900" height="300" >
<g class="hotel" transform="translate(150,150)">
<circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;" class=""></circle>
<clipPath id="clipCircle">
<circle r="100"></circle>
</clipPath>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg"
clip-path="url(#clipCircle)"
width="250" height="250"
transform="translate(-125,-125)">
</image>
</g>
</svg>
Does anyone know why this happens and how to fix it?
I solved the problem by changing the cx and cy properties of the <circle> element inside the <clipPath> tag to the widthof the image divided by two. The codepen is updated with the correct code. But I will post it here also:
<svg width="900" height="300" >
<g class="hotel" transform="translate(150,150)">
<circle r="120" style="fill: rgb(56, 255, 0); opacity: 0.6;"></circle>
<clipPath id="clipCircle">
<circle r="100" cx="125" cy="125"> </circle>
</clipPath>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="http://res.cloudinary.com/martin36/image/upload/v1502102349/hotel_yg1fg1.jpg"
clip-path="url(#clipCircle)"
width="350" height="250"
transform="translate(-125,-125)">
</image>
</g>
</svg>
I need to create images with this shape:
http://imgh.us/image-mask_1.svg
First i try with css mask but the problem was support of browsers. So i jump over to svg image with mask inside.
I have a problem with SVG image where top and bottom part of the mask is cut off.
I have created a codepen to show you the problem:
<svg width="551" height="397" viewBox="0 0 551 397">
<defs>
<mask id="section_mask">
<image x="0.5" y="0.5" width="551" height="397" xlink:href="http://imgh.us/image-mask.svg" />
</mask>
</defs>
<image mask="url(#section_mask)" width="551" height="397" xlink:href="http://imgh.us/kh110512-22049-1-1024x682.jpg" />
</svg>
http://codepen.io/lasse_head/pen/ObJLKN
Thanks Lasse
It happens because the masked image has wrong width/height ratio.
The original image is 1024 x 682. The ration is 1.71788413. So, if you want to have height 397px, the width should be 397 x 1.71788413 = 596px . However, you set it to 551px.That was the reason for cutting.
<svg width="551" height="397" viewBox="0 0 551 397">
<defs>
<mask id="section_mask">
<image x="0.5" y="0.5" width="551" height="397" xlink:href="http://imgh.us/image-mask.svg" />
</mask>
</defs>
<image mask="url(#section_mask)" width="551" height="397" xlink:href="http://imgh.us/kh110512-22049-1-1024x682.jpg" />
</svg>
I animate on hover the opacity of a masked SVG to put a semi transparent layer over an image. It works all fine except with Firefox, where the mask is not showing and the image goes all white. The mask is applied to the image through CSS
<svg id="svg-fade" class="visible-sm-block img-circle" width="200" height="200">
<defs>
<mask id="mask2" width="200" height="200" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect x="0" y="0" width="200" height="200" style="stroke:none; fill: #bbbbbb"></rect>
<rect x="95" y="50" width="10" height="100" style="stroke:none; fill: #000000"></rect>
<rect x="50" y="95" width="100" height="10" style="stroke:none; fill: #000000"></rect>
</mask>
</defs>
<rect class="target" width="200" height="200" style="stroke:none; fill: rgba(255,255,255,1)"></rect>
</svg>
The live code can be viewed here.
Is there an attribute missing or why is the mask not showing up in Firefox?
Your help is much appreciated!
For any future reference: I found that the id of the mask has to be unique throughout the whole document even when the mask is defined in the very same SVG and you can't use a class instead either.
I tried to display a circle centered in a div.
This is my solution, but the circle appears cut.
What is the problem?
<svg>
<svg x="10%" y="20%">
<g transform="scale(1, 1)">
<circle r="100"/>
</g>
</svg>
</svg>
JSFiddle
By default inner <svg> elements clip their contents. You can set overflow="visible" if you don't want this to happen.
In addition the outer <svg> element has no width/height so it falls back to the defaults of 300 x 150.
If you fix it, it looks like this
html, body {
width: 100%;
height: 100%;
}
<svg width="100%" height="100%">
<svg x="50%" y="50%" overflow="visible">
<g transform="scale(1,1)">
<circle r="100"></circle>
</g>
</svg>
</svg>