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

【问题标题】：Is it possible to add a 1px border around a transparent vector / svg?是否可以在透明矢量/svg 周围添加 1px 边框？
【发布时间】：2018-09-11 10:35:31
【问题描述】：

我有以下样本向量： 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 纯绿色边框，并让它“拥抱”矢量？我希望绿色边框环绕矢量的所有可见部分。

【问题讨论】：

标签： css svg vector

【解决方案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>

【讨论】：

【解决方案2】：

这种情况下，可以给父div加上边框，让div变成一个圆形，比如：

<div style="background-color: red; border: 10px solid green; border-radius: 1000px">
  <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" >
  <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>

（当然是 1px）

但也许最好的办法是直接在 svg 中绘制边框...

【讨论】：

是的，我想是的。

【解决方案3】：

我想出了如何使用vector-effect 属性来做到这一点。这是一个心脏的例子：

<svg height="1124pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1286 1124" width="1286pt" xmlns="http://www.w3.org/2000/svg">
    <path d="m3350 11234c-25-2-103-9-175-15-446-37-929-171-1316-364-1073-537-1732-1546-1849-2830-13-142-13-472 0-650 95-1295 727-2420 2057-3666 448-420 852-765 1633-1399 481-390 1057-882 1350-1154 187-174 586-577 733-741 216-242 271-294 354-338 90-47 175-67 290-67 111 0 177 13 262 51 95 43 150 90 270 229 269 313 652 694 1084 1078 318 282 496 433 1222 1032 503 415 745 618 953 798 631 546 1130 1044 1485 1484 737 914 1106 1811 1153 2803 7 169-10 514-37 724-153 1205-828 2169-1865 2668-366 176-775 289-1227 339-212 24-638 25-800 1-547-78-1089-309-1625-691-273-195-490-378-761-645l-114-112-146 143c-769 753-1559 1193-2341 1304-100 14-494 26-590 18z" transform="matrix(.1 0 0 -.1 0 1124)" fill="transparent" vector-effect="non-scaling-stroke" stroke="#ffffff" stroke-width="1" stroke-dasharray="0" />
    <path d="m3350 11234c-25-2-103-9-175-15-446-37-929-171-1316-364-1073-537-1732-1546-1849-2830-13-142-13-472 0-650 95-1295 727-2420 2057-3666 448-420 852-765 1633-1399 481-390 1057-882 1350-1154 187-174 586-577 733-741 216-242 271-294 354-338 90-47 175-67 290-67 111 0 177 13 262 51 95 43 150 90 270 229 269 313 652 694 1084 1078 318 282 496 433 1222 1032 503 415 745 618 953 798 631 546 1130 1044 1485 1484 737 914 1106 1811 1153 2803 7 169-10 514-37 724-153 1205-828 2169-1865 2668-366 176-775 289-1227 339-212 24-638 25-800 1-547-78-1089-309-1625-691-273-195-490-378-761-645l-114-112-146 143c-769 753-1559 1193-2341 1304-100 14-494 26-590 18z" transform="matrix(.1 0 0 -.1 0 1124)" fill="transparent" vector-effect="non-scaling-stroke" stroke="#000000" stroke-width="1" stroke-dasharray="4,4" />
</svg>

【讨论】：