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

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 x="0%" y="0%" width="50%" height="50%">
        <circle cx="50%" cy="50%" r="10%" fill="url(#color1)"/>
      </svg>
      <svg x="0%" y="0%" width="50%" height="50%">
        <rect cx="20%" cy="10%" r="10%" fill="url(#color2)"/>
      </svg>
    </svg>
  </svg>
</body>

CodePudding user response：

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>