2

「clipPath」要素と「g」要素を含む次の「defs」要素があります。

<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>

g 要素が次のように表示される場合、clip-path は問題なく機能します。

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

しかし、scale(1) を 1 より大きい値に置き換えると、すべてがクリッピング境界から外れます。「#myGroup」が 2 または 1 より大きいその他の値にスケーリングされている場合にクリップパスを機能させるにはどうすればよいですか? 明確にするために：クリップパスがグループに合わせてスケーリングされているようですが、それは必要ありません。ありがとう

4

1 に答える 1

2

おそらくこのような、スケーリングされていないものにクリッピングを配置する必要があると思います...

<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>
于 2013-08-20T16:16:52.687 に答える