Question

我有一个模式，我在一个矩形重复。默认情况下，它从矩形的左上角开始并流过。而不是在左上角开始第一个模式，可以从中间开始，从那个点开始向外工作吗？

干杯路加

Answer 1

您可以使用patternTransform翻译模式，例如

＆＃13;

<svg>
  <defs>
  <pattern id="pattern1"
           x="10" y="10" width="20" height="20"
           patternUnits="userSpaceOnUse" >

      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" />

  </pattern>
  <pattern id="pattern2"
           x="10" y="10" width="20" height="20"
           patternTransform="translate(2, 5)" 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="140" y="10" width="100" height="100"
    style="stroke: #000000; fill: url(#pattern2);" />    
</svg>

＆＃13;

SVG模式从设置位置重复

1 个答案: