在IE9中渲染具有清晰边缘的SVG形状 [英] Rendering SVG shapes with crisp edges in IE9

问题描述

IE9似乎不支持SVG shape-rendering="crispEdges"属性.

IE9 appears not to honour the SVG shape-rendering="crispEdges" attribute.

这是示例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(平台预览)下该行显示为模糊的

It appears correctly under Firefox and Safari, however the line appears blured under IE9 and IE10 (Platform preview)

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

Is there some workaround to disable the anti-aliasing in IE9?

谢谢！

推荐答案

您应该能够只将行垂直移动0.5个像素"，而不是使用形状渲染.这样一来，至少在所有非IE浏览器中，该行看起来都会很清晰.

You should be able to just shift the line 0.5 "pixels" vertically instead of using shape-rendering. That way the line will look sharp in all non-IE browsers at least.

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

这篇关于在IE9中渲染具有清晰边缘的SVG形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！