Question

我尝试使用SVG重新创建iOS应用图标的外观，但是如果图标在白色背景上是白色的话，请使用大纲。

示例：

public AutoGetCurrency(CurrencyDbContext db) =>  this.db = new CurrencyDbContext();

（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蒙版创建带圆角的边框会产生较轻的角

1 个答案: