Search code examples
urlsvgxpathexide

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

I am trying to find the xpath for the following SVG rectangle element with lineargradient attribute stop-color="#FFFFFF".

I can certainly retrieve the xpath by referencing the attribute @fill=url(#color1) but I want to do it by the color code #FFFFFF. It is confusing to do so as the URL() function is not resolving in eXide. Any advice is very much appreciated.

<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>
Solution

  • This xpath should get the element as expected

    //svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/rect

    Testing on command line with xmllint

    xmllint --xpath '//svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/rect' tmp.html

    Returns

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