Javascript 使用重复的线性渐变颜色填充SVG元素

我有一个SVG元素——一个矩形

现在，为了给这个元素上色，我使用了与任何颜色一起工作的

fill

属性

现在，我试图通过使用这个属性给它一个条纹颜色

fill: repeating-linear-gradient(-45deg, #cc2229, #ffffff 4px, #cc2229 2px, #ffffff 8px);

当分配给

background

属性时，这适用于普通DOM元素

但是，它不适用于SVG元素

我怎样才能做到这一点

-这就是我尝试让SVG元素看起来的样子（我使用的是d3.js）

-解决方案就在这里

多亏了拉尔斯和阿米莉亚伯

这是密码

<svg>

<defs>
   <linearGradient id="Gradient-1"x1="3%" y1="4%" x2="6%" y2="6%">
     <stop offset="0%" stop-color= "red" />
     <stop offset="50%" stop-color= "white" />
   </linearGradient>

   <linearGradient id="repeat"xlink:href="#Gradient-1"spreadMethod="repeat" />
</defs>

<rect x="30" y="10"
      width="200" height="100"
      fill= "url(#repeat)"
      stroke="red"
      stroke-width="2px" />
</svg>

更好的解决方案：

SVG渐变不是这样工作的。出于兴趣的考虑，值得一提的是，SVG2计划允许您使用CSS图像值（包括CSS渐变函数）作为SVG填充值。但细节尚未决定，也没有人支持。您必须为SVG元素使用SVG渐变，如链接到的教程Lars中所述。没有理由使用2个渐变，只需将spreadMethod移动到第一个渐变，并直接使用它。解决此视图的两种方法，我的意见是模式方法，这是在您将使用的形状上创建一致性条的原因。线性梯度将工作，但如果你将使用它在sepral图表，它将有不同的行为。希望这将有助于一些方向，以使用模式的方式模式-lineargradient-如上所述-所有的最好！

<svg>

<defs>

  <pattern id="pattern"
           width="8" height="10"
           patternUnits="userSpaceOnUse"
           patternTransform="rotate(45 50 50)">
    <line stroke="#a6a6a6" stroke-width="7px" y2="10"/>
  </pattern>

</defs>

<rect x="5" y="5"
      width="1000" height="25"
      fill= "url(#pattern)"
      opacity="0.4"
      stroke="#a6a6a6"
      stroke-width="2px" />

</svg>