我如何获得SVG元素的xpath与线性梯度定义?

我试图找到以下SVG矩形元素的xpath与lineargradient属性stop-color="#FFFFFF"

我当然可以通过引用属性@fill=url(#color1)来检索xpath，但我想通过颜色代码#FFFFFF来实现。这样做很令人困惑，因为URL()函数在eXide中没有解析。如有任何建议，不胜感激。

<body>
<svg>
<defs>
<linearGradient id="color1">
<stop stop-color="#FFFFFF" />
</linearGradient>
<linearGradient id="color2">
<stop stop-color="#000000" />
</linearGradient>
</defs>
<svg x="10%" y="10%" width="10%" height="10%">
<rect width="100%" height="100%" fill="url(#color1)" />
</svg>
</svg>
</body>

这个xpath应该得到预期的元素

//svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/rect

使用xmllint进行命令行测试

xmllint --xpath '//svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/rect' tmp.html

<rect width="100%" height="100%" fill="url(#color1)"/>

同意LMC。

但是你的svg代码是不完整的。
它不能作为一个自包含的.svg文件工作(总是一个很好的起点，检查您的svg特定的标记是否导致预期的显示)。
您没有定义起始和结束颜色止点。

试试这个:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="color1" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#f00" />
</linearGradient>
</defs>
<svg x="10%" y="10%" width="10%" height="10%">
<rect width="100%" height="100%" fill="url(#color1)" />
</svg>
</svg>

参见:SVG渐变使用CSS

相关内容

最新更新

热门标签：