javascript - 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 字符串转换为样式化的 tspan(没有)字符串解析魔法。之后，您可以使用 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，复制style(可能还有其他属性)从子节点和 append 新的子 tspan 元素(和其他可能的标签)到相应的父 tspans(或其他标签)。这最终将导致一个子 tspan 兼容的解析器来完全解决这个问题。

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

splinter 的解决方案

还有一些其他的解决方案应该可行，但目前已失效。正如其他人已经指出的那样，直接在 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 和 TextNodes。