在 IE9 中渲染边缘清晰的 SVG 形状答案

【问题标题】：Rendering SVG shapes with crisp edges in IE9在 IE9 中渲染边缘清晰的 SVG 形状
【发布时间】：2011-11-09 02:40:48
【问题描述】：

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 中的抗锯齿功能？

谢谢！

【问题讨论】：

标签： svg internet-explorer-9 antialiasing

【解决方案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>

【讨论】：

我还发现，当我将 all moveTo 命令移动 0.5 像素时，路径边缘清晰。 <path style="fill:none; stroke:#000;" d="M100.5,100.5l100,0,0,100,-100,0z">.
@basecode：在这种情况下，调整 viewBox 可能更容易，例如 viewBox="-0.5 -0.5 601 801" 并保持原来的路径。
谢谢，埃里克。为什么这不是默认值？我的意思是这解决了我所有的问题。疯了:)
Erik，不是我所有的问题 :) 当我将调整到 svg-sn-p 时，我可以看到回归：jsbin.com/aritem/edit。这是一条笔画宽度为“10”的路径。但是当我将笔画宽度更改为“10.5”时，边缘再次清晰。偶数应该移动，奇数应该保持不变。这是亚像素问题吗？这不就是UA应该为我们解决的吗？
Erik，我忽略了您还更改了 viewBox 的大小。我更新了我的示例并尝试并排给出一些示例。 jsbin.com/aritem/4/edit