SVG实现多边形

发布时间:2017-02-07 浏览次数:2711 文章来源:个人博客

最近在开发过程中遇到了一个需求,画一个不规则的多边形,里面分许多小的块,每个块根据后端数据显示不同颜色,怎么实现呢?


可以通过利用瞄点画SVG图来实现。


SVG 意为可缩放矢量图形(Scalable Vector Graphics)。具体的可以百度查阅资料。


而实现上诉的需求,步骤如下:


第一:使用Mapedit描绘出psd等设计图上多边形的坐标点。


第二:在html页面中使用<svg>标签构造多边形。


代码例子如下:

<svg id="mapSVG" width="1344" height="704"  style="position: absolute;left: 50%;top: 0px; margin-left:-672px;">            
            <polygon data-name="K" title="K" fill="#672559" stroke="#EBF0DA"  stroke-width="0.4" points="632,343,608,367,608,383,616,391,629,391,655,365"/>
            <polygon data-name="G" title="G" fill="#ffc600" stroke="#EBF0DA"  stroke-width="0.4" points="631,342,655,365,695,325,671,303"/>
            <polygon data-name="F" title="F" fill="#64ae2e" stroke="#EBF0DA"  stroke-width="0.4" points="671,302,671,303,671,303,695,325,699,321,766,321,766,307,760,307,743,292,683,292"/>
            <polygon data-name="E" title="E" fill="#64ae2e" stroke="#EBF0DA"  stroke-width="0.4" points="766,307,792,307,792,299,856,299,856,321,766,321"/>
            <polygon data-name="H" title="H" fill="#672559" stroke="#EBF0DA"  stroke-width="0.4" points="745,294 745,288 792,288 792,307 760,307"/>
            <polygon data-name="D" title="D" fill="#00a8ff" stroke="#EBF0DA"  stroke-width="0.4" points="856,299,875,299,875,307,918,307,918,320,918,321,856,321,856,321"/>
            <polygon data-name="H" title="H" fill="#672559" stroke="#EBF0DA"  stroke-width="0.4" points="875,288 875,307 927,307 927,295 927,294 914,294 914,288"/>
            <polygon data-name="C" title="C" fill="#64ae2e" stroke="#EBF0DA"  stroke-width="0.4" points="918,307,927,307,927,293,982,293,1002,313,982,332,970,321,918,321"/>
            <polygon data-name="B" title="B" fill="#ffc600" stroke="#EBF0DA"  stroke-width="0.4" points="984,329 999,314 1032,347 1016,363"/>
            <polygon data-name="A" title="A" fill="#672559" stroke="#EBF0DA"  stroke-width="0.4" points="1016,362 1031,378 1031,382 1039,389 1050,389 1057,382 1057,370 1050,364 1046,364 1031,348"/>
            <polygon data-name="N" title="N" fill="rgba(37,99,170,0.6)" stroke="#EBF0DA"  stroke-width="0.4" points="745,288 745,274 775,274 775,270 801,270 801,274 820,274 820,270 837,270 837,274 847,274 847,270 863,270 863,274 874,274 874,270 891,270 891,274 891,274 903,274 903,270 913,270 913,288 875,288 875,299 792,299 792,288"/>
</svg>

这样,就可描绘出多个块,并且构成多边形。

其中:fill是代表颜色,改变即可。。

key-word
SVG Html实现多边形 使用SVG标签