SVG.坐标转换_使用CSS

1、ZC：对于相同的属性设置，CSS的写法 和 SVG的写法 可能是不一样的 ! ! !

　　1.1、CSS3 transform 属性.html（http://www.w3school.com.cn/cssref/pr_transform.asp）（ZC：里面也有例子）

语法

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/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);"”(这里，最后的位置多一个分号)
    -->
    <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"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"?>

 

3、

 

4、

5、