SVG ellipse元素是否支持反向填充？如何实现椭圆外区域填充效果

API 探路者

2026-10-7

<ellipse>本身没有直接的反向填充属性，无法仅填充椭圆外侧区域，但是可以通过以下两种成熟方案实现需求，均保留原有<image>元素：

方案1：反向填充遮罩（椭圆外显示指定填充色，椭圆内部透出原图）

核心是用path绘制外框+内部椭圆的组合路径，配合fill-rule="evenodd"规则，让重叠的椭圆区域不被填充，刚好符合你要的「灰色仅在椭圆外侧边角显示」的需求。
你之前写的path不符合预期就是缺少了fill-rule属性设置，调整后的完整代码如下：

<svg viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg">
  <image x="0" y="0" height="200" width ="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/IKB_191.jpg/1200px-IKB_191.jpg" />
  <!-- 反向填充的灰色遮罩 -->
  <path fill="grey" fill-rule="evenodd"
    d="
    M 0 0 H 600 V 1200 H 0 V 0  <!-- 绘制整个SVG画布的外框矩形 -->
    M 50 100 a 50 62 0 1 0 100 0 a 50 62 0 1 0 -100 0  <!-- 绘制内部椭圆路径 -->
  "/>
  <!-- 可选：额外加椭圆外边框 -->
  <ellipse cx="50" cy="100" rx="50" ry="62" stroke="black" stroke-width="2" fill="none" />
</svg>

方案2：裁剪图片+椭圆边框（仅显示椭圆范围内的图片，外围加边框）

如果不需要椭圆外侧的填充色，只是要图片实现类border-radius:50%的椭圆显示效果加边框，可以用clipPath对图片做裁剪，代码更简洁：

<svg viewBox="0 0 600 1200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="ellipseClip">
      <ellipse cx="50" cy="100" rx="50" ry="62" />
    </clipPath>
  </defs>
  <!-- 图片应用椭圆裁剪 -->
  <image x="0" y="0" height="200" width ="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/IKB_191.jpg/1200px-IKB_191.jpg" clip-path="url(#ellipseClip)" />
  <!-- 椭圆外边框 -->
  <ellipse cx="50" cy="100" rx="50" ry="62" stroke="black" stroke-width="2" fill="none" />
</svg>