代码之家 › 专栏 › 技术社区 › onassar

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

vector svg css

onassar · 技术社区 · 6 年前

我有以下样本向量: 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的纯绿色边框,让它“拥抱”向量?我想要绿色的边界环绕向量的所有可见部分。

3 回复 | 直到 6 年前

Aman Ahmed Khan 6 年前

我在一个透明的矢量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>

Libor PlíÅ¡ek 6 年前

在这种情况下,可以将边框添加到父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)

onassar 6 年前

我知道怎么用 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>