Clear-Edge SVG Rendering in IE9

Question

IE9 does not seem to respect the SVG attribute shape-rendering="crispEdges".

Here is an SVG sample:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg" height="600" id="svgroot" version="1.1" width="800" x="0" y="0">
<line style="stroke:#000000;stroke-width:1px;stroke-opacity:1" y2="300" y1="300" x2="750" x1="50" shape-rendering="crispEdges" />
</svg>

It displays correctly in Firefox and Safari, however the line looks blurry under IE9 and IE10 (platform preview)

Is there any workaround to disable anti-aliasing in IE9?

Thank!

Answer 1

You can simply shift the line 0.5 "pixels" vertically, instead of using the rendering of the shape. Thus, the string will look in all browsers without IE.

<svg xmlns="http://www.w3.org/2000/svg" height="600" width="800">
  <line style="stroke:#000" y2="300.5" y1="300.5" x2="750" x1="50" />
</svg>