svg剪贴蒙版无法正常工作

Question

如何使剪贴蒙版工作？

我有4条路径位于0,0。我翻译它们并缩放它们，使它们位于与引用的剪贴蒙版相同的位置。

谢谢！

<svg xmlns="http://www.w3.org/2000/svg" id="svg" width="600" height="800"
 style="margin: 10px; border: 1px solid #ddd; background-color: white">
<g id="grid">
    <path d="M1.1,0.4l0-0.3L1.1,0.9L0.5,0.8l0-0.5l0.3,0.2L0.6,0.1l-0.2,0l0,0.6l0.1,0.4L0.3,0.8L0,0.2l0,0.2l0.3,0.3l0.1,0.1"
          stroke="black" stroke-width="0.0033333333333333335" fill="black"
          transform="translate(0, 0) scale(300, 400) " clip-path="url(#grid-rect-0)"></path>
    <path d="M-0.4,0.7l1,0.1l-0.6,0.2l0.1,0l0.4,0L0.4,0.8L0.4,1l0.1,0.1l0-0.4l0.1-0.7l0.1,0.2L0.6,0.9L1.2,0L1.1,1.1l0.4-0.9"
          stroke="black" stroke-width="0.0033333333333333335" fill="black"
          transform="translate(300, 0) scale(300, 400) " clip-path="url(#grid-rect-1)"></path>
    <path d="M0,1l0.5,0L0.4,0.8L0.2,0.9l0.4,0.2l0.2-0.7L0.7,0.7l0-0.6l0.1,0.6L1,0.9l0.1,0L1,0.2L1,1l0.2-0.2L1.1,0.5"
          stroke="black" stroke-width="0.0033333333333333335" fill="black"
          transform="translate(0, 400) scale(300, 400) " clip-path="url(#grid-rect-2)"></path>
    <path d="M0.8,0.8L1,0L0.7,0.7l0.2-0.3L1.1,0L0.7,0.6l0.1-0.4L0.6,0.5l0,0.3l-0.2,0L0.2,0.1l0.4,0.6L0.3,1.1l-0.3,0l0.5-0.6"
          stroke="black" stroke-width="0.0033333333333333335" fill="black"
          transform="translate(300, 400) scale(300, 400) " clip-path="url(#grid-rect-3)"></path>
</g>
<defs>
    <clipPath id="grid-rect-0">
        <rect x="0" y="0" width="300" height="400"></rect>
    </clipPath>
    <clipPath id="grid-rect-1">
        <rect x="300" y="0" width="300" height="400"></rect>
    </clipPath>
    <clipPath id="grid-rect-2">
        <rect x="0" y="400" width="300" height="400"></rect>
    </clipPath>
    <clipPath id="grid-rect-3">
        <rect x="300" y="400" width="300" height="400"></rect>
    </clipPath>
</defs>

https://jsfiddle.net/eek0bnmv/

Answer 1

问题是当translate和scale应用于元素时，translate和scale也应用于clip-path。如果将剪辑路径定义上的x / y /宽度/高度调整为0.2 / 0.2 / 0.5 / 0.5，则会看到剪辑路径生效。

您可能希望通过在clipPath元素中指定clipPathUnits =“objectBoundingBox”来使用％来表示剪辑路径。这样，您可能只需要一个clipPath定义。