Question

我正在编写一个Amcharts插件，它在切片的路径上放置一个饼图切片标签。我这样做是通过向切片<path>添加ID，移动引用<text>的{{1}}内的标签中的<textPath>。输出看起来正确但文本不可见。它似乎不是一个浏览器，因为几个SVG验证器做同样的事情。知道为什么没有显示<path>吗？

我像这样操纵图表数据：

<textPath>

这会生成以下SVG：

var chart = event.chart;
var div = chart.div;
var divId = div.id;
var chartData = chart.chartData;

chart.container.container.setAttribute("xmlns","http://www.w3.org/2000/svg");
chart.container.container.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink");

    for(var i = 0; i < chartData.length; i++) {
        if(chartData[i].dataContext.wrapLabel) {
            /**
             *  Create an ID for the <path> that the label will wrap onto
             */
            chartData[i].wedge.node.firstChild.setAttribute("id",divId + "-" + i);
            // create the textPath element and set its href to the id we added to the path
            var n = document.createElement('textPath');
            n.setAttribute("xlink:href","#" + divId + "-" + i);
            // Now move all of the tspan nodes underneath the textPath node
            while(chartData[i].label.node.hasChildNodes()) {
                n.appendChild(chartData[i].label.node.firstChild);
            }
            // and then append the textPath node to the <text> node
            chartData[i].label.node.appendChild(n);
        }
    }

（为简洁而编辑。）

Answer 1

你想要

n.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href","#" + divId + "-" + i);

因为您只能使用setAttribute在null命名空间中设置属性。

你也不能用setAttribute设置命名空间，所以我不确定你要用

来实现什么

chart.container.container.setAttribute("xmlns","http://www.w3.org/2000/svg");
chart.container.container.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink");

textPath元素在输出中完全是小写的事实表明它的创建出了问题。要么你用小写错误地写了它，要么你在错误的命名空间中创建它（可能还有你所有的其他元素）。

有关命名空间的更多详细信息，请参阅the MDN article。

饼图切片上的标签使用textPath不显示

1 个答案: