为啥这个 SVG 在 Chrome 和 Firefox 中都缺少一半的轮廓？

Posted 2023-03-28

【中文标题】为啥这个 SVG 在 Chrome 和 Firefox 中都缺少一半的轮廓？

【英文标题】：Why this SVG has half of its outline missing in both Chrome and Firefox?为什么这个 SVG 在 Chrome 和 Firefox 中都缺少一半的轮廓？

【发布时间】：2021-08-29 12:49:50

【问题描述】：

这是一个在 Inkscape 中具有完整轮廓（黑色边框）的 SVG，但在 Chrome 和 Firefox 中却不是这样：

<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;">
   <defs>
   <path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path>
   <mask id="mask/main0" maskUnits="userSpaceOnUse">
       <use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke- stroke-linecap="round" stroke-linejoin="round"></use>
       <use xlink:href="#main0" fill="#000000" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round"></use>
   </mask>
   </defs>
   <use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke- stroke-linecap="round" stroke-linejoin="round"></use>
   <use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use>
</svg>

效果图如下：

增加视图框的宽度会恢复完整的轮廓。减小该宽度会使轮廓完全消失。为什么会这样？是否可以纠正，以便始终有一个完整的轮廓？通过更正，我并不是指直接定义圆角路径，而是将绘图方法保持原样，即具有开头的多边形。我需要它来实现流畅的浏览器内动画。绘制一个不透明的黑色填充多边形，然后用另一个较小的多边形填充它也不起作用，因为我需要一个半透明的填充但不透明的边框。因此使用了面具。

【参考方案1】：

面具根本不足以覆盖形状。您没有为其设置任何高度/宽度，因此您将获得 120% 的默认值。在这种情况下，宽度不够。

增加 viewBox 宽度可以纠正问题，因为遮罩宽度是该 viewBox 宽度的百分比，因此您间接增加了遮罩宽度。

<svg   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;">
   <defs>
   <path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path>
   <mask id="mask/main0" maskUnits="userSpaceOnUse" >
       <use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke- stroke-linecap="round" stroke-linejoin="round"></use>
       <use xlink:href="#main0" fill="#000000" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round"></use>
   </mask>
   </defs>
   <use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke- stroke-linecap="round" stroke-linejoin="round"></use>
   <use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke- stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use>
</svg>

【讨论】：

有没有计算最小掩码的方法？在此图像的情况下，鉴于视口为 (7.5, 10)，我无法解释的最小蒙版似乎约为 (11, 10)。我减少了视图框以提高性能，这里的渲染速度很关键。由于不必要的大蒙版，我不希望渲染速度变慢。

蒙版是否始终以视图框为中心，与两者的大小无关？我在这里找不到任何相关信息：developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

一个更好的（单独的）问题是您为什么要尝试以这种复杂的方式执行此操作。你没有详细解释动画。也许你可以完全不戴面具。

遮罩的位置取决于它的位置（x、y、宽度、高度）或默认值（如果您未指定它们）。您链接到的 MDN 文章中描述了这些属性及其默认值。

因此在这种情况下，最佳蒙版将只是适合视口的蒙版：x="7" y="4.5" 。谢谢！