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

问题在于，当将平移和缩放应用于元素时，平移和缩放也会应用于 clip-path。如果将剪辑路径定义上的 x/y/width/height 调整为 0.2/0.2/0.5/0.5 之类的值，那么您将看到 clip-path 生效。

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

svg 剪贴蒙版不起作用

svg clipping mask not working

svg

clipping

clip-path