如果我使用，clipPath无法正常工作 在clipPath中，但它适用于

Question

我正在尝试使用svg创建一个clipPath图像。我正在尝试使用SVG的原生clipPath方法。

我的问题是，如果我使用图像里面的路径将不会显示。但是，如果我使用圆而不是路径，它显示没有任何问题。

我的代码在这里，

<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