SVG渐变填充不起作用 [英] SVG gradient fill doesn't work
本文介绍了SVG渐变填充不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将渐变背景添加到SVG路径.路径是黑色的. 这是我得到的代码:
I'm trying to add a gradient background to an SVG path. The path is black, instead. This is the code I've got:
<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>
我想念什么?
谢谢
推荐答案
linearGradient
中包含大写字母G.您上面的代码段为lineargradient
linearGradient
has a capital G in it. Your snippet above has it as lineargradient
这篇关于SVG渐变填充不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文