如何将SVG转换为jVectorMap格式 [英] How to convert SVG to jVectorMap format

问题描述

我有以下要转换的SVG数据。

I have the following SVG data that I would like to convert.

<?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格式有问题吗？我正在使用Adobe Illustrator 5.5来生成SVG。

There is an online SVG converter found at "http://svgto.jvectormap.com/" but this returns me blank. Is there something wrong with my SVG format? I am using Adobe Illustrator 5.5 to generate the SVG.

典型的Jvector地图具有以下语法：

A typical Jvector map has the following syntax:

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转换为上面正确的格式？

Any ideas how I can convert my SVG to the correct format above?

谢谢。

推荐答案

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

I'm not totally sure what was the cause of the issue but I managed to find a solution.

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

我重新定向路径然后导出。

I reoriented the paths and then exported.

生成以下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>

它看起来效果很好。

这篇关于如何将SVG转换为jVectorMap格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！