SVG渐变填充不起作用

2012-06-04 109 views 3 likes

我正在尝试向SVG路径添加渐变背景。相反，路径是黑色的。这是我已经得到了代码：SVG渐变填充不起作用

<svg style="overflow: hidden; position: relative; " height="150" version="1.1" width="290" xmlns="http://www.w3.org/2000/svg"> 
... 
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); "> 
     <lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"></stop> 
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"></stop> 
     </lineargradient> 
    </defs> 
    <path style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " fill="url(#grad1)" stroke="none" d="M100,114L74,114L74,83L100,83Z"></path> 
... 
</svg>

我缺少什么？

感谢

来源

2012-06-04 Miki

回答

linearGradient有一个资本的G吧。上面的代码片段将其作为lineargradient

来源

2012-06-04 20:45:47

SVG渐变填充不起作用

回答

相关问题