Question

我是svg（和一般设计）的新手，正在寻找一种方法来用三种颜色相同的对角线条纹填充svg形状/路径。对于两个条带，我已经找到了堆栈溢出（Simple fill pattern in svg : diagonal hatching）上的解决方案：

<svg width="300" height="30" viewBox="0 0 200 10">
    <pattern id="diagonalHatch" width="15" height="10" 
     patternTransform="rotate(135 0 0)" patternUnits="userSpaceOnUse">
         <rect x="0" y="0" width="100%" height="100%" fill="orange"></rect>
         <line x1="0" y1="0" x2="0" y2="10" style="stroke:blue; stroke- 
          width:15" />
    </pattern>

    <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
</svg>

我对解决方案做了一些修改，包括一个用于背景颜色的矩形（是否有更好的方法呢？）。但我只是想不出如何做到三个条纹。我还想知道的另一件事是，是否有一种方法可以将颜色作为某种参数传递给图案，这样就不必为切换颜色而声明多个图案？

Answer 1

我已经在您的图案中添加了第二行。另外，我还删除了值== 0的属性。例如，如果您的stroke-width是10，则需要从5开始行，因为一条线的一侧画了5个单位，而线画了5个。另一边。希望对您有所帮助。

<svg width="300" height="300" viewBox="0 0 200 200">
    <pattern id="diagonalHatch" width="30" height="10" 
     patternTransform="rotate(130)" patternUnits="userSpaceOnUse">
         <rect width="100%" height="100%" fill="orange"></rect>
         <line x1="5" x2="5" y2="10" style="stroke:blue; stroke-width:10" />
         <line x1="15" x2="15" y2="10" style="stroke:red; stroke-width:10" />
    </pattern>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
</svg>

Answer 2

另一种方法是使用重复的线性渐变来创建条纹。

<svg width="300" height="300" viewBox="0 0 200 200">
  <defs>
    <linearGradient id="diagonalHatch" gradientUnits="userSpaceOnUse"
                    x2="30" spreadMethod="repeat" gradientTransform="rotate(-45)">
      <stop offset="0" stop-color="orange"/>
      <stop offset="0.33" stop-color="orange"/>
      <stop offset="0.33" stop-color="blue"/>
      <stop offset="0.67" stop-color="blue"/>
      <stop offset="0.67" stop-color="red"/>
      <stop offset="1.0" stop-color="red"/>
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#diagonalHatch)"/>
</svg>

三条纹图案

2 个答案: