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

【问题标题】：How to avoid clip-path to be scaled along with shapes?如何避免剪辑路径与形状一起缩放？
【发布时间】：2013-08-22 18:56:56
【问题描述】：

我有以下包含“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 的值时，我该怎么做才能使剪辑路径工作？澄清一下：剪辑路径似乎与组一起缩放，我不需要。谢谢

【问题讨论】：

标签： svg scale clipping

【解决方案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>

【讨论】：