svg pointer-events="auto"

svg   pointer-events="auto"

 

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" pointer-events="none">
  
  <g  >
     <animate  attributeName="opacity"
from="0" to="1" dur="3s"  begin="click"
restart="always" repeatCount="3"></animate>
    
    <rect x="150" y="50" width="100" height="50"   pointer-events="auto">   
     <animate  attributeName="x"
from="0" to="222" dur="3s"  begin="click"
restart="always" repeatCount="3"></animate>
</rect> 
<rect x="150" y="180" width="100" height="50" >   
     <animate  attributeName="x"
from="0" to="222" dur="3s"  begin="click"
restart="always" repeatCount="3"></animate>
</rect> 

    

</g>
  
  


</svg>
</body>
</html>

pointer-events="auto" 用了这个 标签  就代表可以触发事件了具体原理就是 按照事件冒泡 判断 pointer-events="auto" 来决定是否触发事件 一旦auto 往上冒泡都会触发事件 https://codepen.io/a6965921/pen/vYyrGeP