在IE9中渲染具有清晰边缘的SVG形状

Question

IE9似乎不尊重SVG shape-rendering="crispEdges"属性.

这是一个示例SVG:

<?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>

它在Firefox和Safari下正确显示,但在IE9和IE10(平台预览)下显示模糊

是否有一些解决方法来禁用IE9中的抗锯齿？

谢谢!

Answer 1

您应该能够垂直移动0.5"像素"的线而不是使用形状渲染.这样,至少在所有非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>