SVG 学习<二>进阶

SVG分组——g标签

g标签在svg标签内使用，功能用来对图形，文字，线段进行分组。

HTML代码

    <svg class="svg">
        <g class="g_1">
            <rect x="20" y="20"/><rect x="240" y="20" />
        </g>
        <g class="g_2">
            <circle cx="100" cy="200" /><circle cx="220" cy="200" />
        </g>
    </svg>

CSS代码

.g_1{
    stroke:rgb(0,0,0);
    stroke-width:2px;
    fill:rgb(0,255,255);
}
rect{ width:200px; height:100px; }
.g_2{
    stroke:rgb(220,17,20);
    stroke-width:2px;
    fill:rgb(255,255,255);
}
circle{ r:50px; }

g标签可以对一组图形，文字或线段的笔触色，填充色，笔触宽度进行统一定义

文本

HTML代码

    <svg class="svg">
        <text x="20" y="60" class="text">SVG文本</text>
    </svg>

CSS代码

.text{
    fill:rgb(221,20,17);
    font-size: 30px;
    font-weight: 900;
}

注意：

svg文本的 x y 位置不能在css中设置必须在标签中作为属性设置，且svg文本的默认x = 0 ， y = 0。重点是y = 0也就是说没设置y 文字基本看不到。

普通文本的css样式同样对svg文本有效，例如 font-size  font-weight... ...

文本旋转

HTML代码

        <svg class="svg">
        <text x="20" y="60" transform="rotate(30 20 40)" class="text">SVG文本</text>
    </svg>

transform同样不能在css中设置，仅为标签属性。

旋转 rotate参数 ： 旋转角度  X轴位置  Y轴位置。

缩放 scale参数：缩放倍数 0~n。

SVG曲线文本

HTML代码

    <svg class="svg">
        <defs>
            <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
        </defs>
        <text style="fill:red;">
            <textPath xlink:href="#path1">SVG曲线文本,SVG曲线文本</textPath>
        </text>
    </svg>

textPath可以把文本和path关联起来，dafs下的path定义文本曲线的路径规则。（path稍后介绍）

未完待续... ...