SVG 的哪一部分可以被点击？

Question

有人可以向我解释一下 svg 的哪一部分会响应点击吗？比如是填充还是描边？

<svg class='arrow' id='play' version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
    .st1{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<g>
    <path class="st0" d="M2.9,18.1c-0.2,0.2-0.4,0.1-0.4-0.1V1c0-0.3,0.2-0.3,0.4-0.1l8.3,8.3c0.2,0.2,0.2,0.5,0,0.7L2.9,18.1z"/>
    <path class="st1" d="M2.9,18.1c-0.2,0.2-0.4,0.1-0.4-0.1V1c0-0.3,0.2-0.3,0.4-0.1l8.3,8.3c0.2,0.2,0.2,0.5,0,0.7L2.9,18.1z"/>
</g>
<line class="st0" x1="12.5" y1="0.5" x2="12.5" y2="18.5"/>
<g>
    <line class="st0" x1="15.5" y1="0.5" x2="15.5" y2="18.5"/>
</g>
<rect x="0" y="0" width="100%" height="100%" fill="none" />
</svg>

我有下面的例子 here 和 play/pause 按钮（三个控件的中间）有时似乎对点击没有反应，似乎填充区域没有反应。

我试过使用指针事件，它似乎没有任何区别，即使在每个 svg 元素末尾添加了非填充矩形。

有人能告诉我 svg 元素如何响应点击事件吗？此外，您如何让形状周围的整个正方形响应点击以获得更好的用户体验？

Answer 1

默认情况下是填充。您可以使用 pointer-events CSS property.

更改此设置

e.target.id 会给你你点击的元素的 id，它不会是 "play"，它将是空的，因为路径元素没有 id 但它们就是东西可以点击。

Answer 2

在 this 场景中，我发现以下方法有效

svg {
  pointer-events: stroke;
}

svg 元素现在全处都可以点击。以前它没有响应黑色填充。

SVG 的哪一部分可以被点击？

Which part of an SVG can be clicked on?

javascript

svg

click

addeventlistener