为什么我不能在 svg 路径上添加边框？

Question

我有一个svg，我正在突出显示我对hover path。 这是我的svg

<svg version="1.1" x="0px" y="0px" viewBox="0 0 2986 886" enable-background="new 0 0 2986 886">
  <image display="block" overflow="visible" width="2986" height="886" xlink:href="/A-1.jpg">
  </image>
  <path fill="none" stroke="#000000" strokeWidth="0.25" stroke-miterlimit="10" points="2781.5,905 2986,905 2986,865.6
    2842.7,634.6 2635.2,601.1 " id="1"></path>
   ....
</svg>

这是我的css：

svg path{
  fill:none;
  pointer-events:all;
}
svg path:hover {
    fill:  rgba(73,143,226,0.80);
    border: 5px solid #31C6FF;
}
svg rect:hover {
    fill:  rgba(73,143,226,0.80);
    border: 5px solid #31C6FF;
}
svg polygon:hover {
    fill:  rgba(73,143,226,0.80);
    border: 5px solid #31C6FF;
}

当我hover时，我的path会变成正确的颜色，但我没有得到border。 我误解了什么？

Answer 1

对于SVG，请使用 stroke 属性而不是 border 。

编辑：正如问题的所有者在评论中指出的那样，需要stroke-opacity: 1以及stroke和stroke-width。