我可以在同一文件中使用 SVG 元素来显示边框图像吗？

Question

我的 HTML 页面中有一个 <svg id="image">，我想将该图像用作边框。

我在网上找到的是可以在CSS中添加：

border-image: url('/some/path/to/image.svg');

我想做的是引用页面中的 SVG。这是我尝试过的：

div {
  border: 10px solid;
  border-image: url('#round-rect');
  border-image-slice: 10;
}

svg {
  display: none;
}

<div>This should have rounded corners</div>

<svg id="round-rect">
<rect width="30" height="30" rx="10">
</svg>

有办法吗？

Answer 1

您可以将 SVG 作为数据包含在内 URL。

div {
  border: 10px solid;
  border-image: url('data:image/svg+xml,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="10" fill="red"/></svg>');
  border-image-slice: 10;
}

<div>This should have rounded corners</div>

我可以在同一文件中使用 SVG 元素来显示边框图像吗？

Can I use a SVG element in the same file to display a border-image?

html

css

svg

border-image