<!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 οnlοad="createText();">
<h3>svg dom沿路径绘制文本</h3>
<div id="text"></div>
</body>
</html>
该示例展示了如何使用SVG DOM在HTML中创建一个SVG元素，并沿预定义的路径绘制文本。通过创建SVG的`<svg>`，`<defs>`，`<path>`，`<g>`，`<text>`和`<textPath>`元素，实现了文本沿路径的显示。最终效果是在一个380x200像素的框内，有一条蓝色的路径，路径上显示了文本'SVG与文本：使用textPath进行字符串显示实例'。
扫一扫
1153
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
