javascript - 不渲染字体的不透明度

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

Applies to: container elements (except ‘mask’) and graphics elements

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

您需要设置周围的样式 <text> 相反，这是一个 graphics element以及 text content element , 这使得它可以使用 opacity 设置样式.

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

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

查看更新后的 plunk用于工作演示。

future 展望——SVG 2

然而，一旦即将推出的 SVG 2 成为官方 W3C 推荐标准并被所有浏览器实现，上述情况将会改变。从版本 2 开始， textPath 元素成为一个图形元素 本身，使其可以使用 opacity 设置样式。属性(property)。下面的代码片段可能有助于确定您的浏览器是否实现了 textPath根据 SVG 2 的元素:

console.log(
  SVGGraphicsElement &&     // Part of SVG 2; not available in IE 11
  document.createElementNS("http://www.w3.org/2000/svg", "textPath")
    instanceof SVGGraphicsElement
);

这将打印 true ，如果您的浏览器实现了 SVG 2 版本的 textPath实现 SVGGraphicsElement 界面，它本身是 SVG 2 的新功能。对我来说，它打印出 true在 Chrome 56 和 FF 51 中，但是 false在 IE 11 中。