[英]SVG Polygon Shape with Image
I am trying to make polygon shape for Mozilla with the help of clip path. 我试图借助剪辑路径为Mozilla制作多边形。 but I am not able to make it, Below are my code for the circle shape how to change the circle into polygon. 但我无法做到,下面是我的圆形形状代码,如何将圆形更改为多边形。
<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">
{Updated my Question} Now I have created a polygon but Chrome is not supporting it... how to resolve that... below are my code for polygon it's working on Mozilla. {更新了我的问题}现在,我创建了一个多边形,但是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>
Hi The Problem is resolve now. 您好问题已解决。
<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>
Thank you for the support 谢谢你的支持
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.