2016-12-23 6 views
0

Прямо сейчас, я использую Base64 SVG в качестве фонового изображения в CSS. Но мне нравится писать SVG в HTML, чтобы я мог легко изменить цвет SVG с помощью CSS ...Простой способ поместить base64 SVG в HTML DOM по Javascript?

Итак, вот вопрос: как преобразовать SVG Base64 в тег SVG и вставить в мой DOM?

var base64SVG = $('#svgHolder').css('background-image'); 
base64SVG = base64SVG.replace('url("', '').replace('")', ''); 

// Now I have a Base64 SVG, so what else should I do to be able to put in into the DOM? 

На самом деле содержание переменной base64SVG является следующее:

var base64SVG = "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#ccc'/%3E%3C/svg%3E"; 
+0

Фоновое изображение не кодируется Base64. Я думаю, вы имеете в виду, что это URI данных. –

+0

Это кодированный URI. – Ali

ответ

0

я нашел способ для достижения этой цели:

var svg = decodeURI($('#svgHolder').css('background-image').replace('url("data:image/svg+xml;charset=utf8,', '').replace('")', '')); 
$('#svgHolder').append(svg); // append the SVG image into the element 
$('#svgHolder').css('background-image', 'none'); // And remove the cssbackground-image, as we don't need it anymore 

Он прекрасно работает! Но если кто-то знает лучший способ, я был бы рад узнать, что:

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

  • Нет связанных вопросов^_^