css - 是否可以在透明矢量/svg 周围添加 1px 边框？

Question

我有以下样本向量: https://jsfiddle.net/fuho74vp/1/

示例代码如下:

<div style="background-color: red;">
  <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve" style="border: 1px solid green;">
  <path d="M25,48c12.683,0,23-10.317,23-23S37.683,2,25,2S2,12.317,2,25S12.317,48,25,48z M23,17h10v10l-4.293-4.293l-12,12
    l-1.414-1.414l12-12L23,17z"/>
  </svg>
</div>

是否可以使用 CSS 在矢量周围应用 1px 实心绿色边框，并让它“拥抱”矢量？我希望绿色边框环绕矢量的所有可见部分。

Answer 1

我在透明矢量 SVG 周围添加了 1px 的绿色边框。

请尝试下面的代码。

<div style="background-color: red;">
  <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve" style="border: 1px solid green;">
  <path stroke="green" stroke-width="0.3" d="M25,48c12.683,0,23-10.317,23-23S37.683,2,25,2S2,12.317,2,25S12.317,48,25,48z M23,17h10v10l-4.293-4.293l-12,12
    l-1.414-1.414l12-12L23,17z"/>
  </svg>
</div>