这节课是我听过最迷糊的老师语速快手速快还没有源代码下载想想也是醉了-慕课网

首页课程实战体系课手记专栏慕课教程

这节课是我听过最迷糊的老师语速快手速快还没有源代码下载想想也是醉了

来源：5-5 SVG-使用脚本控制路径文本

洪炉百炼生

2014-11-17 09:43

代码编写的视频还被快进以至于思路跟不上是不是这样会很酷？？

写回答关注

2回答

zdddrszj: 2014-12-15 17:14:01

已采纳

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<label>Path:</label>
<select id="select">
<option value="none">none</option>
<option value="#path1">path1</option>
<option value="#path2">path2</option>
<option value="#path3">path3</option>
</select>
</form>

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
<path id="path1" d="M 100 200 Q 200 100 300 200 T 500 200" stroke="rgb(0,255,0)" fill="none"/>

<path id="path2" d="M 100 300 l 100-50 200 100 100 -50" stroke="rgb(255,0,0)" fill="none" />

<path id="path3" d="M100 400 A 400 300 0 0 0 500 400" stroke="blue" fill="none"/>

<text id="text" x="100" y="100" style="font-size:20px;">
Text path scripting.<tspan id="tspan">动态使用路径文本</tspan>
</text>
</svg>
<script>
var SVG_NS = 'http://www.w3.org/2000/svg';
var XLINK_NS = 'http://www.w3.org/1999/xlink';
var text = document.getElementById('text');
var select = document.getElementById('select');
var tspan = document.getElementById('tspan');

function addTextPath(){
var textPath = document.createElementNS(SVG_NS,'textPath');
while(text.firstChild){
textPath.appendChild(text.firstChild);
}
text.appendChild(textPath);
}

function setTextPath(path){
var textPath = text.firstChild;
textPath.setAttributeNS(XLINK_NS,'xlink:href',path);
var pathElement = document.querySelector(path);
tspan.setAttribute('fill',pathElement.getAttribute('stroke'));
}

function removeTextPath(){
var textPath = text.firstChild;
while(textPath.firstChild){
text.appendChild(textPath.firstChild);
}
text.removeChild(textPath);
tspan.removeAttribute('fill');
}
select.addEventListener('input',function(){
var value = select.value;
if(text.firstChild.tagName&&text.firstChild.tagName.toLowerCase()=='textpath'){
if(value=='none') {
removeTextPath();
}else{
removeTextPath();
addTextPath();
setTextPath(value);
}
}else{
if(value!='none'){
addTextPath();
setTextPath(value);
}
}
});
</script>
</body>
</html>

3 0

zdddrs...

不客气，对啊

2014-12-17 11:44:21

共 3 条回复 >