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>
Related
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
Trying to create a mask for an image using SVG. The mask is created out of a rounded corners rect, and a tip at the upper right corner.
I'm creating the entire thing just in SVG, but the I can't properly clip the tip of the mask. It seems as if you can't use an embedded SVG inside the clip-path element? Is that true? Whats the proper way to implement this than?
The image gets clipped only by the rectangle.
Here is my code -
<svg width="100%" height="210">
<defs>
<clipPath id="mask">
<rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
<svg viewBox="0 0 33.5 18" width="44px" y="-93" x="calc(100% - 62px)">
<path fill="black" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
</svg>
</clipPath>
</defs>
<image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
x="0"
y="0"
width="100%"
preserveAspectRatio="none"
clip-path="url(#mask)"/>
</svg>
And a link to the codepen - http://codepen.io/itayd/pen/VpXLZW
The solution was to define the path element in the defs, and use a element inside the clipPath.
<svg width="100%" height="210">
<defs>
<path transform="translate(50%, 50%)" cx="100" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
<path id="tip" fill="green" d="M37.5,24.4C37.5,11,48.5,0,62,0H0v34h37.5V24.4z"/>
<clipPath id="mask">
<rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
<use xlink:href="#tip" x="calc(100% - 68px)"/>
</clipPath>
</defs>
<image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
x="0"
y="0"
width="100%"
preserveAspectRatio="none"
clip-path="url(#mask)"/>
</svg>
Hello, I'm using slick slider and I want to clip-path the container but the clip-path doesn't work well..
this is my svg path
<svg width="0" height="0">
<defs>
<clipPath id="mask1">
<path id="curve" d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
</path>
</clipPath>
</defs>
</svg>
the slider works but the clip-path doesn't fit the 100% window..
Thanks.. and sorry for my English..
You should convert your clipPath to one using bounding box units:
<clipPath clipPathUnits="objectBoundingBox" ... >
When you use bounding box units, all your clip path coordinates should be defined in the range 0..1.
http://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath
If you do this, the clipping path will be given the same size as the the element you apply it to.
img {
width: 100%;
clip-path: url(#mask1);
-webkit-clip-path: url(#mask1);
}
<svg width="0" height="0">
<defs>
<clipPath id="mask1" clipPathUnits="objectBoundingBox">
<path id="curve"
transform="scale(0.00135, 0.00254)"
d="m242.6,393.7c-82.2,-4.7 -138.1,-15.4 -191.2,-36.6 -19.3,-7.7 -36.4,-16.1 -47.7,-23.5l-3.2,-2.1 -0,-71.5c-0,-39.3 -0.1,-113.9 -0.3,-165.8l-0.3,-94.2 371.1,0 371.1,0 0,152 0,152 -5.8,3.7c-7.8,5 -14.5,8.8 -23.4,13.4 -70.4,36.3 -187.2,62.5 -317.4,71.2 -28.6,1.9 -31.6,2 -91.2,1.9 -31,-0 -58.8,-0.2 -61.9,-0.4z">
</path>
</clipPath>
</defs>
</svg>
<img src="//placekitten.com/400/150"/>
What I have done in the example above is to use a transform to scale the clip path to size 1x1. It's easier than recreating the shape with new coordinates.
I have a SVG based app that makes heavy use of transformation such as translates, rotates and scales. While I have no issue in Firefox, in Chrome, the transform-origin property is not taken in account. It seems to apply the user-agent default value 0px 0px 0.
Here is an example (JSFiddle):
<svg width="400" height="400">
<defs>
<rect id="shape" width="200" height="200"/>
</defs>
<g transform="translate(100,100)">
<use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
<ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
<g transform="translate(0,0) scale(0.5) rotate(45)" style="transform-origin: 100px 100px;">
<use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
</g>
</g>
</svg>
As you can see Chrome applies all transformation from top left corner of the shape regardless of the defined origin while Firefox respects the defined origin.
Am I missing something about how transform-origin works with SVG?
Does anyone actually found a way to fix this without compensating with translates?
I am answering to my own question in order to clarify entirely what is going on with transform-origin properties on the SVG 1.1 transform functions and how to overcome this issue in Chrome 48.
First of all, transform-origin is a pure CSS 3 property, it is not related to SVG 1.1 at all. Despite the fact that transform sounds a lot like transform-origin, they apply to different systems. transform exists in both CSS 3 and SVG 1.1 but have separate implementations. transform-origin only exists in CSS 3 and therefore it is not supposed to influence SVG 1.1. The fact that transform-origin has no influence on SVG in Chrome 48 is expected.
So why transform-origin does apply to SVG in Firefox 44? Well the reason is not exactly clear, but it seems that it is part of the ongoing effort from Mozilla to slowly bring support for SVG 2 in Firefox. Indeed with SVG 2, everything will become a CSS 3 transform (no separate implementation) and SVG will therefore get support for transform-origin. I found out about this in the excellent article about the SVG coordinate systems from Sara Soueidan.
Now how can that be overcome in Chrome 48. It is fairly simple but if you want to apply translate(), scale() and rotate() all the same time, you will still need to calculate the offset induced by the scaling and compensate it in your translation.
As Bobby Orndorff mentioned in his answer, it is actually possible to provide the center of rotation to the rotate() function by providing extra x and y parameters. This is already a great improvement. But unfortunately the scale() function does not support such a thing and will always scale from the top left corner of its parent. Therefore you will still have to correct your translation in order to simulate a scale around a center.
Here is the final solution that works on Chrome 48 and Firefox 44:
<svg width="400" height="400">
<defs>
<rect id="shape" width="200" height="200"/>
</defs>
<g transform="translate(100,100)">
<use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
<ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
<g transform="translate(50,50) scale(0.5) rotate(45, 100, 100)">
<use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
</g>
</g>
</svg>
The example is mixed CSS transform-origin with a SVG transform. While CSS transform and SVG transform are similar, there are differences. For example, CSS transform can be 2D and 3D while SVG transform is only 2D. CSS transform rotate function accepts the angle as a number combined with an unit (e.g. degs, grad, rad, turn) while SVG transforms accepts the angle as a number (with implied unit of degrees) along with optional second and third parameters (x, y) representing the origin of rotation.
To get the example to work in FireFox and Chrome, you could use a CSS transform instead of a SVG transform. For example...
<svg width="400" height="400">
<defs>
<rect id="shape" width="200" height="200"/>
</defs>
<g transform="translate(100,100)">
<use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
<ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
<g style="transform: translate(0,0) scale(0.5) rotate(45deg); transform-origin: 100px 100px;">
<use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
</g>
</g>
</svg>
To get the example to work in FireFox, Chrome, and IE, you could use the SVG transform rotate function with the optional second and third parameters instead of a CSS transform-origin. For example...
<svg width="400" height="400">
<defs>
<rect id="shape" width="200" height="200"/>
</defs>
<g transform="translate(100,100)">
<use xlink:href="#shape" style="stroke: lightgray; fill: transparent;"/>
<ellipse cx="100" cy="100" rx="3" ry="3" style="fill: black;"/>
<g transform="translate(0,0) scale(0.5) rotate(45,200,200)">
<use xlink:href="#shape" style="stroke: black; fill: transparent;"/>
</g>
</g>
</svg>
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>