title: SVG straight path with clip-path not visible in Chrome
body: <p>I believe that I've found a bug in Chrome's SVG rendering however I'd like to know if there are any workarounds.</p>
  
  <p>With code like this:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;svg&gt;
        &lt;path clip-path="url(#clip)" d="M 0,100 H 1000 V 100" style="stroke: #000; stroke-width: 2px"&gt;&lt;/path&gt;
        &lt;defs&gt;
          &lt;clipPath id="clip"&gt;
            &lt;rect width="400" height="400"&gt;&lt;/rect&gt;
          &lt;/clipPath&gt;
        &lt;/defs&gt;
      &lt;/svg&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://rawgithub.com/mnorrish/7249967/raw/21b76b680cde35e25c98dbc57086773ea72fa02c/SVGclipPathTest.html" rel="nofollow">View in browser</a></p>
  
  <p>There should be a 1000px long horizontal line (<code>path</code>) clipped by a 400px × 400px <code>rect</code>.</p>
  
  <p>The line is visible and correctly clipped in Firefox and Internet Explorer (10) but it is completely invisible in Chrome.
  There problem only exists if the <code>path</code> is completely horizontal or vertical as shown in <a href="https://rawgithub.com/mnorrish/7249967/raw/e00194669cd68cd2839d52c89c0caa4114d299c1/SVGclipPathTest.html" rel="nofollow">this example</a>.</p>
  
  <p>It is a requirement that the <code>d</code> attribute of the <code>path</code> is an equivelent which D3.js can generate.</p>