带有图像的 SVG 多边形形状答案

【问题标题】：SVG Polygon Shape with Image带有图像的 SVG 多边形形状
【发布时间】：2014-07-03 05:15:54
【问题描述】：

我正在尝试借助剪辑路径为 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>

【问题讨论】：

标签： javascript css svg polygon

【解决方案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>

感谢您的支持

【讨论】：

【解决方案2】：

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

【讨论】：

我更新了我的问题，在你的帮助下我设计了一个三角形多边形。