您的位置：首页 > 其它

svg dom绘制文本

2013-12-30 20:38 363 查看

<!DOCTYPE
html>
<html>
<head>

<meta
charset="utf-8">

<title>svg
dom绘制文本</title>

<style>

#text{

border: 1px solid red;

width: 200px;

height: 200px;

}

</style>

<script>

function
createText(){

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

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

//创建我们的svg元素

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

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

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

//创建我们的g元素

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

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

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

//创建我们的text元素

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

text1.setAttribute("x",20);

text1.setAttribute("y",40);

text1.textContent="SVG";

//创建我们的tspan元素

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

tspan.setAttribute("x","40");

tspan.setAttribute("y","80");

tspan.textContent="文本";

text1.a(tspan);

g.a(text1);

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绘制文本