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);
//創(chuàng)建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
