如何分别为两个元素开始svg模式，以及如何设置正确的坐标系统

Question

我有两条粗线，我想为这两条线应用图案。线条应具有相同的图案，但每条线条应从(0,0)处分别开始绘制图案。在我的实验http://jsfiddle.net/69t09wey/模式应用像面具。也就是说，图案适用于整个svg画布作为不可见层，在线条可见的地方，图案也可见。

<svg viewBox="0 0 1000 1000"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
      <path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
   </pattern>
 <g transform="scale(5)">
    <rect x="1" y="1" width="1000" height="1000"
        fill="none" stroke="blue" />
     <path d="M 1 9 L 200 9"
        fill="red" stroke="url(#pattern-1)" stroke-width="20"  />
   <path d="M 1 53 L 200 53"
        fill="red" stroke="url(#pattern-1)" stroke-width="20" />
   </g>
</svg>

Answer 1

如果你让你的行相同。然后移动第二个应用变换。这将移动模式的坐标空间。

<svg viewBox="0 0 1000 1000"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <pattern id="pattern-1" width="20" height="20" x="0" y="0" patternUnits = "userSpaceOnUse" >
      <path d="M 0 0 L 20 20" fill="none" stroke="#0000ff" stroke-width="1"></path>
   </pattern>
 <g transform="scale(5)">
    <rect x="1" y="1" width="1000" height="1000"
        fill="none" stroke="none" />
     <path d="M 1 9 L 200 9"
        fill="red" stroke="url(#pattern-1)" stroke-width="20"  />
     <path d="M 1 9 L 200 9" transform="translate(0,44)"
        fill="red" stroke="url(#pattern-1)" stroke-width="20" />
   </g>
</svg>