In accordance with the SVG specification, the opacity property
Applies to: container elements (except ‘mask’) and graphics elements
Interestingly, the <textPath> does not fall under either category. It is classified as a text content element and a text content child element, therefore making it ineligible for styling using the opacity attribute.
To style these elements, you must focus on the surrounding <text> instead. The graphics element and text content element nature of the <text> allows it to be styled using the opacity property.
In your code, ensure you define the initial opacity on the <text>s that you reference as txts. Subsequently, append the <textPath>s to these <text>s based on this reference. There is no need to create a separate reference for the <textPath> elements since they are not utilized elsewhere. Transition the original <text>s to the final opacity value using this same reference.
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");
Check out the updated plunk for a demonstration of this functionality.
Looking ahead—SVG 2
The dynamics will change once SVG 2 becomes an official W3C recommendation and gets implemented across all browsers. In SVG 2, the textPath element evolves into a graphics element, enabling it to be styled using the opacity property. The code snippet below can be useful in identifying if your browser supports the textPath element according to 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
);
If your browser adheres to SVG 2's version of textPath utilizing the SVGGraphicsElement interface, which is unique to SVG 2, the above code will output true. This evaluation returns true in Chrome 56 and FF 51 for me, but appears as false in IE 11.