IMG_2209.PNG

一、<text>

IMG_2218.PNG

英文字母 x, 正好在基准线上

IMG_2219.PNG

属性dx、dy 会向后传递

IMG_2220.PNG

IMG_2221.PNG

dx、dy 可以写成数组形式，对应第1、2、3...个字符的dx、dy的值

没有对应值的字符将不会移动位置(数组形式dx、dy值不会向后传递)

IMG_2223.PNG

IMG_2224.PNG

案例：正弦曲线飘动的字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正弦曲线飘动的字符</title>
    <style>
        html,body{
            width:100%;
            height: 100%;
            margin: 0;
            padding: 0;
            line-height: 0;
            font-size: 0;
        }

        #sintext{
            font-size: 14px;
            font-family: Arial;
        }
    </style>
</head>



<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <defs>
            <!--定义笔刷宽高-->
            <pattern id="grid" x="0" y="0" width="20" height="20"
                     patternUnits="userSpaceOnUse">
                <!-- 笔刷内容: ┐路径 -->
                <path stroke="#F0F0F0" fill="none" d="M0,0H20V20"></path>
            </pattern>
        </defs>
        <!--画满屏幕小方格-->
        <rect width="1600" height="1000" fill="url(#grid)"></rect>

        <!--红色坐标轴-->
        <path d="M100,0V200M0,160H200" stroke="red"/>
        <!--字母-->
        <text id="sintext" x="100" y="160">ABCDEFGHIJKLMNOPQRSTUVWXYZ</text>
    </svg>
</body>

<script>
    // 利用dx、dy属性, 让text呈正弦曲线状
    // y = s * sin(w * x + t)
    // x = [20, 20, 20......]

    var sintext = document.getElementById('sintext');

    var n = 26;
    var x = [];
    var y = null;
    var i = n;
    var s = 100; //振幅
    var w = 0.6; //角速度ω变大,则波形在X轴上收缩,波形变紧密; 角速度ω变小，则波形在X轴上延展,波形变稀疏。
    var t = 0;   //图像的左右移动

    while(i--) x.push(10);

    function arrange(t) {
        y = [];
        var ly = 0, cy;
        for(i=0; i<n; ++i){
            cy = s * Math.sin(w * i*x[i] + t);
            y.push(cy - ly);
            ly = cy;
        }
    }

    function render() {
        sintext.setAttribute('dx', x.join(' '));
        sintext.setAttribute('dy', y.join(' '));
    }

    function frame() {
        t += 0.01;
        arrange(t);
        render();
        requestAnimationFrame(frame);
    }
    frame();

</script>
</html>

效果：

QQ20170918-124518-HD.gif

二、<tspan>

IMG_2249.PNG

IMG_2250.PNG

案例：利用<tspan>，给正弦字母设置不同颜色

<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        ...
        <!--字母-->
        <text id="sintext" x="100" y="160"></text>
    </svg>
</body>

<script>
    var NS = 'http://www.w3.org/2000/svg';
    var sintext = document.getElementById('sintext');

    var text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var n = text.length;
    var i = n;
    ...

    while(i--) {
        x.push(10);

        //创建tspan标签
        var tspan = document.createElementNS(NS, 'tspan');
        tspan.textContent = text[n-i-1];
        sintext.appendChild(tspan);

        //为tspan标签,设置颜色
        var h = Math.round(360/n * i);
        tspan.setAttribute('fill', 'hsl('+h+', 100%, 80%)');
    }

    ...

</script>