三条纹图案

Question

我是 svg 的新手（和一般的设计），正在寻找一种方法来填充 svg 形状/路径，用三个不同颜色的大小相同的对角条纹。对于两条条纹，我已经在 Stack Overflow (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>