title: SVG property vector-effect="non-scaling-stroke" still scales stroke
body: <p>In <code>SVG</code>, I need the <code>PATH</code> stroke width to remain as is while <code>viewBox</code> property is changing. The SVG property <code>vector-effect="non-scaling-stroke"</code> should accomplish that but it is not working as it suppose to. </p>
  
  <p>Can someone explain why in the code below (check the <a href="https://codepen.io/anon/pen/eKQrYL" rel="nofollow noreferrer">codepen.io</a>) the stroke width still increases as viewbox changes? I would also appreciate a solution that makes strokes width constant regardless of viewbox.</p>
  
  <p><strong><a href="https://codepen.io/anon/pen/eKQrYL" rel="nofollow noreferrer">https://codepen.io/anon/pen/eKQrYL</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="Item"&gt;
    &lt;div class="Item-graphic"&gt;
      &lt;svg id='scaling-stroke' width="200" height="200" viewBox="0 0 50 50"&gt;
        &lt;circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2"/&gt;
        &lt;path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/&gt;
        &lt;path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
    &lt;span&gt;
      50 x 50 view box&lt;br&gt;
      200 x 200 dimensions&lt;br&gt;
      no vector effect
    &lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="Item"&gt;
    &lt;div class="Item-graphic"&gt;
      &lt;svg id='non-scaling-stroke' width="200" height="200" viewBox="0 0 50 50"&gt;
        &lt;circle cx="25" cy="25" r="20" fill="none" stroke="#fff" stroke-width="2" vector-effect="non-scaling-stroke"/&gt;
        &lt;path d="M25 15 L 25 35" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/&gt;
        &lt;path d="M15 25 L 35 25" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke"/&gt;
      &lt;/div&gt;
    &lt;/svg&gt;
    &lt;span&gt;
      50 x 50 view box&lt;br&gt;
      200 x 200 dimensions&lt;br&gt;
      vector effect
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>*,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-color: #2196F3;
    font-family: Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.5;
  }
  
  svg {
    display: block;
    margin: 0 auto;
  }
  
  .Item {
    flex: 0 0 200px;
    padding: 0 1rem;
    color: rgba(#fff, 0.6);
    font-size: 11px;
    text-align: center;
  }
  
  .Item-graphic {
    display: flex;
    align-items: center;
    height: 220px;
  }
  </code></pre>
  
  <p><strong>JS</strong>  </p>
  
  <pre><code>n=1;inc=1;
  cvb = function(){
    vb = '' + n
    vb += ' ' + n
    vb += ' ' + 2*(25-n)
    vb += ' ' + 2*(25-n)
    $('#non-scaling-stroke').attr('viewBox', vb)
    $('#scaling-stroke').attr('viewBox', vb)
    n += inc;
    if (n&lt;=1 || n&gt;=24) inc *= -1;
    setTimeout(cvb, 100);
  }; 
  cvb() 
  </code></pre>