Jquery 单击即可更改图像（svg）

我正在试用Raphael+vectron，并尝试通过单击按钮来更改svg图像

这（当然）是不可能的，因为当svg被渲染时，它被渲染为路径：

<path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path>

---

您可以将路径包装在svg标记中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path>
</svg>

它将表现为svg元素。我在Chrome和IE上进行了测试

因此，在您的情况下，给定一个包含以下行的HTML文件：

<div id="charBody" class="svg-file" data-svg="img/body1.svg"></div>

调用

$（'.svg文件'）.vectron（）

为

charBody

创建一个子svg元素，该元素包含从文件加载的内容，并显示在页面中

我想说的是，您可以直接将svg元素字符串中的内容添加到希望添加svg的div的

innerHTML

，而不是调用vectron

vectron上一次更新是在一年前，所以我对它没有太高的期望。此外，您只需在按钮上更改svg，无需vectron即可轻松完成

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path>
</svg>

<div id="charBody" class="svg-file" data-svg="img/body1.svg"></div>