<marker>：Firefox中的SVG“矢量-效果:非缩放-笔画”

Question

考虑下面的片段，它包含两个版本的SVG，其中有一个由<marker>定义的箭头。行和路径是用vector-effect: non-scaling-stroke设计的。第二个版本只是第一个版本，所有坐标除以10 (标记id更改为其他东西)。

JSFiddle：https://jsfiddle.net/nkevo5ja

在Windows 10上：

• Firefox 78.0.2 (64位)：箭头与相同的大小。
• Chrome 84.0.4147.89 (64位)：箭头是不同的大小. 如果删除vector-effect: non-scaling-stroke，箭头就会变成相同的大小(但这会破坏线宽)。

谁的实施是不正确的？

​

​

​

<!-- Styles -->
<svg width="0" height="0">
  <style>
    line, path {
      stroke: black;
      vector-effect: non-scaling-stroke;
    }
  </style>
</svg>

<!-- Larger version -->
<svg width="120px" height="100%" viewBox="0 0 400 300">
  <defs>
    <marker id="larger"
      viewBox="0 -20 70 40"
      refX="70" refY="0"
      markerWidth="70" markerHeight="40"
      orient="auto"
    >
      <path d="M 70 0 L 0 -20 L 0 20 z"/>
    </marker>
  </defs>
  <line x1="400" y1="300" x2="0" y2="0" marker-end="url(#larger)"/>
</svg>

<!-- Smaller version (larger version with all coordinates divided by 10) -->
<svg width="120px" height="100%" viewBox="0 0 40 30">
  <defs>
    <marker id="smaller"
      viewBox="0 -2 7 4"
      refX="7" refY="0"
      markerWidth="7" markerHeight="4"
      orient="auto"
    >
      <path d="M 7 0 L 0 -2 L 0 2 z"/>
    </marker>
  </defs>
  <line x1="40" y1="30" x2="0" y2="0" marker-end="url(#smaller)"/>
</svg>

​

铬问题：https://crbug.com/1107791

Answer 1

Firefox是错误的，我刚刚修复了它，它现在具有与Chrome相同的渲染功能。

这里有两个效果，一个是标记内路径上的非缩放笔画，另一个是标记正在使用的markerWidth上的非缩放笔画。该markerWidth是基于标记线的笔画宽度，而该笔画也是不缩放的.

火狐和Chrome确实将非缩放笔画转换应用于标记线，但只有Chrome也修正了strokeWidth。火狐恶梦将从明天起正确处理strokeWidth。Firefox 83将是第一个包含修补程序的版本。