Как мне получить xpath для элемента SVG с определениями linearGradient?

Я пытаюсь найти xpath для следующего элемента прямоугольника SVG с атрибутом lineargradient stop-color="#FFFFFF".

Я определенно могу получить xpath, указав атрибут @fill=url(#color1), но я хочу сделать это с помощью цветового кода #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 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>
Источник

2 ответа

Решение

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)"/>
Источник

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:

See also: SVG gradient using CSS

Источник
Другие вопросы по тегам