如何从黑白线条图快速制作SVG图以及在网页中进行控制交互

线条图快速制作SVG图以及在网页中进行控制交互"/>

如何从黑白线条图快速制作SVG图以及在网页中进行控制交互

需要将一批黑白位图，转换成SVG图，并且能够实现对位图中的对象的子部件进行交互操作，调研了几个软件，最后选择InkScape这个开源的软件来完成。当然可以用美工来进行黑白图描绘制SVG图，但效率比较低。通过Inkscape内置的功能，即可很轻松的完成相识度很高的SVG图制作。制作流程简单记录如下：

1）找到合适的需要转换的黑白线条照片

2）用InkScape软件打开，点击选择打开的图片，然后选“路径”—”临摹位图轮廓“—“自动临摹”—“Update”，在右边可以看到生成的svg图效果，可以通过调整参数，来获得不同的效果，选择最佳的，也可以选择不同的临摹方式。

3）在inkscape中将生成的svg图，进行编辑，建立图层，添加组建的名称，以便后续代码操作

4）利用embed标签，将页面中引入svg图

<embed id="embed1" src="./ht.svg" />

5）在页面中获取svg中的元素，加上一些风格颜色改变之类的，响应点击的JavaScript代码之类的，完成交互式设计

function init(){var emd = document.getElementById("embed1");var svg = emd.getSVGDocument();var body = svg.getElementById("path288");body.onclick = function () {var color = this.getAttribute("style");if (color == "fill:#ff0000"){this.setAttribute("style","fill:#0000ff");}else{this.setAttribute("style","fill:#ff0000");}}
}
window.onload=init;

4）采用浏览器打开包含svg图的页面。（注意不要采用本地文件打开的方式，应该采用http 获取的方式来打开）

点击直升机机身后改变成红色