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

165 Views Asked by Ryan At 20 October 2024 at 19:52

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>

Original Q&A

There are 2 best solutions below

LMC On 28 October 2021 at 21:25 BEST ANSWER

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

herrstrietzel On 28 October 2021 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?

There are 2 best solutions below

Related Questions in URL

Related Questions in SVG

Related Questions in XPATH

Related Questions in EXIDE

Trending Questions

Popular # Hahtags

Popular Questions