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>

Answer 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中绘制边框...

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

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

3 个答案: