我目前正在开发一个使用SVG图形的基于Web的应用程序。但是,我很震惊地发现MS Edge无法正确渲染图像。 Edge似乎忽略了属性shape-rendering
,该属性设置为crispEdges
以禁用抗锯齿。
下面的代码段在Chrome中可以正常使用,但是Edge决定使用抗锯齿功能对其进行渲染,因此中间线不是完美的红色。使用crispEdges
,两条中间线完全重叠。
对于为什么会这样,我在Google上找不到任何东西。有谁知道为什么会发生这种行为以及如何解决它?
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" shape-rendering="crispEdges" stroke-linecap="square" stroke-width="1">
<line x1="0.5" y1="71.5" x2="71.5" y2="0.5" stroke="rgb(0,0,255)"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5" stroke="rgb(0,0,255)"/>
<line x1="71.5" y1="0.5" x2="142.5" y2="71.5" stroke="rgb(255,0,0)"/>
<line x1="142.5" y1="71.5" x2="213.5" y2="0.5" stroke="rgb(255,0,0)"/>
</svg>