How to avoid clip-path to be scaled along with shapes?

Question

I have the following "defs" element that contains "clipPath" and "g" elements:

<defs>
    <clipPath id="myClip">
        <rect x="0" y="0" width="200" height="200"/>
    </clipPath>
    <g id="myGroup">
        <circle id="bb" cx="100" cy="100" r="120" stroke="#ff0000" fill="#0000ff" clip-path="url(#myClip)"/>
        <circle id="cc" cx="150" cy="150" r="90" stroke="#00ff00" fill="#ff00ff" clip-path="url(#myClip)"/>
    </g>
</defs>

When the g element is displayed in the following way, the clip-path works just fine:

    <use transform="scale(1)" xlink:href="#myGroup"/>

but if scale(1) is replaced with any value greater than 1, everything goes out of clipping bounds. What can I do to make clip-path work when "#myGroup" is scaled to 2 or any other value greater than 1? To clarify: it seems like clip-path is scaled along with the group, I don't need that. Thanks

Answer 1

I think you'd have to put your clipping on something that isn't scaled, something like this perhaps...

<defs>
    <clipPath id="myClip">
        <rect x="0" y="0" width="200" height="200"/>
    </clipPath>
    <g id="myGroup">
        <circle id="bb" cx="100" cy="100" r="120" stroke="#ff0000" fill="#0000ff"/>
        <circle id="cc" cx="150" cy="150" r="90" stroke="#00ff00" fill="#ff00ff"/>
    </g>
</defs>

<g clip-path="url(#myClip)">
    <use transform="scale(2)" xlink:href="#myGroup"/>
</g>