2019-07-19 svg文本
2019-07-19 本文已影响0人
DOGirl
image.png
从评论中学到的，在自己的项目中也可以这么使用
image.png
image.png
image.png
明天应该将前三章复习下，还是用电脑学习效率高些，用手机看的基本都忘了，用电脑可以实际操作，同时通过简书将重要知识点还可以记录下，相当于笔记，再次看笔记比看视频会节省更多的时间。
image.png
image.png
dx,dy可以理解为数组，里面的位置就几个，就对应text或tspan中有多少标签
<text x="100" y="100" style="font-size:50px;font-family: Arial" dy="20,20,20,20,20">
<tspan fill="red">AB</tspan>
<tspan stroke="green" stroke-width="2" fill="none">EF</tspan>
</text>
x,y对应整个文本开始的坐标位置，dy和dx就是对应文本中每个字符的开始位置。
关于svg中的pattern和gradient这篇文章写得不错https://segmentfault.com/a/1190000009278935
image.png
Document.createElementNS()
创建一个具有指定的命名空间URI和限定名称的元素。
要创建一个元素而不指定命名空间URI，请使用 createElement 方法。
while(i--) {
x.push(10);
var tspan = document.createElementNS(NS,'tspan');
tspan.textContent = text[n - i -1];
sintext.appendChild(tspan);
var h=Math.round(360/26*i);
// h使用360/数字表示
// 注意这里要用百分比，这个hsl应该是定义颜色的
tspan.setAttribute('fill','hsl('+h+',100%,80%)');
}
可以实现一个彩虹桥，图片晚上补上。
image.png
