1

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

2 回答 2

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)"/>
于 2021-10-28T21:25:52.243 回答
1

我同意 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>

另请参阅：使用 CSS 的 SVG 渐变

于 2021-10-28T23:02:13.783 回答