SVG 边框图像在 Chrome 上完美，在 Firefox 上拉伸

Question

我的问题是这样的：

我在边框图像 CSS 上有一个 SVG 图像。 它在 Chrome 上呈现我想要的效果，但在 Firefox 上被拉伸了。

我必须修改 SVG 内部的宽度和高度值，以“修复”它，但它显示了很多点，而我只想要 3 个。

更明确地说：https://codepen.io/benCat/pen/EeJmwL

.container {
  text-align: center;
}

h1 {
    margin-bottom: 2em;
}

hr {
    position: relative;
    width: 45em;
    border-width: 0 0 1em;
    border-style: solid;
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2 1" width="50" height="4" xml:space="preserve" preserveAspectRatio="meet"><circle fill="rgba(136, 165, 122, 0.4)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;
}

<div class="container">
  <h1>Normaly, 3 perfect dots with lot of space between</h1>
  <hr>
</div>

我可以这样解决吗？

使用border-image 来制作一个简单的点我错了吗？

编辑：出于某些原因，我想用 SVG 打点，无论如何，但仅限于 SVG :)

谢谢！

Answer 1

preserveAspectRatio 在 Firefox 中似乎无法正常工作（至少在数据 uris 中没有）。如果你需要它工作，你需要保持比例：如果你想要viewBox='0 0 2 1' 和width='50'，你需要height='25' 而不是 height='4'。粗略地说，这可能不是您所需要的，但您明白了要点。 另外：在 CSS 中最好使用encoded SVG

.container {
  text-align: center;
}

h1 {
    margin-bottom: 2em;
}

hr {
    position: relative;
    width: 45em;
    border-width: 0 0 1em;
    border-style: solid;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 2 1' width='50' height='25' xml:space='preserve' preserveAspectRatio='meet'%3E%3Ccircle fill='rgba(136, 165, 122, 0.4)' cx='1' cy='0.5' r='0.5'/%3E%3C/svg%3E") 0 0 100% repeat;
}

<div class="container">
  <h1>Normaly, MANY perfect dots with SOME space between</h1>
  <hr>
</div>

更新： 为了只获得 3 分，您需要像这样更改 SVG。

.container {
  text-align: center;
}

h1 {
    margin-bottom: 2em;
}

hr {
    position: relative;
    width: 45em;
    border-width: 0 0 1em;
    border-style: solid;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='-7 0 16 1' width='400' height='25' xml:space='preserve' preserveAspectRatio='meet'%3E%3Ccircle fill='rgba(136, 165, 122, 0.4)' cx='1' cy='0.5' r='0.5'/%3E%3C/svg%3E") 0 0 100% repeat;
}

<div class="container">
  <h1>Normaly, 3 perfect dots with lot of space between</h1>
  <hr>
</div>

Answer 2

也许做背景？

hr {
    position: relative;
    width: 45em;
    height: 1em;
    border: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 2 1" width="50" height="4" xml:space="preserve" preserveAspectRatio="meet"><circle fill="rgba(136, 165, 122, 0.4)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;

}