2014-09-23 211 views
1

我有以下想转换的SVG数据。如何将SVG转换为jVectorMap格式

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [ 
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/"> 
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/"> 
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/"> 
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/"> 
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/"> 
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/"> 
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/"> 
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/"> 
]> 
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;" 
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1600px" height="987px" 
    viewBox="0 0 1600 987" enable-background="new 0 0 1600 987" xml:space="preserve"> 
<metadata> 
    <sfw xmlns="&ns_sfw;"> 
     <slices></slices> 
     <sliceSourceBounds y="24274" x="8592" width="-32766" height="-32766" bottomLeftOrigin="true"></sliceSourceBounds> 
    </sfw> 
</metadata> 
<g> 
    <rect x="932.441" y="173.059" fill="#94D4EA" width="85.342" height="62.58"/> 

     <rect x="761.653" y="337.726" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -34.1964 681.502)" fill="#94D4EA" width="87.789" height="88.608"/> 
    <rect x="744.503" y="548.149" fill="#94D4EA" width="40.801" height="43.139"/> 
    <rect x="1024.172" y="322.571" fill="#94D4EA" width="53.72" height="147.469"/> 
    <rect x="642.214" y="721.369" fill="#94D4EA" width="93.917" height="94.133"/> 
    <rect x="653.43" y="530.749" fill="#94D4EA" width="62.58" height="84.035"/> 
    <rect x="523.241" y="211.666" fill="#94D4EA" width="52.122" height="47.644"/> 
    <rect x="867.259" y="547.149" fill="#94D4EA" width="201.952" height="28.199"/> 
    <rect x="653.43" y="432.872" fill="#94D4EA" width="62.58" height="84.035"/> 
    <rect x="653.43" y="334.592" fill="#94D4EA" width="62.58" height="84.035"/> 
    <rect x="833.951" y="173.059" fill="#94D4EA" width="85.342" height="62.58"/> 
    <rect x="736.151" y="173.059" fill="#94D4EA" width="85.342" height="62.58"/> 
    <rect x="638.352" y="173.059" fill="#94D4EA" width="85.342" height="62.58"/> 
    <rect x="1027.882" y="171.589" fill="#94D4EA" width="40.801" height="43.139"/> 
    <rect x="586.822" y="171.589" fill="#94D4EA" width="40.801" height="43.139"/> 

     <rect x="835.682" y="263.087" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 1285.1692 1146.2896)" fill="#94D4EA" width="88.609" height="87.787"/> 

     <rect x="835.412" y="412.809" transform="matrix(0.7071 0.7071 -0.7071 0.7071 580.6155 -488.2916)" fill="#94D4EA" width="88.607" height="87.79"/> 

     <rect x="909.851" y="337.76" transform="matrix(0.7071 0.7071 -0.7071 0.7071 549.3578 -562.9149)" fill="#94D4EA" width="88.607" height="87.789"/> 
</g> 
</svg> 

有一个在“http://svgto.jvectormap.com/”找到一个在线SVG转换器,但是这将返回我的空白。我的SVG格式有问题吗?我正在使用Adobe Illustrator 5.5来生成SVG。

典型Jvector地图的语法如下:

jQuery.fn.vectorMap('addMap', 'map', { 
    "width": 1600, 
    "height": 987, 
    "paths": { 
     "id0": { 
      "name": "name0", 
      "path": "M1310.02 738.81L1287.35 632.18L1289.95 616.20L1302.59 614.71L1325.62 722.46L1323.02 738.07" 
     }, 
     "id1": { 
      "name": "name1", 
      "path": "M1252.30 781.54L1254.16 764.45L1259.11 764.45L1259.11 760.98L1263.33 760.98L1263.33 762.96L1268.03 763.70L1268.03 765.69L1271.13 765.93L1269.64 782.28" 
     }, 
     "id2": { 
      "name": "name2", 
      "path": "M1285.37 702.52L1287.72 687.41L1285.99 676.76L1223.20 683.08L1221.66 688.70L1225.11 708.85" 
     }, 
     "id3": { 
      "name": "name3", 
      "path": "M1278.19 626.98L1280.42 612.86L1279.30 602.70L1208.24 609.43L1212.37 633.55" 
     }, 
     "id4": { 
      "name": "name4", 
      "path": "M1188.03 569.26L1185.80 558.61L1188.03 539.78L1233.11 535.58L1234.84 546.97L1231.87 565.30" 
     }, 
     "id5": { 
      "name": "name5", 
      "path": "M1223.69 532.23L1212.55 465.97L1215.64 448.01L1228.40 446.78L1239.55 512.04L1236.33 531.12" 
     } 
    } 
}); 

任何想法,我能怎么我的SVG转换为上面的格式是否正确?

谢谢。

回答

1

我不完全确定问题的原因是什么,但我设法找到了解决方案。

我导入的SVG到:https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

我重新定向的路径,然后输出。

下SVG制作:

<svg width="1600" height="987" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
<metadata/> 
<g> 
    <title>Layer 1</title> 
    <path id="svg_1" d="m932.44098,173.05901l85.34198,0l0,62.58l-85.34198,0l0,-62.58z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_2" d="m743.1745,381.74323l62.07562,-62.07562l62.65472,62.65472l-62.07562,62.07562l-62.65472,-62.65472z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_3" d="m744.50299,548.14899l40.80103,0l0,43.13898l-40.80103,0l0,-43.13898z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_4" d="m1025.172,322.57101l53.71997,0l0,147.46899l-53.71997,0l0,-147.46899z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_5" d="m642.21399,721.36902l93.91699,0l0,94.133l-93.91699,0l0,-94.133z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_6" d="m653.42999,530.74902l62.58002,0l0,84.03503l-62.58002,0l0,-84.03503z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_7" d="m523.24103,211.666l52.12201,0l0,47.644l-52.12201,0l0,-47.644z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_8" d="m867.25897,547.14899l201.95197,0l0,28.19897l-201.95197,0l0,-28.19897z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_9" d="m653.42999,432.87201l62.58002,0l0,84.03503l-62.58002,0l0,-84.03503z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_10" d="m653.42999,334.59201l62.58002,0l0,84.035l-62.58002,0l0,-84.035z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_11" d="m833.95099,173.05901l85.34198,0l0,62.58l-85.34198,0l0,-62.58z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_12" d="m736.151,173.05901l85.34198,0l0,62.58l-85.34198,0l0,-62.58z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_13" d="m638.35199,173.05901l85.34198,0l0,62.58l-85.34198,0l0,-62.58z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_14" d="m1027.88196,171.589l40.80103,0l0,43.13899l-40.80103,0l0,-43.13899z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_15" d="m586.82202,171.589l40.80103,0l0,43.13899l-40.80103,0l0,-43.13899z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_16" d="m879.28729,369.35007l-62.65546,-62.65546l62.07422,-62.07417l62.6554,62.65544l-62.07416,62.07419z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_17" d="m879.43805,394.32544l62.65405,62.65402l-62.07635,62.07632l-62.65399,-62.65402l62.07629,-62.07632z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
    <path id="svg_18" d="m953.88336,319.27084l62.65399,62.65402l-62.07562,62.07559l-62.65399,-62.65399l62.07562,-62.07562z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#94D4EA"/> 
</g> 
</svg> 

这似乎与很好地工作。

+0

发布在第二行的链接已过期,请你更新你的答案。 – aravind 2017-03-23 05:46:31