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

Question

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

我这样操作图表数据：

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

这将生成以下 SVG：

<svg version="1.1" style="position: absolute; width: 1000px; height: 1000px; top: -0.457382px; left: -0.002841px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g opacity="1" aria-label=": 24.38% 84 " visibility="visible" transform="translate(0,0)">
  <path cs="1000,1000" d=" M450.03754782613004,498.06263767618003 L375.0938695653251,495.1565941904501 A125,125,0,0,1,499.99999999999994,375 L500,450 A50,50,0,0,0,450.03754782613004,498.06263767618003 Z" fill="#741010" stroke="#000" stroke-width="2" stroke-opacity="1" fill-opacity="1" id="chart2-0"></path>
</g>
<g visibility="visible" transform="translate(0,0)" opacity="1">
   <text y="5" fill="#fff" font-family="Verdana" font-size="9px" opacity="1" text-anchor="middle" transform="translate(552,554)" style="cursor: default;" visibility="visible">
      <textpath xlink:href="#chart2-0">
          <tspan y="5" x="0">0.5B</tspan>
          <tspan y="16" x="0">Satellite</tspan>
          <tspan y="27" x="0">Industry</tspan>
      </textpath>
   </text>
</g>
</svg>

（为简洁起见进行了编辑。）

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 的饼图切片上的标签不显示

Label on pie chart slice using textPath not displaying

svg

amcharts