小编Tom*_*ane的帖子

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

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