SvgDeveloper download a software crack download
1, first of all find a map drawing as a template; (Of course, you can also draw their own, not exactly blame me slightly!)
2, New svg file: File -> New -> svg click on the ok;
3, modify svg canvas size, map and use the same template;
4, click on the picture button, then move your mouse over the top left corner canvas, has been pulled lower right corner, try to make the selected area coincides with the canvas. Release the mouse will automatically pop up select the reference picture.
5, if the picture does not coincide with the canvas, use the arrow keys on the keyboard to move the picture, after a good tune, tap the black arrow.
6, matting path region.
- In order to outline more clearly and accurately. We zoom to 500%;
- Select the pen, this is the point with the path, the fill color adjusted without, borders blue (can also be other more bright colors to distinguish the boundary);
- use a pen, in the picture the selection of the path, by one point. If the wrong point, ctrl + z to undo a few steps. Can point to take during use the mouse wheel, and below the scroll bar to adjust the display area.
7, to the area to add text: select text tool, enter text click-in positions corresponding to, if the position needs to be adjusted, can modify the code of the text tag corresponding x, y values, may be, click on the black arrow, the selected text drag corresponding position.
8, and a text box is added to the route id attribute, used to effect the back do.
9, the last saved as svg file (note: save time is to save the picture with the template also find image tags in the code, delete it).
Brush each with some unfinished, remember Tap the arrow 1, to reopen a path path, so as not to coincide path
path 的 fill不可以设为none否则hover效果不生效， fill-opacity="0"设为0以免盖住背景
示例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{ background: beige;}
path:hover{fill:#e88736;fill-opacity:1;}
</style>
</head>
<body> <!--width="231" height="304"-->
<svg width="231" height="304" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" stroke-width="1" stroke="#89C9FD">
<path d="M112 1L117 8L118 10L115 14L119 18L123 18L124 20L119 27L120 30L119 33L119 36L112 42L112 45L113 47L113 58L108 58L104 65L104 69L101 71L100 77L96 84L93 83L79 89L79 96L80 100L78 103L76 105L74 107L74 109L71 112L74 120L70 123L64 134L62 134L57 139L52 138L44 136L43 129L42 122L40 120L33 116L19 122L13 122L4 119L1 119L1 107L6 106L6 98L13 89L19 83L25 76L27 72L32 71L35 63L39 58L43 56L48 49L48 45L52 45L52 48L59 47L68 48L70 42L70 36L73 33L83 32L87 27L94 24L94 19L99 15L103 14L104 11L101 8L108 2L112 1Z" fill="#fff" fill-opacity="0" stroke="#89C9FD" />
<path d="M126 20L123 24L121 26L120 28L121 31L120 35L119 38L113 43L114 48L115 52L114 59L109 60L107 64L106 69L103 71L102 75L101 80L96 86L94 85L82 90L81 91L81 96L81 101L79 105L77 107L75 108L75 111L73 113L74 118L75 121L70 127L66 133L64 136L57 140L43 138L40 122L33 118L21 123L13 123L6 122L1 121L0 127L5 131L10 135L14 136L30 137L37 140L43 145L50 155L53 158L53 161L57 161L64 157L70 163L72 166L73 163L72 157L73 156L75 156L89 145L92 145L95 147L104 144L110 135L115 136L124 129L126 126L131 126L132 127L134 126L136 126L140 118L142 116L145 116L151 116L157 109L158 103L164 101L164 97L158 90L150 82L149 76L143 71L146 68L146 65L145 55L140 51L138 47L135 35L137 32L137 26L136 19L133 20L130 17L126 20Z" fill="#fff" fill-opacity="0" stroke="#89C9FD" />
</svg>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("path").each(function(){
$(this).bind('click',function(){
var $id = $(this).attr('id');
var dates = new Date();
alert($id)
})
})
</script>
</body>
</html>
