Question

我想将一个模式应用于几个svg元素，该模式应该适用于每个元素的（0,0）点。

首先我尝试像this

这样的代码

＆＃13;

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

＆＃13;

此示例中的问题是每个元素的模式从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个圆圈。 E.g。

＆＃13;

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

＆＃13;

如何正确使用patternContentUnits =＆＃34; objectBoundingBox＆＃34;对于svg元素？

1 个答案: