使用重复的线性渐变颜色填充SVG元素 [英] Fill SVG element with a repeating linear gradient color

问题描述

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

现在，为了给这个元素着色，我使用 fill

现在，我试图通过使用此属性给它条纹颜色。

  fill：repeating-linear-gradient（-45deg，＃cc2229，#ffffff 4px，＃cc2229 2px，#ffffff 8px）; 
  

这适用于正常的DOM元素，当分配到 background 属性。

但是，它不适用于SVG元素。

？

我尝试我的SVG元素看起来像（我使用d3.js）

解决方案

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

感谢Lars和AmeliaBR

以下是代码

：

  ; svg> 
 
< defs> 
< linearGradient id =Gradient-1x1 =3％y1 =4％x2 =6％y2 =6％ 
< stop offset =0％stop-color =red/> 
< stop offset =50％stop-color =white/> 
< / linearGradient> 
 
< linearGradient id =repeatxlink：href =＃Gradient-1spreadMethod =repeat/> 
< / defs> 
 
< rect x =30y =10
 width =200height =100
 fill =url（#repeat）
 stroke =red
 stroke-width =2px/> 
< / svg> 
  

I have an SVG element - a rectangle.

Now, to color this element, I use fill attribute that works with any color.

Now, I am trying to give it a stripes color by using this property

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

This works for normal DOM elements when assigned to background attribute.

But, IT DOESN'T WORK WITH SVG ELEMENT.

How can i achieve that?

- this is how i am trying my SVG element to look like (I am using d3.js)

解决方案

http://jsfiddle.net/mcab43nd/1/ - solution is here

Thanks to Lars and AmeliaBR

Here is the code

<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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！