Question

我想使用Javascript在SVG中创建弯曲文本。我遇到了很多问题，特别是命名空间相关的问题，但现在一切正常，路径和圆圈都成功显示，但文本没有显示。当我在浏览器检查器中复制粘贴创建的svg代码并将其添加到svg时，它按预期工作。但我无法使用JS工作。您可以看到整个代码：

<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>

如果有人告诉我这里有什么问题，并且在使用JS中的SVG时对所有这些问题有任何好的和简短的解释，我会很感激。感谢。

更新：我修改了代码以使用setAttributeNS，但仍然没有成功。

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"
                                                });


}

Answer 1

无法使用setAttribute设置xlink：href属性，因为该方法只能在null命名空间中设置属性，而xlink：href在xlink命名空间中。

使用setAttributeNS，并指定xlink名称空间http://www.w3.org/1999/xlink作为第一个参数。

使用SVG和JS创建曲线文本

1 个答案: