SVG.坐标转换_使⽤CSS
1、ZC：对于相同的属性设置，CSS的写法 和 SVG的写法 可能是不⼀样的 ! ! !
语法
transform: none|transform-functions;
值描述测试none定义不进⾏转换。
matrix(n,n,n,n,n,n)定义 2D 转换，使⽤六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使⽤ 16 个值的 4x4 矩阵。
translate(x,y)定义 2D 转换。
translate3d(x,y,z)定义 3D 转换。
translateX(x)定义转换，只是⽤ X 轴的值。
translateY(y)定义转换，只是⽤ Y 轴的值。
translateZ(z)定义 3D 转换，只是⽤ Z 轴的值。
scale(x,y)定义 2D 缩放转换。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)定义 2D 旋转，在参数中规定⾓度。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)为 3D 转换元素定义透视视图。测试2、测试代码（SVG⽂件，保存成UTF-8编码格式）
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="-500 -200 1000 800" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" xmlns:cge="iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="holleygrid/svg">
<style type="text/css">
<![CDATA[
<!--
/* ZC: 下⾯这个样式，需要按照 CSS3的风格来写，
不能写成SVG的风格，如写成“{transform: rotate(45deg 100px 100px);}”或“{transform: rotate(45d 100 100);}” 是不⾏的
*/
.rotate01
{
transform: rotate(45deg);
transform-origin: 100px 100px;
}
/** translate **/
.rotate02
{
transform: translate(100px, 100px) rotate(45deg) translate(-100px, -100px); /* ZC：这⾥也同样是从后往前渲染的 */
}
-->
]]>
</style>
<defs/>
<!--X轴--><line x1="-500" y1="0" x2="500" y2="0" stroke="red" stroke-width="1px" fill="none"/>
<!--Y轴--><line x1="0" y1="-200" x2="0" y2="600" stroke="red" stroke-width="1px" fill="none"/>
<rect x="100" y="100" width="200" height="100" fill="black" class="rotate01"/>
<!--
ZC: 写成“transform="rotate(45 100 100)"”或者“transform="rotate(45, 100 100)"”都可以，
但是不能写成“transform="rotate(45 100 100);"”(这⾥，最后的位置多⼀个分号)
-->ae能做svg动画吗
<rect x="100" y="100" width="200" height="100" fill="blue" transform="rotate(90 100 100)"/>
<rect x="100" y="100" width="200" height="100" fill="yellow" transform="rotate(135, 100 100)"/>
</svg>
<?DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "/Graphics/SVG/1.1/DTD/svg11.dtd"?>
3、
4、
5、

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。