javascript - 如何找到图像元素的xpath

Question

我有一个下面的 HTML 代码，它指向屏幕上的 SVG(图像)元素

<div _ngcontent-c25="" class="chart-div ng-star-inserted">
      <!---->
      <!----><div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
				<svg width="80" height="80">
					<g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
						<path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
						<path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
						<path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
						<path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
					</g>
				</svg>
			<div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;"><div class="attrLabel" style="font-weight: bold;">Germany</div><div class="attrCount">693</div><div class="attrPercent">51.4%</div></div></div>
      <!----><p _ngcontent-c25="" class="filtered-text ng-star-inserted">
        no value filtered
      </p>
      <!---->
      <!---->
      <!---->
    </div>

我能够在 div 标签之前找到该元素，但是如果我尝试访问 SVG 中的该元素，并且其子 chrome 无法找到该元素

XPath ://div[@class='pie-div ng-star-inserted'] - 这在 div 之前完美运行 但如果我尝试访问其子元素 SVG 和路径，它根本无法找到它(尽管代码在屏幕上可见)

我尝试过的Xpath://div[@class='pie-div ng-star-inserted']/svg/g/path 1

屏幕上的元素将如下图所示。

该元素实际上是屏幕上的 svg 图像(饼图)，一旦我们将鼠标悬停在其上，它就会显示相应位置数据的弹出窗口

Answer 1

你的xpath需要是//div[@class='pie-div ng-star-inserted']/*[name()='svg']/*[name()='g' ]/*[name()='path'] - 通过搜索 xpath + svg 找到

还有另一种语法 //div[@class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path - 并使用 NSresolver 参数，您可以按如下方式使其工作

const xpath = "//div[@class='pie-div ng-star-inserted']/svg:svg/svg:g/svg:path";
let result = document.evaluate(
  xpath, 
  document, 
  prefix => prefix === 'svg' ? 'http://www.w3.org/2000/svg' : null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
  null
);

for (var i = 0; i < result.snapshotLength; i++) {
  console.log(result.snapshotItem(i).getAttribute('fill'));
}

<div _ngcontent-c25="" class="chart-div ng-star-inserted">
  <div _ngcontent-c25="" class="pie-div ng-star-inserted" d3-pie="">
    <svg width="80" height="80">
      <g transform="translate(40,40)" width="80" height="80"><g transform="translate(40,40)"></g>
        <path d="M2.4492935982947065e-15,-40A40,40 0 0,1 30.83714902626715,-25.476856947665098L13.876717061820216,-11.464585626449294A18,18 0 0,0 1.102182119232618e-15,-18Z" fill="#3182bd"></path>
        <path d="M30.83714902626715,-25.476856947665098A40,40 0 0,1 36.923912424205994,15.382610028521366L16.615760590892698,6.922174512834615A18,18 0 0,0 13.876717061820216,-11.464585626449294Z" fill="#6baed6"></path>
        <path d="M36.923912424205994,15.382610028521366A40,40 0 0,1 3.4424059772594435,39.851597723149425L1.5490826897667496,17.93321897541724A18,18 0 0,0 16.615760590892698,6.922174512834615Z" fill="#9ecae1"></path>
        <path d="M3.4424059772594435,39.851597723149425A40,40 0 1,1 -7.347880794884118e-15,-40L-3.3065463576978533e-15,-18A18,18 0 1,0 1.5490826897667496,17.93321897541724Z" fill="#c6dbef"></path>
      </g>
    </svg>
    <div class="attrFilter-tooltip" id="attributeFilterTooltipCountry" style="display: none; position: fixed; left: 1567px; top: 325px; z-index: 1000; background: rgb(238, 238, 238); box-shadow: rgb(153, 153, 153) 0px 0px 5px; color: rgb(51, 51, 51); width: 100px; text-align: center;">
      <div class="attrLabel" style="font-weight: bold;">Germany</div>
      <div class="attrCount">693</div>
      <div class="attrPercent">51.4%</div>
    </div>
  </div>
  <p _ngcontent-c25="" class="filtered-text ng-star-inserted">
    no value filtered
  </p>
</div>