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

如果我在clipPath中使用<path>，clipPath不起作用，但它对<circle>有效

1 个答案: