                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /走進(jìn)SVG

這節(jié)課是我聽過最迷糊的老師語速快手速快還沒有源代碼下載想想也是醉了

代碼編寫的視頻還被快進(jìn) 以至于思路跟不上是不是這樣會(huì)很酷？？

洪爐百煉生

2014-11-17

源自：走進(jìn)SVG 5-5

關(guān)注問題我要回答

1704

操作

收起

2 回答

zdddrszj
2014-12-15

<!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">動(dòng)態(tài)使用路徑文本</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>