SVG 文本的动态样式

Question

<svg>
    <text id="test" x="0" y="15"></text>
</svg>

,

d3.select("#test").text("aaa");

或

document.getElementById("test").textContent("aaa");

工作正常。但我需要为文本添加样式。现在：

d3.select("#test").text('aaa <tspan style="font-weight:bold">bbb</tspan> ccc');

不幸的是不起作用，因为参数被视为纯字符串。解决此问题的最佳跨浏览器解决方案是什么？

Answer 1

工作解决方案

主要问题是SVG元素上没有innerHTML属性，你需要自己创建所有子节点。但是您可以通过仅使用此字符串创建一个临时 DOM 对象，将您的 HTML 字符串转换为样式化的tspans（没有）字符串解析魔法。之后，您可以使用 d3 创建正确的 tspans 元素。

var text  = d3.select("#test"), tmp = document.createElement("text");  //create tmp
tmp.innerHTML = 'aaa <tspan style="font-weight:bold">bbb</tspan> ccc'  //create HTML children (not yet an SVG!)
var nodes = Array.prototype.slice.call(tmp.childNodes)                 //create a real array from the childNodes variable
nodes.forEach( function(node) {
    text.append("tspan")
        .attr("style", node.getAttribute && node.getAttribute("style"))
        .text(node.textContent)
})

剩余问题：此解决方案不支持 tspan 中的子节点，这些子节点需要遍历源元素的 childNodes，从子节点和 append 新子 tspan 元素（和其他可能的标签）到相应的父 tspan（或其他标签）。这最终会产生一个子 tspan 兼容的解析器来彻底解决这个问题。

编辑：还有一个更通用的innerSVG shim，也可以处理子节点。

破碎的解决方案

还有一些其他解决方案应该可以工作，但目前已被破坏。正如其他人已经指出的那样，直接在 jQuery 或 d3 中使用 .html() 是行不通的，因为它们依赖于 innerHTML。

//not working
$("#test").html(...); d3.select("#test").html(...)

通过 jQuery 复制和附加（类似于我的工作解决方案）也被破坏了。它创建了正确的 DOM，但没有显示 tspan（在 Firefox 和 Chrome 中尝试过）：

//creates correct DOM, but disables/hides the created tspan
var tmp = $("<text>")
tmp.html('aaa <tspan style="font-weight:bold">bbb</tspan> ccc')
$("#test").append( Array.prototype.slice.call(tmp[0].childNodes) )

根据 W3C 规范，mix tspan's 和 TextNodes 应该是可以的。

Answer 2

var t = d3.select("#test")
t.append("tspan").text("aaa ");
t.append("tspan").text("bbb").style("font-weight","bold");
t.append("tspan").text(" ccc");

Answer 3

document.getElementById("test").style.fontWeight="bold"

以上内容改变了一切。

不过你可以试试innerHTML方法：

document.getElementById("test").innerHTML('aaa <tspan style=\"font-weight:bold\">bbb</tspan> ccc');

Answer 4

试试这个

d3.select("#test").html('aaa <tspan style="font-weight:bold">bbb</tspan> ccc');