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

【问题标题】：Label on pie chart slice using textPath not displaying使用 textPath 的饼图切片上的标签不显示
【发布时间】：2018-04-12 20:55:32
【问题描述】：

我正在编写一个 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">$260.5B</tspan>
          <tspan y="16" x="0">Satellite</tspan>
          <tspan y="27" x="0">Industry</tspan>
      </textpath>
   </text>
</g>
</svg>

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

【问题讨论】：

标签： svg amcharts

【解决方案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。

【讨论】：