css - 如何使用 SVG 形状进行图像剪辑?
问题描述
任何人都可以指导我如何使用 SVG 独特的形状制作 CSS 图像剪辑路径?有些人建议使用 SVG Injector 等第三方插件。任何人都可以帮助我如何完成这项适用于所有浏览器的任务?
我已经给出了一个示例图像以使其更好地理解。请检查下图。
http://ktdev.khaleejtimes.ae/shape.jpg
感谢和赞赏。
解决方案
首先,您需要绘制具有所需形状的路径。接下来,您使用形状来剪辑图像<clipPath>
svg{border:1px solid}
<svg viewBox="0 0 643 525">
<defs>
<clipPath id="shape">
<path fill="none" d="M109,120c0,0,163,46,220,9s34-97,34-97s39.138-16.341,70-11c26.406,4.57,66.618,73.939,105,138
c37.199,62.089,73,119,73,119s10.398,18.504,0,44c-8.608,21.105-22.685,41.421-88.85,85.03C468.32,442.51,411,474,411,474
s-85,45-192,9l-5,1c0,0-34.254,15.226-60.675,10.088c-36-7-48.249-32.676-48.249-32.676S172,402,160,327S60,220,60,220
s-8.444-34,0-52C77.666,130.345,109,120,109,120z"/>
</clipPath>
</defs>
<image width="643" height="643" clip-path="url(#shape)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" >
</image>
</svg>
推荐阅读
- javascript - 现有 jQuery 对象的 jQuery 多个选择器
- jquery - 在联系表格 7 中创建多组选择下拉菜单
- angularjs - PDF 内容显示问题
- python - Numpy Matrix If/Else 分类?
- windows - SCCM 客户端:通过命令行安装 SoftwareCenter 可用的软件包
- python - 将python中的列表保存为分号分隔的文本文件
- javascript - 对象方法中的局部变量音频未播放
- java - 带有 where 子句的计数的 jpa 条件子查询
- java - 为 json 字符串创建 JSON 对象 Pojo
- drupal - 制作页面的 Drupal 问题