添加边框到SVG图像

Question

添加边框到SVG图像

Ser*_*giu 14 css svg border

是否可以将SVG图像包装在边框内(即 - 围绕该图像放置CSS边框).

Answer 1

Rob*_*son 25

画一个<rect>圆形图像,填充="无".您可以使用<rect>作为边框的笔划.

Answer 2

Ped*_*edo 9

以下是一些在 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>

Run Code Online (Sandbox Code Playgroud)

希望能帮助到你。:)

Answer 3

Den*_*Den 5

如果您想通过 CSS 添加边框到一些随机的 SVG 几何形状，可以使用outlineCSS 属性来实现。

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，10 月前
查看次数：	29904 次
最近记录：	6 年，6 月前