SVG border-image идеально подходит для Chrome, растягивается в Firefox

Question

Моя проблема заключается в следующем:

У меня есть изображение SVG на CSS с бордюрным изображением.Он рендерится так, как я хочу на 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 (по крайней мере, в Data Uris).Если вам это нужно, вам нужно соблюдать пропорции: если вы хотите viewBox='0 0 2 1' и width='50', вам нужно height='25', а не высота = '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>

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;

}