我有以下包含“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 元素按以下方式显示时,剪辑路径工作正常:
<use transform="scale(1)" xlink:href="#myGroup"/>
但是如果将scale(1)替换为任何大于1的值,则一切都会超出裁剪范围。 当“#myGroup”缩放为 2 或任何其他大于 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>
关于svg - 如何避免剪切路径随形状一起缩放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18339884/