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>
效果：
QQ20170918-131224-HD.gif
三、垂直居中问题
IMG_2259.PNG
text-anchor(文字水平方向固定点、锚点)： start、end、center（哪个点居于，水平方向的中点）
dominant-baseline(基线)： auto(基线在文字下面)、text-before-edge(基线在文字上面) ...
模拟垂直居中:
IMG_2265.PNG
IMG_2267.PNG
四、<textPath>
IMG_2268.PNG
IMG_2269.PNG
IMG_2270.PNG
IMG_2271.PNG
IMG_2300.PNG
IMG_2301.PNG
IMG_2302.PNG
IMG_2303.PNG
IMG_2304.PNG
text-anchor: start，调整x
IMG_2305.PNG
text-anchor: start，调整x
IMG_2306.PNG
text-anchor: middle，调整startOffset
IMG_2307.PNG
text-anchor: middle，调整startOffset
IMG_2309.PNG
text-anchor: end，调整startOffset
IMG_2310.PNG
text-anchor: end，调整startOffset
IMG_2311.PNG
dx、dy
IMG_2312.PNG
加了<tspan>标签
IMG_2313.PNG
IMG_2314.PNG
<tspan>的dy属性值会越过<tspan>标签一直向后传递
IMG_2315.PNG
IMG_2316.PNG
<tspan>的dx属性值，不会向后传递
IMG_2321.PNG
IMG_2322.PNG
脚本控制
IMG_2323.PNG
IMG_2327.PNG
IMG_2325.PNG
五、超链接
IMG_2335.PNG
IMG_2336.PNG
IMG_2337.PNG
IMG_2338.PNG
