使用非重复图案作为填充的 SVG

Question

我正在尝试使用具有图案的不同 SVG 元素作为填充，但该图案并未针对每个元素重复。我不确定是否有可能重复该图案，但现在看起来好像有一个图案，三个圆圈在图案上创建了一个遮罩。我想要实现的是三个圆圈看起来明显不同，因为每个图案都会为每个圆圈重置，然后看起来就不像 'cut out'.

我想最后的解决方案是为我使用的每个元素创建多个具有不同名称的模式，然后它会起作用，但我希望有一个不那么麻烦的方法。

我试过了：

将每个元素包装在不同的 SVG 容器中
将 id 附加到元素，然后在 css 中分别定位每个 id，填充为 url

我制作了一个 codesandbox 来显示我的问题：

https://codesandbox.io/s/busy-ives-hv3rr?file=/index.html

Answer 1

应用像 transform="translate(50 50)" 这样的变换（而不是固定 x/y 定位就可以了。

  <svg id="patternId" width="100%" height="100%">
    <defs>
      <pattern id="pattern-0" patternUnits="userSpaceOnUse" width="65" height="65" patternTransform="scale(2) rotate(0)" >
        <g id="patternInner">
          <rect x="0" y="0" width="100%" height="100%" fill="hsla(0,0%,100%,1)" />
          <path d="M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z" stroke-width="1" stroke="none" fill="hsla(258.5,59.4%,59.4%,1)" />
          <path d="M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z" stroke-width="1" stroke="none" fill="hsla(339.6,82.2%,51.6%,1)" />
          <path d="M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z" stroke-width="1" stroke="none" fill="hsla(198.7,97.6%,48.4%,1)" />
          <path d="M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z" stroke-width="1" stroke="none" fill="hsla(33, 90%, 65%, 1)" />
        </g>
      </pattern>
      <pattern id="pattern-1" href="#pattern-0" x="80" y="80" patternTransform="scale(2) rotate(45)" />
    </defs>
    <circle cx="50" cy="50" r="40" fill="url(#pattern-0)" />
    <circle cx="50" cy="50" r="50" fill="url(#pattern-0)" transform="translate(50 33)"  />
    <circle cx="50" cy="50" r="50" fill="url(#pattern-1)" transform="translate(50 33)"  />
    <rect x="0" y="0" width="50" height="50" stroke="#fff" stroke-width="1" transform="translate(10 60)" fill="url(#pattern-0)" />
  </svg>

值得注意： 复制模式以进行稍微修改的用法非常简单，因为 <pattern> 元素支持 referencing/reusing 先前通过 href 属性定义的模式（类似于 <use>):

  <pattern id="pattern-1" href="#pattern-0" x="80" y="80" patternTransform="scale(2) rotate(45)" />

将导致旋转图案共享初始定义图案的所有属性。

Answer 2

@herrstrietzel 发布的解决方案是一种可行的方法。

另一种解决方案是创建原始图案的变体，但来源不同。您可以使用 x 和 y 属性指定原点。

<svg id="patternId" width="100%" height="100%">
        <defs>
          <pattern id="a" patternUnits="userSpaceOnUse" width="65" height="65" patternTransform="scale(2) rotate(0)">
            <rect x="0" y="0" width="100%" height="100%" fill="hsla(0,0%,100%,1)"/>
            <path d="M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z"
                  stroke-width="1" stroke="none" fill="hsla(258.5,59.4%,59.4%,1)"/>
            <path d="M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z"
                  stroke-width="1" stroke="none" fill="hsla(339.6,82.2%,51.6%,1)"/>
            <path d="M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z"
                  stroke-width="1" stroke="none" fill="hsla(198.7,97.6%,48.4%,1)"/>
            <path d="M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z"
                  stroke-width="1" stroke="none" fill="hsla(33, 90%, 65%, 1)"/>
          </pattern>
          <pattern id="a2" href="#a" x="20" y="20"/>
          <pattern id="a3" href="#a" x="45" y="50"/>
        </defs>

        <svg height="200" width="200">
          <circle cx="50" cy="50" r="40" fill="url(#a)" />
        </svg>

        <svg height="200" width="200">
          <circle cx="100" cy="50" r="40" fill="url(#a2)" />
        </svg>

        <svg height="200" width="200">
          <circle cx="50" cy="100" r="40" fill="url(#a3)" />
        </svg>
      </svg>

另一种选择是切换到 objectBoundingBox 单位。这样图案就相对于它所应用的对象。

<svg id="patternId" width="100%" height="100%">
        <defs>
          <pattern id="a" patternUnits="objectBoundingBox" width="65" height="65">
            <g transform="scale(2)">
              <rect x="0" y="0" width="100%" height="100%" fill="hsla(0,0%,100%,1)"/>
              <path d="M.5.5v12h12V.5H.5zm13 13v12h12v-12h-12zm-13 13v12h12v-12H.5zm26 13v12h12v-12h-12zm13 13v12h12v-12h-12z"
                    stroke-width="1" stroke="none" fill="hsla(258.5,59.4%,59.4%,1)"/>
              <path d="M26.5.5v12h12V.5h-12zm0 13v12h12v-12h-12zm13 13v12h12v-12h-12zm-39 13v12h12v-12H.5zm0 13v12h12v-12H.5z"
                    stroke-width="1" stroke="none" fill="hsla(339.6,82.2%,51.6%,1)"/>
              <path d="M13.5.5v12h12V.5h-12zm39 13v12h12v-12h-12zm-39 13v12h12v-12h-12zm39 0v12h12v-12h-12zm-26 26v12h12v-12h-12z"
                    stroke-width="1" stroke="none" fill="hsla(198.7,97.6%,48.4%,1)"/>
              <path d="M52.5.5v12h12V.5h-12zm-13 13v12h12v-12h-12zm0 26v12h12v-12h-12zm13 0v12h12v-12h-12zm-39 13v12h12v-12h-12z"
                    stroke-width="1" stroke="none" fill="hsla(33, 90%, 65%, 1)"/>
            </g>
          </pattern>
          <pattern id="a2" href="#a" x="20" y="20"/>
          <pattern id="a3" href="#a" x="45" y="50"/>
        </defs>

        <svg height="200" width="200">
          <circle cx="50" cy="50" r="40" fill="url(#a)" />
        </svg>

        <svg height="200" width="200">
          <circle cx="100" cy="50" r="40" fill="url(#a)" />
        </svg>

        <svg height="200" width="200">
          <circle cx="50" cy="100" r="40" fill="url(#a)" />
        </svg>
      </svg>

使用非重复图案作为填充的 SVG

SVG using non-repetitive pattern as fill

svg