Question

我的问题是这样

我在边框图像CSS上有一个SVG图像。它可以像我想要的那样在Chrome上呈现，但是在Firefox上却很拉伸。

我必须修改SVG内部的width和height值以“修复”它，但是当我只需要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>

我可以这样解决吗？

我使用边框图像制作一个简单的点是错误的吗？

编辑：出于某种原因，我想使用SVG来制作点，无论如何，但仅限于SVG：）

谢谢！

Answer 1

它表明preserveAspectRatio在Firefox中无法正常工作（至少在数据uri中无效）。如果需要它，则需要保持比例：如果想要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;

}

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

2 个答案: