时间戳

首页 > 解决方案 > SVG 边框图像在 Chrome 上完美，在 Firefox 上拉伸

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

问题描述

我的问题是这样的：

我在边框图像 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>

我可以通过这种方式解决它吗？

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

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

谢谢 ！

标签： csssvg

解决方案

它preserveAspectRatio在 Firefox 中无法按预期工作（至少在数据 uris 中没有）。如果你需要它工作，你需要保持比例：如果你想要viewBox='0 0 2 1'并且 width='50'你不需要height='25'height='4'。粗略地说，这可能不是您所需要的，但您明白了要点。另外：在 CSS 中最好使用编码的 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>

推荐阅读