svg - 如何为 svg 元素正确使用 patternContentUnits ="objectBoundingBox"？

Question

我想将一个图案应用于几个 svg 元素，该图案应该从每个元素的 (0,0) 点开始应用。

首先我尝试像 this 这样的代码

<svg width="400" height="400">
<defs>
  <pattern id="pattern1"
      x="0" y="0" width="25" height="25"
           patternUnits="userSpaceOnUse"
    >

      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />

  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />  
<rect x="110" y="17" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />
<rect x="210" y="0" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />  
<rect x="0" y="110" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />      
</svg>

此示例中的问题是每个元素的模式从 svg 文档的 (0,0) 点开始，而不是每个元素的。

好的，让我们尝试(将 patternUnits="objectBoundingBox" 属性设置为模式定义，以便模式的坐标系从每个元素的 (0,0) 点开始)[ https://jsfiddle.net/gwrgd1wf/1/]

坐标系起点已按我的需要更改，但图案已停止平铺且图案的 width 和 height 属性无法正常工作。你可以看到我设置了 height="2"，但它并没有改变图案的高度。

所以我的问题是如何正确使用 patternUnits="objectBoundingBox" 属性？

Answer 1

在 objectBoundingBox 单位中，1 个单位是形状的大小，所以如果你写 2，这意味着图案是形状大小的 2 倍，所以 1/2 的图案填充形状，你不会得到平铺。

如果您想要平铺，您需要使图案小于形状，例如使用 0.2，您将显示 5 个圆圈。例如

<svg width="400" height="400">
<defs>
  <pattern id="pattern1" 
      x="0" y="0" width="0.2" height="0.2"
           patternUnits="objectBoundingBox"
    >
      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />
  </pattern>
</defs>

<rect x="10" y="10" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />  
<rect x="110" y="17" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />
<rect x="210" y="0" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />  
<rect x="0" y="110" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern1);" />      
</svg>