2014-10-14 2 views
0

Как назначить динамически сгенерированный svg фоновому изображению div?Добавление svg в backgound-image

Я использую d3 для создания облака слова. Это присоединяет SVG тег к

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 фоновое изображение из. Я говорю о том, как это сделать.

EDIT

Пример 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" ... 

ответ

2

Используйте XMLSerializer сериализовать содержимое в строку затем создать data uri для фонового изображения из этого.

+0

Thx! 'Тип Ошибка: Не удалось выполнить 'serializeToString' в 'Сериализаторе XML'. Недопустимое значение узла. Я обновил вопрос с помощью примера вывода. – metalaureate

+0

Какой код вы написали, который генерирует эту ошибку? –

+0

'var s = новый XMLSerializer(); var d = $ ("#_ wordcloud_element"); var str = s.serializeToString (d); ' – metalaureate

Смежные вопросы