html - 如果我在 clipPath 中使用 则 clipPath 不起作用，但它适用于

Question

我正在尝试使用 svg 创建一个 clipPath 图像。我正在尝试使用 SVG 的 native clipPath 方法来完成它。

My problem is that if I use a path inside the image won't be show. But if I use a circle instead of path, It displays wihtout any problem.

我的代码在这里，

<svg width="660" height="495" style="background: #333">
  <defs>
    <clipPath id="ellipsePath">
      <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
        C1.034,0.478,1.092,0.198,0.785,0.075z"></path>
    </clipPath>
  </defs>
  <image width="660" height="495" y="-100" xlink:href="https://placeimg.com/640/480/any" clip-path="url(#ellipsePath)"/>
</svg>

Here is the fiddle

有人可以帮我解决这个问题吗？

Answer 1

谢谢大家的支持，将 clipPathUnits="objectBoundingBox" 添加到 clipPath 解决了我的问题。

<svg width="256" height="248" style="background: #333">
<defs>
    <clipPath id="ellipsePath" clipPathUnits="objectBoundingBox">
        <path d="M0.785,0.075C0.52-0.031,0.337-0.022,0.141,0.185s-0.187,0.534,0.02,0.73s0.48-0.023,0.676-0.23
                    C1.034,0.478,1.092,0.198,0.785,0.075z"></path>

    </clipPath>
</defs>
<image width="100%" height="100%"  xlink:href="https://placeimg.com/256/248/any" clip-path="url(#ellipsePath)"/>

Here is the updated fiddle