Question

我试图在剪辑路径的帮助下为Mozilla创建多边形形状。但是我无法做到，下面是我的圆形代码如何将圆形更改为多边形。

<style>
img {clip-path: url(#clipping);}
</style>

<svg>
  <defs>
    <clipPath id="clipping">
    <circle cx="284" cy="213" r="213" />
    </clipPath>
  </defs>
</svg>

<img src="img/1.jpg" width="568">

{更新了我的问题} 现在我已经创建了一个多边形，但是Chrome不支持它...如何解决这个......下面是我在Mozilla上工作的多边形代码。

<style>
#img {clip-path: url(#clipping);
      -webkit-clip-path: url(#clipping);
      -webkit-shape-outside: url(#clipping);
       shape-outside: url(#clipping);
}
</style>

<svg>
  <defs>
    <clipPath id="clipping">
<!--      <circle cx="284" cy="213" r="213" />-->
    <path d="M188 0 L1 0 L1 188 L188 0 Z">
    </clipPath>
  </defs>
</svg>
<div id="img">
<img src="img/1.jpg" width="568">
</div>

Answer 1

嗨问题现在解决了。

<style>
#img {clip-path: url(#clipping);
      -webkit-clip-path: url(#clipping);
      -webkit-shape-outside: url(#clipping);
       shape-outside: url(#clipping);
}
</style>

<svg width="0" height="0">
  <defs>
   <clipPath id="clipping">
<!--      <circle cx="284" cy="213" r="213" />-->
    <path d="M188 0 L1 0 L1 188 L188 0 Z">
   </clipPath>
  </defs>
</svg>
<div id="img">
<img src="img/1.jpg" width="568">
</div>

感谢您的支持

Answer 2

您可以将圆圈更改为多边形，对于多边形，请使用path标记及其d属性。这是一个可以提供帮助的link。

带图像的SVG多边形形状

2 个答案: