淘先锋技术网

首页 1 2 3 4 5 6 7

给SVG图像添加边框

有没有可能将一个SVG图像包装在一个边框内(也就是说——在图像周围放置一个来自CSS的边框)。

画一个& ltrect & gt使用fill = & quot无& quot。可以使用stroke属性设置边框。

以下是一些在Firefox中测试过的例子:

<svg width="100" height="100" style="border:1px solid black">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

<br><br>

<svg width="300" height="100" style="border:1px solid black">
  <rect width="300" height="100" style="fill:rgb(110, 50, 25); stroke-width:4; stroke:rgb(43, 222, 221);" />
</svg>

<br><br>

<svg width="170" height="170" style="border:1px solid black">
  <rect x="10" y="10" width="150" height="150" style="fill:blue; stroke:pink; stroke-width:5; fill-opacity:0.1; stroke-opacity:0.9;" />
</svg>

如果你想从CSS中给一些随机的几何SVG形状添加一个边框，可以用outline CSS属性来实现。

ellipse {
  outline: 1px solid red;
  outline-offset: 2px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <meta
    http-equiv="X-UA-Compatible"
    content="ie=edge"
  >
  <title>Demo</title>
</head>

<body>

<svg width="224" height="112" viewBox="0 0 224 115" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="112.5" cy="84" rx="28.5" ry="28" fill="#D9D9D9"/>
<path d="M26.5 0L52.9138 45H0.0862255L26.5 0Z" fill="#D9D9D9"/>
<path d="M196.5 0L202.899 19.3475H223.605L206.853 31.305L213.252 50.6525L196.5 38.695L179.748 50.6525L186.147 31.305L169.395 19.3475H190.101L196.5 0Z" fill="#D9D9D9"/>
</svg>



</body>

</html>