带有“反向填充”的 SVG 椭圆是不是可能？

Posted 2023-03-28

【中文标题】带有“反向填充”的 SVG 椭圆是不是可能？

【英文标题】：Is SVG ellipse with "reverse fill" possible?带有“反向填充”的 SVG 椭圆是否可能？

【发布时间】：2021-10-25 04:43:22

【问题描述】：

<svg viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg">
  <image x="0" y="0"  width ="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/IKB_191.jpg/1200px-IKB_191.jpg" />
  <ellipse cx="50" cy="100" rx="50" ry="62" fill="grey" />
</svg>

在上面的示例中，我们希望能够看到椭圆内部的图像（蓝色框），并且椭圆的灰色仅显示在角落/外部。你可以把它想象成一个人的肖像（图像），有一个边框（椭圆的倒数）。

我们有一个带有图像和椭圆的 SVG。 SVG 图像没有很多属性（没有边框半径），因此我们考虑使用“反向填充”椭圆，其中填充颜色位于椭圆的 外部 而不是内部.不幸的是，这在我们的示例中没有发生。 svg:ellipse 可以吗？还是有其他方法？我们需要 SVG 中的图像，我们的目标是在图像前面创建具有某种填充颜色的弯曲“边框”（认为边框半径为 50%）。

编辑：我可以创建一个 svg:path，或者可以在图像上放置某种剪辑？

Edit2：这条路径很近，但不完全在那里，因为路径创建的椭圆内不应该有任何蓝色......

<svg >
  <path 
    stroke="black" fill="blue" stroke- fill-opacity="0.5"
    d="
       M0 80
       a40 80 0 0 0 80 0 
       a40 80 1 0 0 -80 0
       l0 80 
       l80 0 
       l0 -160
       l-80 0
     " 
  />
</svg>

【参考方案1】：

有几种方法可以达到预期的结果。这是一对

带着面具

<svg viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="ellipse-mask">
      <ellipse cx="50" cy="100" rx="50" ry="62" fill="white" />
    </mask>
  </defs>
  <rect x="0" y="38"   fill="gray"/>
  <image x="0" y="0"  width ="100"
         xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/IKB_191.jpg/1200px-IKB_191.jpg"
         mask="url(#ellipse-mask)"/>
</svg>

带有路径或剪切路径

你的路很近。但是您需要用 Z 或 z) 关闭每个子路径，以便它们被单独填充。

<svg >
  <path 
    stroke="black" fill="blue" stroke- fill-opacity="0.5"
    d="
       M0 80
       a40 80 0 0 0 80 0 
       a40 80 1 0 0 -80 0
       Z
       M0 0 
       l80 0 
       l0 160
       l-80 0
       Z
     " 
  />
</svg>