只有三个路径的简单 SVG 在 chrome 中未正确绘制答案

【问题标题】：Simple SVG with only three paths not drawn correctly in chrome只有三个路径的简单 SVG 在 chrome 中未正确绘制
【发布时间】：2019-09-07 00:42:01
【问题描述】：

我有以下绘制三条对角线的简单 SVG 文件：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; fill-rule:evenodd; "
viewBox="0 0 6989 5119"
 xmlns:xlink="http://www.w3.org/1999/xlink">

   <path fill="#000000" d="M4409 930c63,37 125,74 187,112 -1,1 -2,3 -3,4 -62,-37 -124,-74 -187,-111 1,-2 2,-3 3,-5z"/>
   <path fill="#000000" d="M4426 906c62,37 124,74 186,111 -1,2 -2,4 -3,5 -62,-37 -124,-74 -186,-111 1,-2 2,-4 3,-5z"/>
   <path fill="#000000" d="M4442 881c62,38 124,75 186,112 -1,2 -2,3 -3,5 -62,-37 -124,-74 -186,-112 1,-1 2,-3 3,-5z"/>   
</svg>

为了在 HTML 文件中显示 SVG，我添加了以下 html 标签：

<object height="1080px" type="image/svg+xml" data="test.svg"></object>

在 Firefox 中一切正常，见下图。

在 Chrome 中，中间的行有问题（见下图）。

为什么这在 Chrome 和 Firefox 中有所不同？如何让 Chrome 正确画线？

【问题讨论】：

为什么需要 4 个贝塞尔曲线来画线？

标签： html google-chrome svg

【解决方案1】：

如果把中间线改成

<path fill="#000000" d="M4426 906c62,37 124,74 186,111 -1,2 -2,4 -3,5 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>

它在两种浏览器中都能正常工作。

【讨论】：

谢谢，但我看不出你提供的路径有什么不同，是我遗漏了什么吗？
@Thomas 很抱歉，我没有更改代码。最后必须是 -3 而不是 -4。

【解决方案2】：

这对你有用吗？

<svg  viewBox="0 0 6989 5119">
   <path fill="#000000" d="M 0 0 L 3000 3000" stroke="black" stroke-width="5"/>
   <path fill="#000000" d="M 0 50 L 3000 3050" stroke="black" stroke-width="5"/>
   <path fill="#000000" d="M 0 100 L 3000 3100" stroke="black" stroke-width="5"/>
</svg>

【讨论】：

【解决方案3】：

您使用曲线渲染的旋转矩形形状略有不同。使每个形状都相同并不能解决我在 Chrome 上的问题...

<svg viewBox="0 0 6989 5119">
  <path d="M4409 930c62,37 124,74 186,112 -1,2 -2,3 -3,4 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>
  <path d="M4426 906c62,37 124,74 186,112 -1,2 -2,3 -3,4 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>
  <path d="M4442 881c62,37 124,74 186,112 -1,2 -2,3 -3,4 -62,-37 -124,-74 -186,-111 1,-2 2,-3 3,-5z"/>   
</svg>

但正如其他人已经提到的，这可以通过使用直线段来创建旋转矩形来完成。这确实为我解决了它...

<svg viewBox="0 0 6989 5119">
  <path d="M4409 930 l 187,111 -3,4 -187,-111 z"/>
  <path d="M4426 906 l 187,111 -3,4 -187,-111 z"/>
  <path d="M4442 881 l 187,111 -3,4 -187,-111 z"/>   
</svg>

但我们可以通过用线条替换矩形来做得更好（注意没有用z 结束的线）......虽然这可能不符合您的要求

<svg viewBox="0 0 6989 5119" fill="none" stroke="black" stroke-width="5">
  <path d="M4409 930 l -187,-111"/>
  <path d="M4426 906 l -187,-111"/>
  <path d="M4442 881 l -187,-111"/>   
</svg>

注意...超出了您的问题范围，但您还使用了巨大的画布...数千像素正确吗？

【讨论】：