您现在的位置是:群英 > 开发技术 > web开发
SVG ClipPath是如何实现六边形图像的
Admin发表于 2022-06-23 17:06:19703 次浏览
这篇文章主要介绍了title,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望大家通过这篇文章可以有所收获。


使用SVG,我们可以添加剪切路径来更改图像的形状。

首先,我们打开一个带有namespaced href属性和命名空间定义的SVG标记:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">

然后我们创建一个clipPath并给它一个ID,它将作为参考应用于我们的图像。我们设计的clipPath将是我们图像的可见部分。在这种情况下,我们实现六边形(外部组元素<g>解决Safari上的错误)。

<g>
   <clipPath id="hexagonal-mask">
      <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
   </clipPath>
</g>

最后,我们将路径应用于我们的图像。这是一种很好的技术,因为如果我们将图像包裹在一个链接中,它将不具有通常的矩形形状,而是我们的一个clipPath(在这种情况下为六边形)。我们可以这样做:

<a xlink:href="http://www. web-expert.it">
    <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
</a>

这是最终的代码:

<svg class="svg-graphic" width="180" height="200" viewBox="0 0 560 645" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <g>
       <clipPath id="hexagonal-mask">
          <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
       </clipPath>
    </g> 
    <a xlink:href="http://www. web-expert.it">
     <image clip-path="url(#hexagonal-mask)" height="100%" width="100%" xlink:href="img.jpg" />
    </a>
</svg>



感谢各位的阅读,以上就是“SVG ClipPath是如何实现六边形图像的”的内容了,通过以上内容的阐述,相信大家对SVG ClipPath是如何实现六边形图像的已经有了进一步的了解,如果想要了解更多相关的内容,欢迎关注群英网络,群英网络将为大家推送更多相关知识点的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: ClipPath
相关信息推荐
2022-06-16 09:27:24 
摘要:在PHP中,可以利用“php.ini”文件内的“display_errors”来设置错误提示信息,当“display_errors”设置为“On”时,表示开启显示错误提示信息,当该项内容设置为“Off”时,表示关闭显示错误提示信息。
2022-09-26 18:00:11 
摘要:PHP7比PHP5性能提升了两倍,全面一致的64位支持,以前的许多致命错误,现在改成抛出异常,下面这篇文章主要给大家介绍了关于PHP5和PHP7中数组实现方式比较的相关资料,需要的朋友可以参考下
2022-07-14 17:48:53 
摘要:两种求次数的方法:1、使用substr_count()函数,可区分大小写的统计英文、中文字符在字符串中出现的次数,语法“substr_count(字符串,指定字符,开始搜索位置,搜索长度)”。2、使用mb_substr_count()函数,可区分大小写的统计英文字符或中文字符在字符串中出现的次数,语法“mb_substr_count(字符串,指定字符,字符编码)”。
云活动
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部