首页  编辑  

网页中如何用xpath定位SVG对象及模拟鼠标点击

Tags: /计算机文档/网页制作/   Date Created:
网页中，SVG无法像普通元素一样用XPATH定位，需要使用特殊的方式来进行定位，例如对于下面的布局：

  1. <div class="a" id="alert-dialog-title">
  2.  <h2 class="b">
  3.   <svg class="c" viewBox="0 0 24 24">
  4.    <path d="M19 19H5V5h14v14zM3 3v18h18V3H3zm14 12.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
  5.   </svg>
  6.   <div class="d">Hello world</div>
  7.  </h2>
  8. </div>

是无法通过　//*[@id="alert-dialog-title"]/h2/svg　来进行定位的。
如果要用xpath定位，必须使用下面的方法：

//*[@id="alert-dialog-title"]/h2/*[name="svg"]

同时，SVG 对象，不太支持 click() 方法，如果要模拟点击，必须使用 dispatchEvent 来实现，完整代码如下：
  1. document.evaluate('//*[@id="alert-dialog-title"]/h2/*[name()="svg"]', document)
  2.     .iterateNext()
  3.     .dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))