Question

我有以下“defs”元素，其中包含“clipPath”和“g”元素：

<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元素时，剪辑路径可以正常工作：

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

但如果scale（1）被替换为任何大于1的值，则一切都超出了裁剪边界。当“#myGroup”缩放为2或任何其他大于1的值时，我该怎么做才能使剪辑路径工作？澄清：似乎剪辑路径与组一起缩放，我不需要它。感谢

Answer 1

我认为你必须把你的剪辑放在没有缩放的东西上，这样的事情也许......

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

如何避免剪辑路径与形状一起缩放？

1 个答案: