使用 SVG 蒙版创建带圆角的边框会导致更亮的角

Question

我正在尝试使用 SVG 重新创建 iOS 应用程序图标的外观，但带有轮廓以防图标在白色背景上为白色。

示例：

<svg width="76" height="76">
  <defs>
    <mask id="myMask">
      <rect fill="#fff" rx="15" ry="15" width="76" height="76"/>
    </mask>
  </defs>
  <rect id="border" mask="url(#myMask)" fill="#000" x="0" y="0" width="76" height="76" />
  <rect id="image" mask="url(#myMask)" fill="#fff" x="1" y="1" width="74" height="74" />
</svg>

(https://jsfiddle.net/d4ngtuqa/1/)

为此，我在缩小了 2x2 像素的图像后面渲染了一个填充矩形（或者在我的简化示例中是另一个矩形），然后将 SVG 蒙版应用于两个图层。

但是，当我这样做时，边框的圆角比边框的其余部分更亮。这是渲染错误还是什么？是否有替代方法可以避免这种情况？

Answer 1

您不需要同时屏蔽图像和边框。只需遮住图像，然后在其顶部绘制一个 1px 的黑色边框。

<svg width="76" height="76">
  <defs>
    <mask id="myMask">
      <rect fill="#fff" rx="15" ry="15" width="76" height="76"/>
    </mask>
  </defs>
  <rect id="image" mask="url(#myMask)" fill="#fff" x="0" y="0" width="76" height="76" />
  <rect id="border" fill="none" stroke="#000" stroke-width="1" x="0.5" y="0.5" width="75" height="75" rx="15" ry="15" />
</svg>

注意，为了让1px的边框尽可能整齐干净，我们使用了对齐半像素（0.5和75.5）的矩形坐标，这样线条就干净利落地落在了一条直线内像素。

使用 SVG 蒙版创建带圆角的边框会导致更亮的角

Creating a border with rounded corners using SVG masks results in lighter corners

svg

border

mask

masking