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

Question

我正在尝试为以下具有 lineargradient 属性 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>

Answer 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

Returns

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

Answer 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

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

How do I get the xpath for SVG element with linearGradient defs?

url

xpath

svg

exide