Javascript 使用SVG和JS创建曲线文本
我想使用Javascript在SVG中创建曲线文本。我曾经遇到过很多问题，特别是与名称空间相关的问题，但现在一切都正常了，成功地显示了路径和圆，但没有显示文本。当我在browser inspector中复制粘贴创建的svg代码并将其添加到svg时，它会按预期工作。但是我不能用JS让它工作。整个代码如您所见：Javascript 使用SVG和JS创建曲线文本,javascript,svg,Javascript,Svg,我想使用Javascript在SVG中创建曲线文本。我曾经遇到过很多问题，特别是与名称空间相关的问题，但现在一切都正常了，成功地显示了路径和圆，但没有显示文本。当我在browser inspector中复制粘贴创建的svg代码并将其添加到svg时，它会按预期工作。但是我不能用JS让它工作。整个代码如您所见： <html> <body onload="onLoad()"> <div id="svgbox"></div> </body&g
<html>
<body onload="onLoad()">
<div id="svgbox"></div>
</body>
<script>
var svg;
var last_shape; // for debug
function qs(sel)
{
return document.querySelector(sel);
}
function SVG(el)
{
this.element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
qs(el).appendChild(this.element);
var props = {
"xmlns": "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"version": "1.1",
"style": "width:100%;height:100%;",
"stroke": "#58b",
"fill":"none",
"stroke-width": "2"
};
for (i in props) {
this.element.setAttribute(i, props[i]);
}
this.create = function(tag,props) {
var o = document.createElementNS("http://www.w3.org/2000/svg", tag);
if(typeof(props)!="undefined") {
for (i in props) {
o.setAttribute(i, props[i]);
}
}
return o;
}
this.add = function(tag,props) {
var o = this.create(tag,props);
this.element.appendChild( o );
return o;
};
this.addTo = function(parent, tag, props) {
var o = document.createElementNS("http://www.w3.org/2000/svg", tag);
if(typeof(props)!="undefined") {
for (i in props) {
o.setAttribute(i, props[i]);
}
}
parent.appendChild(o);
return o;
};
return this;
}
function drawArc(svg, fromX, fromY, toX, toY, controlX, controlY, props)
{
var o = svg.add( "path", {
"d":"M" + fromX + " " + fromY + " Q " +
controlX + " " + controlY + " " +
toX + " " + toY
});
if(typeof(props)!="undefined") {
for (i in props) {
o.setAttribute(i, props[i]);
}
}
last_shape = o;
return o;
}
function drawLabeledArrow(svg, fromX, fromY, toX, toY, title, props)
{
var arc_id = "arc-"+Math.floor(Math.random()*10000000);
var arc = drawArc( svg, fromX, fromY, toX, toY, (fromX+toX)/2, (fromY+toY)/2 - (fromX+toX)/2, {id: arc_id});
var head_base_x = arc.getPointAtLength(arc.getTotalLength() - 4).x;
var head_base_y = arc.getPointAtLength(arc.getTotalLength() - 4).y;
last_shape = svg.add("text");
last_shape = svg.addTo(last_shape, "textPath", {"fill":"#ff0000", "xlink:href":"#"+arc_id});
last_shape.appendChild(document.createTextNode(title));
last_shape = svg.add( "circle", {
cx: head_base_x,
cy: head_base_y,
r: 4,
fill: "#5ad"
});
}
function onLoad()
{
svg = SVG('#svgbox');
drawLabeledArrow(svg, 10,100, 200, 100, "test label");
}
</script>
</html>
无法使用setAttribute设置xlink:href属性，因为该方法只能在null命名空间中设置属性，而xlink:href位于xlink命名空间中
改用setAttributeNS，并将xlink名称空间指定为第一个参数。@RobertLongson谢谢，我更新了代码，但输出没有改变。我在问题中添加了新代码。@RobertLongson是的，这是一个粗心的错误。谢谢问题解决了。请您将此作为答案提交，以便我将其标记为问题的答案？
function drawLabeledArrow(svg, fromX, fromY, toX, toY, title, props)
{
var arc_id = "arc-"+Math.floor(Math.random()*10000000);
var arc = drawArc( svg, fromX, fromY, toX, toY, (fromX+toX)/2, (fromY+toY)/2 - (fromX+toX)/2, {id: arc_id});
var head_base_x = arc.getPointAtLength(arc.getTotalLength() - 4).x;
var head_base_y = arc.getPointAtLength(arc.getTotalLength() - 4).y;
last_shape = svg.add("text");
var o = document.createElementNS("http://www.w3.org/2000/svg", "textPath");
o.setAttributeNS("http://www.w3.org/2000/svg", "xlink:href", "#"+arc_id);
o.appendChild(document.createTextNode(title));
last_shape.appendChild( o );
last_shape = svg.add( "circle", {
cx: head_base_x,
cy: head_base_y,
r: 4,
fill: "#5ad"
});
}