Search code examples
svgclippingclip-path

svg clipping mask not working

How can I make my clipping masks work?

I have 4 paths positioned at 0,0. I translate them and scale them so they are positioned at the same position as the referenced clipping mask.

Thanks!

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

Solution

  • The problem is that the translate and scale is also applied to the clip-path when the translate and scale is applied to an element. If you adjust the x/y/width/height on the clip path definition to something like 0.2/0.2/0.5/0.5 then you'll see the clip-path take effect.

    You may want to express your clip path using %'s by specifying clipPathUnits="objectBoundingBox" in your clipPath element. That way, you may only need one clipPath definition.