SVG裁剪和平移的顺序
来源:互联网 发布:贵金属投资分析软件 编辑:程序博客网 时间:2024/06/05 00:40
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>
结果图如下:
0 0
- SVG裁剪和平移的顺序
- SVG之旅:SVG的图层和渲染顺序
- 如何使用 SVG 进行缩放和平移
- SVG的渲染顺序
- html5 svg 第九章 裁剪和屏蔽 Clipping and Masking
- 在SVG View下整图平移
- 图像的平移和缩放
- 什么是SVG和SVG常用的形状
- 什么是SVG和SVG常用的形状
- 什么是SVG和SVG常用的形状
- 获取svg和svg内容的方法
- OpenGL中矩阵的平移与旋转的顺序问题
- 为什么坐标变换的顺序必须是: 缩放->旋转->平移
- 为什么坐标变换的顺序必须是缩放----旋转---平移
- d3.js 实现svg 缩放 平移 旋转
- svg平移、放大、缩小及js操作svg
- svg平移、放大、缩小及js操作svg
- SVG和Canval的比较
- Java并发编程:Thread类的使用
- Linux下软件常用的安装方法
- 和提高多少较劲么
- [uboot] (番外篇)uboot relocation介绍
- 深入MTK平台bootloader启动之【 lk -> kernel】分析笔记
- SVG裁剪和平移的顺序
- python2
- swiper.animate
- 网络编程——socket套接字的使用(一)
- 推免后的生活(16/11/4~27)
- android graphic(6)—surfaceflinger和MessageQueue
- 【设计模式】《Head First 设计模式》读书笔记——装饰者模式
- 10张图带你深入理解Docker容器和镜像
- cqround_7 游记