将 svg 附加到背景图像中答案

【问题标题】：Appending svg into a background-image将 svg 附加到背景图像中
【发布时间】：2019-03-03 15:51:50
【问题描述】：

如何将动态生成的 svg 分配给 div 的背景图片？

我使用 d3 生成词云。这会将 svg 标记附加到 <div>

 d3.select("#_wordcloud_element").append("svg")
                        .attr("width", scope.width )
                        .attr("height", scope.height)
                        .append("g")
                        .attr("transform", "translate("+scope.width/2+","+scope.height/2+")")
                        .selectAll("text")
                        .data(words)
                        .enter().append("text")
                        .style("font-size", function (d) {
                            return d.size + "px";
                        })
                        .style("font-family", "Arial")
                        .style("fill", function (d, i) {
                            return fill(i);
                        })
                        .attr("text-anchor", "middle")
                        .attr("transform", function (d) {
                            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                        })
                        .text(function (d) {
                            return d.text;
                        });

我不希望将 svg 附加到 div，而是希望 svg 成为 .我不知道如何做到这一点。

编辑

我的函数的示例 SVG 输出：

svg width="500" height="400"><g transform="translate(250,200)"><text text-anchor="middle" transform="translate(22,-70)rotate(90)" style="font-size: 42px; font-family: Arial; fill: rgb(31, 119, 180);">Environment</text><text text-anchor="middle" transform="translate(-73,-27)rotate(90)" style="font-size: 37px; font-family: Arial; fill: rgb(174, 199, 232);">Technology Internet</text><text text-anchor="middle" transform="translate(85,41)rotate(90)" style="font-size: 35px; font-family: Arial; fill: rgb(255, 127, 14);">Biology</text><text text-anchor="middle" transform="translate(-12,6)rotate(90)" style="font-size: 35px; font-family: Arial; fill: rgb(255, 187, 120);">Systems</text><text text-anchor="middle" transform="translate(-128,-93)rotate(0)" style="font-size: 34px; font-family: Arial; fill: rgb(44, 160, 44);">Movies</text><text text-anchor="middle" ...

【问题讨论】：

标签： javascript css svg d3.js

【解决方案1】：

使用XMLSerializer 将内容序列化为字符串，然后从中创建一个data uri 用于背景图像。

【讨论】：

谢谢！ Type Error: Failed to execute 'serializeToString' on 'XML Serializer'. Invalid node value我用示例输出更新了问题。
你写了什么代码会产生这个错误？
var s = new XMLSerializer(); var d = $("#_wordcloud_element"); var str = s.serializeToString(d);
我想你想要 d = $("#_wordcloud_element")[0];因为您不能将 jquery 对象传递给序列化程序，所以您需要传递原始 DOM 对象。
对迟到的评论表示歉意：我收到“无效的数据 url” - 有什么想法可能是错误的吗？：url("data:<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'><g transform='translate(250,200)'><text text-anchor='middle' transform='translate(-113,88)rotate(0)' style='font-size: 19px; font-family: Arial; fill: rgb(31, 119, 180);'>Node.js</text></g></svg>")