title: SVG - Different stroke width on different svg items
body: <p>I am trying to apply the same stroke width to my CSS on my webpage using CSS:</p>
  
  <pre><code>path {
    fill: none;
    stroke-width: 10pt;
    stroke: red;
  }
  </code></pre>
  
  <p>However the rendering is completely different on some SVG. Here is an example: <a href="http://jsfiddle.net/kaoo1jdb/" rel="nofollow">http://jsfiddle.net/kaoo1jdb/</a></p>
  
  <p>It should be quite straightforward but it's not. I am guessing it is due to scaling effect but I don't know how to fix it.</p>
  
  <p>Does anyone have any idea?</p>
  
  <p>Many thanks</p>