Menu
I have two nearly identical pieces of code where the right half of a circle should be clipped according to a rectangle. In the first example, all works well:
<svg>
<clipPath id="cut">
<rect width="100" height="100" x="100" y="50"></rect>
</clipPath>
<circle class="consumption" cx="100" cy="100" clip-path="url(#cut)" r="50"></circle>
</svg>
jsfiddle
In the second one though, when I am using a translation on the circle to specify its position, nothing is shown anymore.
<svg>
<clipPath id="cut">
<rect width="100" height="100" x="100" y="50"></rect>
</clipPath>
<circle class="consumption" transform="translate(100,100)" clip-path="url(#cut)" r="50"></circle>
</svg>
jsfiddle
Why?
300
The <clipPath> SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied. Conceptually, parts of the drawing that lie outside of the region bounded by the clipping path are not drawn.
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.
The SVG masking feature makes it possible to apply a mask to an SVG shape. The mask determines what parts of the SVG shape that is visible, and with what transparency. You can think of an SVG mask as a more advanced version of a clip path.
To create a traditional clipping path, simply click on the saved path you just created in your Paths panel. Click on the panel menu again and choose Clipping Path.
Because the transform applies to the clipPath too.
From the SVG specification...
If clipPathUnits="userSpaceOnUse", the contents of the ‘clipPath’ represent values in the current user coordinate system in place at the time when the ‘clipPath’ element is referenced (i.e., the user coordinate system for the element referencing the ‘clipPath’ element via the ‘clip-path’ property). If attribute ‘clipPathUnits’ is not specified, then the effect is as if a value of 'userSpaceOnUse' were specified.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
