如何使用 linearGradient defs 获取 SVG 元素的 xpath？
Posted
技术标签:
【中文标题】如何使用 linearGradient defs 获取 SVG 元素的 xpath？【英文标题】：How do I get the xpath for SVG element with linearGradient defs? 【发布时间】：2021-12-13 20:50:17 【问题描述】：我正在尝试查找以下具有线性渐变属性 stop-color="#FFFFFF" 的 SVG 矩形元素的 xpath。
我当然可以通过引用属性@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%" >
<rect fill="url(#color1)" />
</svg>
</svg>
</body>
【问题讨论】：
【参考方案1】：这个 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 fill="url(#color1)"/>
【讨论】：
谢谢！但我不是在寻找线性渐变元素 - 这不会指向矩形元素。知道如何找到具有 fill="url(#color1)" 但使用 #FFFFFF 的 rect 元素吗？ 修复 xpath 以获取rect 元素。
完成！ :-) 另一个问题，我如何也选择矩形元素的子元素（带有 color1 的圆圈）？更新了我上面问题中的输入。
//svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/svg/circle
很抱歉打扰您了。选择矩形+圆形怎么样？我似乎无法使用后代或自我轴来做到这一点 - 它会显示矩形而不是圆形。【参考方案2】：
我同意 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%" >
<rect fill="url(#color1)" />
</svg>
</svg>另请参阅：SVG gradient using CSS
【讨论】：
谢谢你，会注意的 :-) 这个问题对我来说更多的是关于 Xpath 的。以上是关于如何使用 linearGradient defs 获取 SVG 元素的 xpath？的主要内容，如果未能解决你的问题，请参考以下文章
使用 `fill="url(#a)"` 时如何使用 Tailwind CSS 设置 SVG <linearGradient> 样式？
与 Playstore aab 不同的独立 apk：LinearGradient 使用错误的颜色