我有以下要转换的SVG数据。
<?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>
在&#34; http://svgto.jvectormap.com/&#34;有一个在线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转换为上述正确格式的任何想法吗?
感谢。
答案 0 :(得分: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>
它似乎与之相配。