javascript - 如何在运行时使用 javascript 将 illustrator 中的 svg 添加到 DOM？

Question

我在这里创建了这个例子......

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;
}

目标是通过 JSON 加载 svg“图标系列”，并在运行时将它们添加到页面。因为我只需要基础知识并且我需要注意应用程序的大小，所以我希望获得一个在运行时更改某些 svg 对象颜色的基本实现。我对 jquery 插件持开放态度，前提是我可以以某种方式自动导入 illustrator svg 对象。 (这对工作流程很重要)

上面的链接在我的 FF6 和 Chrome(最新版)桌面上有效，但它没有在 IE 或我的 iOS 设备上运行，显然不会去任何地方。我是 SVG 的新手，有人可以在这里为我指明正确的方向吗？

我将 svg 直接放在页面上，我假设这不是它的完成方式。我在网上找到的例子显示 svg 被放置在一个对象标签中，但是由于几个原因这对我不起作用......我需要能够通过我在 svg 中设置的一些“ token ”来改变颜色用于颜色替换的标签，据我所知，由于跨域问题，我将无法访问 svg DOM(这将嵌入到外部页面中)。此外，由于其他许多原因，我需要将 svg 数据作为主 JSON 对象的一部分提供，这样我就可以减少请求的数量。

在第一 react 后添加:

只是想补充一点，我正在尝试通过 svg 字符串将 SVG 元素添加到 DOM。现在，我可以在渲染环境中对 SVG 本身执行操作(编辑环境可能是另一回事)并且我想避免使用库(尽管 jQuery 插件如果是轻量级的可能是可以接受的，因为我已经使用 jQuery)。

Answer 1

这项工作有很多工具，但您应该考虑使用 RaphaelJS通过事先将 SVG 转换为 Raphael 使用的 JSON 结构。查看http://readysetraphael.com/因为这样做。除了能够轻松地与 SVG 节点交互之外，您还将获得与不支持 SVG 的旧版 IE 的兼容性。