基于图像的SVG多边形形状
基于图像的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>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-07-03 05:19:06
不能将圆圈更改为多边形，对于多边形，请使用path标记及其d属性。这里有一个可以帮助您的链接。
Stack Overflow用户
发布于 2014-07-03 06:25:58
嗨，问题已经解决了。
<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>谢谢你的支持
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24545437
复制相关文章
相似问题
腾讯云开发者
