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

Question

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>

LMC · Accepted Answer · 2021-10-28T23:43:10.503

1

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)"/>

edited Oct 28 '21 at 23:43

answered Oct 28 '21 at 21:25

LMC

10,453
2
27
52

Thank you! But I am not looking for the lineargradient element - this wouldn't point to the rectangle element. Any idea how I can find the rect element that has fill="url(#color1)" but using #FFFFFF instead? – Ryan Oct 28 '21 at 23:37
Fixed the xpath to get `rect` element. – LMC Oct 28 '21 at 23:40
Done! :-) Another question, how do I also select the child (circle with color1) of the rect element? Updated the input in my question above. – Ryan Oct 29 '21 at 00:26
`//svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/svg/circle` – LMC Oct 29 '21 at 00:38
Sorry to be bothering you on this. What about selecting both the rect+circle? I couldn't seem to do it with the descendant-or-self axis - it would display the rects and not circle. – Ryan Oct 29 '21 at 00:47
`//svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/rect | //svg[defs/linearGradient/stop[@stop-color="#FFFFFF"]]/svg/svg/circle` – LMC Oct 29 '21 at 00:49

score 1 · Answer 2 · answered Oct 28 '21 at 23:02

I agree to LMC.

But your svg code is incomplete.
It doesn't work as a self contained .svg file (alwas a good starting point to check, wether your svg specific markup results in an expected display).
You missed to define starting and end color stops.

Try this:

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

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

2 Answers2