五、SVG文本

IMG_2209.PNG

一、

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

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

效果：

QQ20170918-124518-HD.gif

二、

IMG_2249.PNG

IMG_2250.PNG

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

效果：

QQ20170918-131224-HD.gif

三、垂直居中问题

IMG_2259.PNG

text-anchor(文字水平方向固定点、锚点)： start、end、center（哪个点居于，水平方向的中点）
dominant-baseline(基线)： auto(基线在文字下面)、text-before-edge(基线在文字上面) ...

模拟垂直居中:

IMG_2265.PNG

IMG_2267.PNG

四、

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

加了标签

IMG_2313.PNG

IMG_2314.PNG

的dy属性值会越过标签一直向后传递

IMG_2315.PNG

IMG_2316.PNG

的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