htmlxmlsvgxpathcss-variables

XPath for SVG element based on attribute value?

I tried to use XPath to select an svg element's fill attribute value, which uses an CSS variable, but I'm getting nothing back.

HTML:

<svg class="unf-icon" viewBox="0 0 24 24" width="24" height="24" 
     fill="var(--N400, #6C727C)" style="display: inline-block; 
     vertical-align: middle;">
  <path d="M9.5 18a.999.999 0 01-.71-1.71l4.3-4.29-4.3-4.29a1.004 1.004 0 011.42-1.42l5 5a.998.998 0 010 1.42l-5 5a1 1 0 01-.71.29z"></path>
</svg>

XPath attempts:

//*[name()='svg' and fill='#6C727C']
//*[name()='svg' and @fill="#6C727C"]
//*[name()='svg' and @contain(fill, "#6C727C")]
Solution

  • The third try was closest. Change

    //*[name()='svg' and @contains(fill, "#6C727C")]

    to

    //*[name()='svg' and contains(@fill, "#6C727C")]

    if you want to check that the fill attribute value has a substring of "#6C727C", or

    //*[name()='svg' and @fill="var(--N400, #6C727C)"]

    if you want to check that the fill attribute value exactly equals "var(--N400, #6C727C)"

    See also