How do I assign a dynamically generated svg to the background image of div?
I use d3 to generate a word cloud. This appends an svg tag to a <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;
});
Instead of appending svg to the div, I want the svg to be the background image of the . I'm blanking on how to do this.
EDIT
Example SVG output from my function:
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" ...
使用XMLSerializer将内容序列化为字符串,然后从中为背景图像创建数据uri 。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.