CSS：SVG 边框图像损坏渲染

Question

Chrome 似乎奇怪地渲染了 SVG 边框图像......

示例代码： html

   .border-img{
        margin:100px;
        width:100px;
        height:30px;
        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: 40 40 40 40 fill;
        border-image-width: 10px;
        border-image-outset: 25px 10px;
        background-size: contain;
    }
    
    .border-img.ok {
        height: 31px
    }

    <div class="border-img">test content</div>
    <div class="border-img ok">test content</div>



 

如您所见，上面的项目的边框被破坏了，只是因为它的高度是30px 而将高度设置为31px 可以解决所有问题。

JSFiddle：https://jsfiddle.net/6mydfczo/17/

无论容器大小如何，有什么技巧可以修复 svg 边框以正确呈现？

Answer 1

好像你必须先定义border属性（边框：10px纯白；）然后你可以应用边框图像。参见代码 sn-p 示例。

更新：减少分割源 svg 到它的视图框大小（在这种情况下）。切片存在一些问题：仅渲染角可能会出现过多的分割问题。正如我在 this MDN Web DOC page 中看到的那样（向下滚动到示例），如果您滑动调整 border-image-slice=45，您会遇到问题：

即使您选择较少数量的切片也可以：

/* applying box sizing */
*, ::after, ::before {
  box-sizing: border-box;
}

.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.border-img {
  margin: 100px;
  width: 100px;
  height: 30px;
  border: 10px solid white;
  border-image-source: 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: 30 fill; /* decrease dividing source svg */
  border-image-width: 10px;
  border-image-outset: 25px 10px;
  border-image-repeat: stretch;
  background-size: contain;
}

<div class="d-flex">
  <div class="border-img">content 30</div>
  <div class="border-img" style="height: 31px;">content 31</div>
  <div class="border-img" style="height: 130px;">content 130</div>
  <div class="border-img" style="height: 130px; width: 200px;">content 130/200</div>
</div>