边缘不考虑SVG上的形状渲染属性

时间:2018-11-18 23:54:41

标签: svg microsoft-edge shape-rendering

我目前正在开发一个使用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>

0 个答案:

没有答案