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