如何使用 linearGradient defs 获取 SVG 元素的 xpath？答案

【问题标题】：How do I get the xpath for SVG element with linearGradient defs?如何使用 linearGradient defs 获取 SVG 元素的 xpath？
【发布时间】：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%" width="10%" height="10%">
      <rect width="100%" height="100%" fill="url(#color1)" />
    </svg>
  </svg>
</body>

【问题讨论】：

标签： url svg xpath exide

【解决方案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 width="100%" height="100%" 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%" width="10%" height="10%">
      <rect width="100%" height="100%" fill="url(#color1)" />
    </svg>
</svg>

另请参阅：SVG gradient using CSS

【讨论】：

谢谢你，会注意的 :-) 这个问题对我来说更多的是关于 Xpath 的。