Svg Development Summary

Because of the work, svg is used to achieve pipeline flow and instrumentation effect in the configuration screen. Some problems are encountered and recorded here.

1. Development Tools

AI_CS3_chs.exe. Export the configuration map to the svg format. Win764-bit installation fails, and window2003 is successfully installed. The diagram made by the artist is quickly displayed.

Inkscape0.47pre4: edit an svg file to implement an animation. The greatest use of this function is to select an element and modify its attributes in the xml editor. The first version of 0.48 was used, and Chinese characters were garbled during installation. After running, the attribute values cannot be modified in xml editing, and then discarded.

SVGDeveloper, the cracked version used. The advantage is that syntax prompts can be implemented, but the prompts are not complete. The svg code segment found on the Internet can be directly pasted to the source code window, and the effect is displayed in the View window. Press F12 to open the browser directly without saving it. Learning svg is a good tool.

2. Getting Started

One of the svg development practices published in the past few years has been unavailable on the Internet, and an electronic version can be downloaded. It is a good book to study slowly, but it is too time-consuming to take a closer look.

There are many foreign websites on svg in English. For more information, see another article. Http://www.cnblogs.com/zhaobl/archive/2013/02/26/2933704.html

3. Technical points encountered during implementation

A. pipeline flow effect

Implementation Methods: js controls the metadata method and SMIL animation provided by svg.

Because the pipeline is not straight, it is troublesome to use js to control the attributes of the elements in a corner and give up.

The animateMotion provided by SMIL allows an element to move along a path and provides attribute settings such as start, stop, and running duration.

Implementation process:

After the artist draws a picture, use the pen tool on the pipeline to draw a path; Use js footsteps to dynamically create elements and move them along the path in turn.

Effect:

Code:

      for(var i=0;i<count;i++)          {              var arrow = document.createElementNS("http://www.w3.org/2000/svg","path"); arrow.setAttributeNS(null,"d", "M 0.0295257,3.2170172 4.7043281,1.6460377 -0.0022295,0.01628072 1.4026194,1.6249081 0.0295257,3.2170172 z");           //   arrow.setAttributeNS(null,"d", "M -21.370884,24.236745 4.30747,-1.24684 -4.33673,-1.29349 1.29446,1.27672 -1.2652,1.26361 z");              arrow.setAttributeNS(null,"sodipodi:nodetypes", "ccccc");              arrow.setAttributeNS(null,"style", "fill:#00ff00;fill-opacity:1;stroke:none;display:inline;");              var ani = document.createElementNS("http://www.w3.org/2000/svg","animateMotion");              ani.setAttribute("begin", i+"s");              ani.setAttribute("dur", count+"s");              ani.setAttribute("repeatCount", "indefinite");              ani.setAttribute("rotate", "auto");              var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath");              mpath.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#path6535");              ani.appendChild(mpath);              var set = document.createElementNS("http://www.w3.org/2000/svg","set");              set.setAttributeNS(null,"attributeName", "visibility");              set.setAttributeNS(null,"begin",i+"s");              set.setAttributeNS(null,"to", "visible");              arrow.appendChild(set);              arrow.appendChild(ani);              SVGRoot.appendChild(arrow);          }

B. dynamically update the value of the instrument to achieve gradient.
This is no difficulty. It is to define a rectangle in the designer and fill it with gradient color. Just update the height of the rectangle in the code.