title: Path with relative points in SVG
body: <p>I have got svg with flexible height and width.</p>
  
  <p>I'm trying to produce code equivalent to this: </p>
  
  <pre><code>&lt;div id="svg-container"&gt;
    &lt;svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'&gt;
  
      &lt;path 
        style="fill:none;stroke:blue;stroke-width:5;"
        d="M0% 10% L50% 10% L50% 90% L100% 90%"          &lt;-here is the problem
      /&gt;
  
    &lt;/svg&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>So when I scale <code>#svg-container</code> i will get:</p>
  
  <p><img src="https://i.stack.imgur.com/JS335.png" alt="enter image description here"></p>
  
  <p>But since I can't create path with percent coordinates the best I can do is: (<a href="http://jsfiddle.net/h0c5vgjw/" rel="nofollow noreferrer">JSFiddle)</a></p>
  
  <pre><code>&lt;div id="svg-container"&gt;
    &lt;svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: yellow'&gt;
  
      &lt;path 
        style="fill:none;stroke:blue;stroke-width:5;"
        d="M0 10 L50 10 L50 90 L100 90"               
      /&gt;
  
    &lt;/svg&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Which gives me this results:</p>
  
  <p><img src="https://i.stack.imgur.com/TlrqO.png" alt="enter image description here"></p>
  
  <p>On the second picture you can see problem with stretched <code>stroke-width</code>.</p>
  
  <p><strong>My question is: how to achieve behavior like on the first picture?</strong> </p>
  
  <p>I'm not looking for JavaScript answers and breaking path.</p>