Question

我试图将不透明度应用于d3饼图上呈现的文本 - 填充似乎呈现正常但不透明度 - 这是我尝试应用不透明度的片段：

  var txts = svg.data([json]).selectAll(".theTxts")
    .data(partition.nodes)
    .enter()
    .append("text")
    .attr("class", "theTxts")
    .attr("dx", 10) //Move the text from the start angle of the arc
    .attr("dy", 18) //Move the text down
    .append("textPath")
    .attr("xlink:href", function(d, i) {
      return "#theArc_" + i;
    })
    .text(function(d) {
      return d.name;
    })
    .style("opacity", 0.0001)
    .style("fill", "#000");

  txts.transition()
    .duration(1400)
    .style("opacity", 1)
    .style("fill", "#000");

以下是视觉效果的完整工作示例：

https://plnkr.co/edit/VU85z7zz50PN4geTbf4F?p=preview

Answer 1

正如SVG规范所述，opacity属性

适用于： container elements（‘mask’除外）和graphics elements

事实证明，<textPath>不是两者兼而有之。它属于text content element和text content child element类别，因此无法使用opacity属性设置样式。

您需要为周围的<text>设置样式，即graphics element和text content element，这样可以使用opacity设置样式。

对于您的代码，您需要在保留引用<text>的{{1}}上定义初始不透明度。然后，使用此引用将txts附加到<textPath>。但是，不需要保留对<text>元素本身的引用，因为它们在其他任何地方都没有引用。然后，将使用之前创建的相同参考为<textPath>创建到最终不透明度值的转换。

<text>

查看更新的plunk以了解正常工作的演示。

未来展望-SVG 2

然而，一旦即将推出的SVG 2成为官方的W3C推荐并且由所有浏览器实现，上述内容将会改变。从版本2开始，textPath元素成为图形元素本身，使其可以使用var txts = svg.data([json]).selectAll(".theTxts") .data(partition.nodes) .enter() .append("text") .attr("class", "theTxts") .attr("dx", 10) .attr("dy", 18) .style("opacity", 0.0001) // Define initial opacity on the <text>s .style("fill", "#000"); txts // Append <textPaths>s. No need to keep the reference .append("textPath") .attr("xlink:href", function(d, i) { return "#theArc_" + i; }) .text(function(d) { return d.name; }); txts.transition() // Transition the original <text>s to new opacity value .duration(1400) .style("opacity", 1) .style("fill", "#000");属性进行样式化。根据SVG 2，下面的代码段可能有助于确定您的浏览器是否实现了opacity元素：

＆＃13;

textPath

＆＃13;

如果您的浏览器实现了console.log( SVGGraphicsElement && // Part of SVG 2; not available in IE 11 document.createElementNS("http://www.w3.org/2000/svg", "textPath") instanceof SVGGraphicsElement );实现SVGGraphicsElement界面的true版本，这将打印textPath，这本身对SVG 2来说是新手。对我来说这打印Chrome 56和FF 51中均为true，但IE 11中为false。

Answer 2

感谢Geraldo评论中我发现的问题的评论，即我的不受欢迎的行为只发生在ff上，过渡是好的，即。

然后我使用altocumulus注释为文本元素创建一个额外的变量。代码现在看起来像这样：

  var txts = svg.data([json]).selectAll(".theTxts")
    .data(partition.nodes)
    .enter()
    .append("text")
    .style("opacity", 0)
    .attr("class", "theTxts")
    .attr("dx", 10) //Move the text from the start angle of the arc
    .attr("dy", 18) //Move the text down

  var txtPth =txts.append("textPath")
    .attr("xlink:href", function(d, i) {
      return "#theArc_" + i;
    })
    .text(function(d) {
      return d.name;
    })
    .style("fill", "#000");

  txts.transition()
    .duration(7000)
    .style("opacity", 1)
    .style("fill", "#000");

现在，IE和FF上的转换工作正常。工作插件：

https://plnkr.co/edit/mra4PHUn057LZxcFZUgI?p=preview

字体不透明的不透明度

2 个答案:

未来展望-SVG 2