CODEWITHSUNDEEP
svg
grssnbchr
grssnbchr

Reputation: 2974

SVG clipPath and transformations

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?

Upvotes: 11

Views: 11492

Answers (2)

Robin Payot
Robin Payot

Reputation: 141

You can still use a "g" tag like that to make it work.

<g clip-path="url(#cut)">
 <circle class="consumption" transform="translate(100,100)" r="50"></circle>
</g>

Upvotes: 12

Robert Longson
Robert Longson

Reputation: 123995

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.

Upvotes: 14

Related Questions