9/13/2016

[SVG] Horizontal Line not Visible in Chrome


<line
  x1="10" y1="1"
  x2="90" y2="1.0001" // hack: horizontal line in SVG not visible in Chrome
  stroke="#FF0000"
  strokeWidth="1"/>


One easy way to fix it is just make it not perfectly horizontal. Adding a little bit offset makes it visible.

SVG Path Percentage Units

  <svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
   <path  stroke="#000" fill="none" d="M0,0 L50,50" />
  </svg>  
Using percentage in svg tag, then the element inside it will be in percentage unit.