SVG scaling and clip path
I am struggling with the scaling behavior of the SVG clip path. I would like to scale the clip path to fit the size of the element it is applied to. I've read about clipPath elements, but I can't seem to get this to work.
Here's an example of what I'm trying to do without scaling: http://jsfiddle.net/1196o7n0/1/
... and SVG (the shape and shape of the clip are the same):
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<clipPath id="svgPath">
<circle r="40" cy="50" cx="50" />
<circle r="74.576" cy="235" cx="193.949" />
<circle r="47.034" cy="108.305" cx="426.576" />
<circle r="43.644" cy="255.763" cx="346.915" />
<circle r="35.17" cy="82.882" cx="255.39" />
</clipPath>
<g fill="#000">
<circle r="40" cy="50" cx="50" />
<circle r="74.576" cy="235" cx="193.949" />
<circle r="47.034" cy="108.305" cx="426.576" />
<circle r="43.644" cy="255.763" cx="346.915" />
<circle r="35.17" cy="82.882" cx="255.39" />
</g>
</svg>
Now if I define a viewbox and make the SVG scales match the document width and height, the clip path doesn't seem to scale: http://jsfiddle.net/1196o7n0/2/
Any idea on how I can make this work? Did I miss something?
source to share
To scale the clip path to the element you are applying it to, you need to add clipPathUnits="objectBoundingBox"
to your element clippath
.
Here is a JsFiddle based on your example demonstrating how to do this.
<svg width="0" height="0" >
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<circle r="0.05" cy="0.0625" cx="0.1625" />
<circle r="0.09322" cy="0.29375" cx="0.2424" />
<!-- rest of path here-->
</clipPath>
</defs>
</svg>
<div class="content centered">
<div class="clipped"></div>
</div>
The catch is that the path units must be decimal numbers from 0 to 1; they are fractions of the element's respective width or height.
source to share