如何编写XPath定位class为sc-2wok21-1 hlSSAt的a标签下的SVG元素

目标DOM结构 #

<a class="sc-2wok21-1 hlSSAt">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
  <path d="M14.707 6.293L20.414 12l-5.707 5.707-1.414-1.414L16.585 13H4v-2h12.585l-3.292-3.293 1.414-1.414z">
  </path>
</svg>
</a>

原有写法失效原因 #

• 写法//a[@class="sc-2wok21-1 hlSSAt"]/svg失效：SVG元素属于独立的http://www.w3.org/2000/svg命名空间，默认的标签名匹配只会查找无命名空间的元素，无法命中带SVG命名空间的节点。
• 写法//a[@class="sc-2wok21-1 hlSSAt"]/[local-name()=‚svg‘]失效：存在两处语法错误，一是路径斜杠后直接跟谓词[]，缺少节点选择步骤；二是使用了错误的全角引号，XPath无法识别。

可用正确写法 #

通用兼容写法（优先推荐） #

不需要提前声明命名空间，适配几乎所有XPath执行环境（浏览器控制台、Selenium、爬虫解析库等）：

//a[@class="sc-2wok21-1 hlSSAt"]/*[local-name()='svg']

如果需要更严谨的匹配，避免误匹配其他命名空间下的同名节点，可以加上命名空间地址校验：

//a[@class="sc-2wok21-1 hlSSAt"]/*[local-name()='svg' and namespace-uri()='http://www.w3.org/2000/svg']

命名空间声明场景写法 #

如果你使用的XPath解析工具支持自定义命名空间前缀（比如lxml、Java XPath处理器），可以先将SVG命名空间http://www.w3.org/2000/svg绑定到自定义前缀（例如svg），之后可以直接用前缀匹配：

//a[@class="sc-2wok21-1 hlSSAt"]/svg:svg

注意：浏览器原生document.evaluate接口使用前缀匹配时，必须提前通过命名空间解析器配置映射关系，否则依然匹配失败，日常定位元素优先选第一种通用写法即可。

内容的提问来源于stack exchange，提问作者Bao Hoang