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>

如何分别从两个元素的开始启动svg模式以及如何设置正确的坐标系？

1 个答案: