您的位置：首页 > 其它

svg dom沿路径绘制文本

2013-12-30 20:38 393 查看

<!DOCTYPE
html>
<html>
<head>

<meta charset="utf-8">

<title>svg
dom沿路径绘制文本</title>

<style>

#text{

border: 1px solid red;

width: 380px;

height: 200px;

}

</style>

<script>

function
createText(){

var
root=document.getElementByIdx_x("text");

var
SVG="http://www.w3.org/2000/svg";

var
XLINK="http://www.w3.org/1999/xlink";

var
svg=document_createElement_xNS(SVG,"svg");

svg.setAttribute("width","380");

svg.setAttribute("height","200");

//创建我们的defs元素

var
defs=document_createElement_xNS(SVG,"defs");

svg.a(defs);

//创建我们的path元素

var
circlePath=document_createElement_xNS(SVG,"path");

circlePath.setAttribute("d","M10,50"+

"C10,50
50,0 100,50"+

"C100,50
150,100,190,50"+

"M10,150"+

"C10,150
50,100 100,150"+

"C100,150
150,200 190,150"

);

circlePath.setAttribute("id","circlePath");

//创建我们的g元素

var
g=document_createElement_xNS(SVG,"g");

g.setAttribute("fill","dodgerblue");

g.setAttribute("font-size","15");

g.setAttribute("transform","translate(100,0)");

//创建我们的text元素

var
text=document_createElement_xNS(SVG,"text");

//创建我们的textPath元素

var
textPath=document_createElement_xNS(SVG,"textPath");

textPath.setAttributeNS(XLINK,"href","#circlePath");

textPath.textContent="SVG与文本：使用textPath进行字符串显示实例";

var
circle=document_createElement_xNS(SVG,"use");

circle.setAttributeNS(XLINK,"href","#circlePath");

circle.setAttribute("fill","none");

circle.setAttribute("stroke","blue");

defs.a(circlePath);

text.a(textPath);

g.a(text);

svg.a(g);

root.a(svg);

}

</script>
</head>
<body
onload="createText();">

<h3>svg
dom沿路径绘制文本</h3>

<div
id="text"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

svg&nbsp;dom沿路径绘制文本

svg dom沿路径绘制文本