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

Question

我有一个SVG元素 - 一个矩形。

现在，要给这个元素上色，我使用可以与任何颜色一起使用的fill属性。

现在，我想通过使用这个属性来给它一个条纹颜色：

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

当赋值给background属性时，这适用于普通DOM元素。

但是，对于SVG元素，它不起作用。

我如何实现这一点？

- 这就是我试图让我的SVG元素看起来像的方式（我正在使用d3.js）

- Cute_Ninja

---

SVG渐变不是这样工作的。请参考https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Gradients。 - Lars Kotthoff

值得一提的是，SVG2计划允许您使用CSS图像值（包括CSS渐变函数）作为SVG填充值。但细节尚未确定，也没有人支持它。您必须像Lars链接中所解释的那样，为SVG元素使用SVG渐变。 - AmeliaBR

Answer 1

更好的解决方案：

http://jsfiddle.net/mcab43nd/14/

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

- LexDiamonds

---

有两种方法可以解决你想要的视图，我的意见是使用Pattern方式，因为它在你将要使用的形状上创建了一致性条纹。线性渐变也可以工作，但如果你将其用于不同的图表上，它会有不同的行为。希望这能帮助你使用Pattern方式。Pattern - http://jsfiddle.net/hodca/yduKG/254/LinearGradient - 如上所述包含在上面 - http://jsfiddle.net/hodca/mcab43nd/87/祝一切顺利！ - hod caspi

Answer 2

http://jsfiddle.net/mcab43nd/1/ - 这里是解决方案

感谢Lars和AmeliaBR的帮助

以下是代码：

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

- Cute_Ninja

---

没有必要使用两个渐变，只需将spreadMethod移动到第一个渐变并直接使用它即可。 - Robert Longson