Можно ли добавить границу в 1 пиксель вокруг прозрачного вектора / SVG?

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

Я добавляю 1px зеленую рамку вокруг прозрачного вектора SVG.

Пожалуйста, попробуйте код ниже.

<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>

Answer 2

Я понял, как это сделать, используя атрибут 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>

Answer 3

В этом случае вы можете добавить границу к родительскому 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 ...