SVG裁剪和平移的顺序
2024-08-27 01:12:13
SVG 里为元素添加 clip-path 属性即可做出裁剪效果,添加 transfrom 属性可以平移、旋转元素。
根据需求不同,有两种情况:
- 先裁剪元素,再把裁剪后的图形平移
- 先平移元素,再按区域裁剪图形
先裁剪再平移
在实际元素的位置添加clip-path属性,则是先裁剪。
<defs>
<clipPath id="myclip" clip-rule="evenodd">
<rect x="0" y="0" width="200" height="200"/>
</clipPath>
</defs>
<rect clip-path="url(#myclip)" x="100" y="100" width="300" height="300" fill="#994C00" stroke="yellow" stroke-width="10">
<animateTransform
attributeName="transform" type="rotate"
begin="0s" dur="8s" fill="freeze"
from="0,100,100" to="360,100,100"
repeatCount="indefinite" calcMode="spline" keySplines="1 0 0 1"/>
</rect>
结果图如下:
先平移再裁剪
在实际绘制的元素外套一层g,给g加上clip-path。
<g clip-path="url(#myclip2)">
<rect x="100" y="100" width="300" height="300" fill="#994C00" stroke="yellow" stroke-width="10">
<animateTransform attributeName="transform" type="rotate" begin="0s" dur="8s" fill="freeze" from="0,100,100" to="360,100,100" repeatCount="indefinite" calcMode="spline" keySplines="1 0 0 1"/>
</rect>
</g>
结果图如下:
最新文章
- 【原】小玩node+express爬虫-2
- Node.js的特点
- mysql 范式和反范式
- Web程序员开发App系列 - 认识HBuilder
- sql语句查询出数据重复,取唯一数据
- 关于Windows下mysql忘记root密码的解决方法
- intellij 出现“Usage of API documented as @since 1.6+”的解决办法
- Linux系列教程(五)——Linux链接命令和权限管理命令
- 利用jquery encoder解决XSS脚本注入所产生的问题
- 25.django Model
- 多台linux主机之间建立免密通信
- http/2.0时代已经来临了!
- mui预加载
- var let const的区别
- RuntimeError: cryptography requires setuptools 18.5 or newer, please upgrade to a newer version of setuptool
- 《从零玩转python+人工智能-3》120,122节课深度优先疑问解答
- Linux编程 2 (遍历目录cd与查看文件和目录ls)
- mysql数据库报错:InnoDB: Operating system error number 13 in a file operation
- codeforce 139E
- js调试系列: 初识控制台