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，并且播放/暂停按钮（三个控件的中间部分）有时对单击无响应，似乎填充区域没有响应。

我尝试使用指针事件，即使在每个svg元素的末尾添加了未填充的矩形形状，也似乎没有什么区别。

有人可以向我建议svg元素如何响应点击事件吗？而且，如何获得形状周围的整个正方形以响应单击，从而获得更好的用户体验？

Answer 1

默认为填充。您可以使用pointer-events CSS property进行更改。

e.target.id将为您提供您单击的元素的ID，这不会是“ play”，它将为null，因为path元素没有id，但是它们是可以单击的东西上。

Answer 2

在this场景中，我发现以下内容可以正常工作

svg {
  pointer-events: stroke;
}

svg元素现在可以全部单击。以前它对黑色填充没有反应。

可以单击SVG的哪一部分？

2 个答案: