Creating XPATH for svg tag

Question

Below is the html for SVG, pls help me with creating XPATH for same

<svg data-reactid=".1q.0.3.1.0" version="1.1" class="svg-connector">
   <circle data-reactid=".1q.0.3.1.0.0" r="7" cy="11" cx="11" class="inner-circle"/>
</svg>

Answer 1

For svg nodes you need to use below syntax:

//*[name()="svg" and @class="svg-connector"]

This is because common HTML nodes and svg nodes belongs to different namespaces

Answer 2

Try the following xpath :

//svg[@class='svg-connector']

Answer 3

The <svg> elements are not from the XHTML namespace but belongs to SVG namespace. Hence you have to specify name()="svg" while constructing the xpath as follows :

//*[name()="svg" and @class="svg-connector"]/*[name()="circle" and @class="inner-circle"]

You can find a detailed discussion in Selenium WebDriver [Java]: How to Click on elements within an SVG using XPath