如何通过stop-color值获取带linearGradient定义的SVG元素XPath

可行解决方法 #

核心思路 #

无需调用url()函数，直接通过字符串截取提取fill属性里的渐变ID，再关联查询defs里对应渐变的色值即可，eXide完全支持这种纯XPath字符串操作和节点关联逻辑。

可用XPath表达式 #

//rect[substring-before(substring-after(@fill, 'url(#'), ')') = //linearGradient[stop/@stop-color = '#FFFFFF']/@id]

表达式拆解说明 #

• 先用substring-after(@fill, 'url(#')提取fill="url(#color1)"里url(#之后的内容，得到color1)"
• 再用substring-before(..., ')')截取掉末尾的)，得到纯渐变IDcolor1
• 最后关联查询defs下所有stop节点stop-color为#FFFFFF的linearGradient的ID，匹配到一致的就返回对应的rect节点

扩展兼容方案 #

如果存在单个linearGradient下有多个stop的场景，可以调整匹配逻辑，比如只匹配第一个stop的色值：

//rect[substring-before(substring-after(@fill, 'url(#'), ')') = //linearGradient[stop[1]/@stop-color = '#FFFFFF']/@id]

内容的提问来源于stack exchange，提问作者Ryan