Я создал этот пример здесь ...
http://jsfiddle.net/rhvbG/5/
var buttons=[
'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve"><path style="fill:[fill];stroke:[stroke];" d="M19.806,11.844c0,4.072-3.301,7.374-7.373,7.374c-4.073,0-7.374-3.302-7.374-7.374c0-7.344,0.03-7.374,7.374-7.374C16.505,4.47,19.806,7.771,19.806,11.844z"/></svg>',
'<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewBox="0 0 25 25" style="enable-background:new 0 0 25 25;" xml:space="preserve"><path style="fill:[fill];stroke:[stroke];" d="M19.806,11.844c0,4.072-3.301,7.374-7.373,7.374c-4.073,0-7.374-3.302-7.374-7.374c0-7.344,0.03-7.374,7.374-7.374C16.505,4.47,19.806,7.771,19.806,11.844z"/></svg>'
];
$(document).ready(function(){
var colorClasses = {};
colorClasses["fill"] = "#FF0000";
colorClasses["stroke"] = "#333333";
addButtons(buttons, colorClasses);
});
function addButtons(buttons, colorClasses){
for(var i=0, count = buttons.length; i < count; i++)
$("#test").append(addColorClasses(colorClasses, buttons[i]));
}
function addColorClasses(classes, string){
for( var c in classes )
string = string.replace("[" + c + "]", classes[c]);
return string;
}
Цель - загрузить svg "семейство иконок" через JSON и добавить их на страницу во время выполнения. Поскольку мне нужны только основы и я должен осознавать размер приложения, я надеялся получить простую реализацию для изменения цвета некоторых объектов SVG во время выполнения. Я открыт для плагина jquery, при условии, что я могу каким-то образом автоматизировать импорт svg-объекта illustrator. (Это будет важно для рабочего процесса)
Ссылка выше работает на моем рабочем столе в FF6 и Chrome (последняя версия), но она не работает в IE или моих устройствах iOS и, очевидно, никуда не денется. Я совершенно новичок в SVG, кто-нибудь может указать мне правильное направление здесь?
Я помещаю svg прямо на страницу и предполагаю, что это не так. Примеры, которые я нашел в Интернете, показывают, что svg помещается в тег объекта, но это не сработает для меня по нескольким причинам ... Мне нужно иметь возможность менять цвет через некоторые "токены", которые я установил внутри svg теги для замены цвета, и, насколько я понимаю, я не смогу получить доступ к svg DOM из-за проблем с несколькими доменами (это будет встроено во внешние страницы). Кроме того, из-за других причин мне нужно обслуживать данные svg как часть главного объекта JSON, чтобы можно было уменьшить количество запросов.
ДОБАВЛЕНО ПОСЛЕ ПЕРВОГО ОТВЕТА:
Просто хотел добавить, что именно я пытаюсь добавить элемент SVG в DOM через строку svg. На данный момент я могу выполнять манипуляции с самим SVG в среде рендеринга (среда редактирования может быть другой историей), и я хотел бы избежать использования библиотеки (хотя плагин jQuery может быть приемлемым, если он легкий, потому что я уже используя jQuery).