0

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

4

0 回答 0