三条纹图案

Question

我是 svg（和一般设计）的新手，正在寻找一种方法来填充 svg 形状/路径，其中包含三个大小相同的不同颜色对角条纹。对于两条条纹，我已经在 Stack Overflow 上找到了解决方案（svg 中的简单填充模式：对角线阴影）：

<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>