title: SVG border-image perfect on Chrome, stretch on Firefox
body: <p>My problem is this : </p>
  
  <p>I have a SVG image on a border-image CSS. 
  It render like I want on Chrome, but it's stretched on Firefox. </p>
  
  <p>I have to modify width and height value, inside the SVG, to "fix" it, but it show a lot of dots, when I want just 3. </p>
  
  <p>More explicite with this : <a href="https://codepen.io/benCat/pen/EeJmwL" rel="nofollow noreferrer">https://codepen.io/benCat/pen/EeJmwL</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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,&lt;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"&gt;&lt;circle fill="rgba(136, 165, 122, 0.4)" cx="1" cy="0.5" r="0.5"/&gt;&lt;/svg&gt;') 0 0 100% repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h1&gt;Normaly, 3 perfect dots with lot of space between&lt;/h1&gt;
    &lt;hr&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can I solve it by this way ? </p>
  
  <p>Am I wrong to use border-image to make a simple dot ? </p>
  
  <p><strong>EDIT</strong> : I want to make dots with SVG for some reasons, no matter the way, but only in SVG :)</p>
  
  <p>Thank you !</p>