html - 我可以在同一个文件中使用 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>