尝试根据SVG文件中的标记创建两个数组

时间:2018-05-09 18:48:38

标签: javascript php svg

我有一个美国的SVG文件,我正在尝试从ID和Class标签获取的状态和区域中创建数组。我在php和js工作。我必须将文件拉入我使用file_get_contents(usa.svg)执行的map.php文件中。我想让它像json数据一样格式化。我包含了一些SVG文件来显示我想要做的事情。任何帮助表示赞赏谢谢。如果可能,我试图使区域数组类似于字典,其中状态为区域的值(键)。

以下代码:

    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 889.43 574.7">
        <defs>
            <style>
                .northEast,
                .south,
                .southWest,
                .middleWest,
                .farWest,
                .cls-2 {
                    fill: #303a56;
                }
                .northEast,
                .south,
                .southWest,
                .middleWest,
                .farWest {
                    stroke: #fffaf3;
                    stroke-width: 1px;
                }
                .cls-2,
                .cls-3 {
                    stroke: #303a56;
                }
                .cls-2 {
                    opacity: 0.1;
                }
                .cls-3 {
                    fill: none;
                    opacity: 0.2;
                }
            </style>
        </defs>
        <title>USMap</title>
        <g id="map">
            <g id="northEast">
                <g id="newHampshire">
                    <path id="newHampshire_" data-name="NH" class="northEast" d="M924.22,441.8l0.73-.9,0.91-2.75-2.13-.76-0.41-2.57-3.25-.95-0.27-2.3-6.09-19.62-3.85-12.17h-0.75l-0.54,1.35-0.54-.41-0.81-.81L906,401.53l0,4.21,0.26,4.74,1.62,2.3v3.38l-3.11,4.24-2.16.95v0.95l0.95,1.49V431l-0.68,7.71-0.14,4.06,0.81,1.08-0.14,3.79L903,449.09l0.81,0.59,14.05-3.7,1.82-.5,1.54-2.32,3-1.35h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="vermont">
                    <path id="vermont_" data-name="VT" class="northEast" d="M893.82,451.54l0.27-4.47-2.42-9-0.54-.27-2.44-1.08,0.68-2.44-0.68-1.76-2.26-3.88,0.81-3.25L886.56,421l-2-5.41-0.67-4.12L906,405.86l0.26,4.62,1.6,2.3v3.38l-3.1,4.23-2.16,1v0.94l1.1,1.27-0.26,6.78-0.51,7.75-0.19,4.65,0.81,1.08-0.14,3.83L903,449.06l0.85,0.61-6.23,1.26-3.77.61h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="maine">
                    <path id="maine_" data-name="ME" class="northEast" d="M959.4,388.57l1.62,1.76,1.89,3.11v1.62L961.16,399l-1.62.54-2.84,2.57-4.06,4.6h-1.08c-0.54,0-.81-1.76-0.81-1.76l-1.49.14-0.81,1.22-2,1.22-0.81,1.22L947,410l-0.41.54-0.41,2.3-1.62-.14v-1.35l-0.27-1.08-1.22.27-1.49-2.71-1.76,1.08,1.08,1.22,0.27,0.95-0.68,1.08,0.27,2.57,0.14,1.35-1.35,2.17-2.44.41L936.81,421l-4.47,2.57-1.08.41-1.35-1.22-2.57,3,0.81,2.71-1.22,1.08-0.14,3.65-0.94,5.24-2.06-1-0.41-2.57-3.25-.95-0.27-2.3-6.09-19.62-3.93-12.25,1.19-.1L912.3,400v-2.17l1.1-3.76,2.16-3.92,1.22-3.38-1.62-2v-5l0.68-.81,0.68-2.3-0.14-1.22-0.14-4.06,1.49-4.06,2.44-7.44,1.76-3.52H923l1.08,0.14v0.95l1.08,1.89,2.3,0.54,0.68-.68V358.4l3.38-2.44,1.49-1.49,1.22,0.14,5,2,1.62,0.81,7.58,25h5l0.68,1.62,0.14,4.06,2.44,1.89h0.68l0.14-.41-0.41-.95,2.3-.14h0Zm-17.52,25.23,1.29-1.29,1.15,0.88,0.47,2-1.42.74Zm5.62-4.94,1.49,1.56s1.08,0.07,1.08-.2,0.2-1.69.2-1.69l0.74-.68-0.68-1.49-1.69.61Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="rhodeIsland">
                    <path id="rhodeIsland_" data-name="RI" class="northEast" d="M918.58,472.33l-3.09-12.52,5.25-1.54,1.83,1.61,2.77,3.62,2.25,3.68-2.51,1.36L924,468.4,923,469.89l-2,1.62-2.44.81h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="newYork">
                    <path id="newYork_" data-name="NY" class="northEast" d="M882,480.57l-0.95-.81-2.17-.14L877,478l-1.36-5.13-2.89.08-2-2.27-16.23,3.67-36,7.31-6.3,1-0.62-5.41,1.2-.94,1.08-.95,0.81-1.35,1.49-.95,1.62-1.49,0.41-1.35,1.76-2.3,0.95-.81-0.14-.81-1.08-2.57-1.49-.14-1.62-5.14L819,457l3.65-1.22,3.38-1.08,2.71-.41,5.28-.14,1.62,1.08,1.35,0.14,1.76-1.08,2.16-.95,4.33-.41,1.76-1.49,1.49-2.71,1.35-1.62h1.76l1.62-.95,0.14-1.89-1.22-1.76-0.27-1.22,0.95-1.76v-1.22h-1.49l-1.49-.68-0.68-.95L849,434.52l4.87-4.6,0.54-.68,1.22-2.44,2.44-3.79,2.3-3.11,1.76-2,2-1.53,2.58-1,4.6-1.08,2.71,0.14,3.79-1.22,6.33-1.73,0.44,4.17,2,5.41,0.68,4.33-0.81,3.25,2.16,3.79,0.68,1.76-0.68,2.44,2.44,1.08,0.54,0.27,2.57,9.2-0.45,4.24-0.41,9.07L894,465l0.68,3,1.22,6.09v6.77L895,482.73l1.54,1.67,0.67,1.4-1.62,1.49,0.27,1.08,1.08-.27,1.22-1.08,1.89-2.17,0.95-.54,1.35,0.54,1.89,0.14,6.63-3.25,2.44-2.3,1.08-1.22,3.52,1.35-2.84,3L911.81,485l-6,4.47-2.16.81-4.87,1.62-3.38.95-1-.45-0.2-3.09,0.41-2.3-0.14-1.76-2.35-1.42-3.79-.81-3.25-.95L882,480.57h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="pennsylvania">
                    <path id="pennsylvania_" data-name="PA" class="northEast" d="M877.61,510.66l1.1-.23,1.95-1,1-2.08,1.35-1.89,2.71-2.57v-0.68l-2-1.35-3-2-0.81-2.17-2.3-.27-0.14-.95-0.68-2.3,1.89-.95,0.14-2L877.75,489l0.14-1.35,1.62-2.57v-2.57l2.26-2.21-0.77-.56-2.11-.16L877,478l-1.3-5.12-2.93.08-2.06-2.26-15.14,3.51-36,7.31-7.44,1.22-0.52-5.46-4.49,4.24-1.08.41-3.52,2.52,2.44,16,2.08,8.14,3,16.12,2.74-.53,10-1.26,31.75-6.42,12.45-2.36,6.95-1.36,0.22-.2,1.76-1.35,1.76-.57h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="newJersey">
                    <path id="newJersey_" class="northEast" d="M881.43,480.33l-1.94,2.29v2.57l-1.62,2.57-0.14,1.35,1.08,1.08-0.14,2-1.89.95,0.68,2.3,0.14,0.95,2.3,0.27,0.81,2.17,3,2,2,1.35v0.68l-2.5,2.26-1.35,1.89-1.22,2.3-1.89,1.08-0.39,1.34-0.2,1L877.65,515l0.91,1.88,2.71,2.44,4.06,1.89,3.38,0.54,0.14,1.22-0.68.81,0.27,2.3h0.68l1.76-2,0.68-4.06,2.3-3.38,2.57-5.41,0.95-4.6-0.54-.95-0.14-7.85L895.34,495l-0.95.68-2.3.27-0.41-.41,0.95-.81,1.76-1.62,0.05-.92-0.32-2.87,0.48-2.3-0.1-1.65-2.35-1.47-4.26-1-3.46-1.16-3-1.38h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="connecticut">
                    <path id="connecticut_" class="northEast" d="M918.58,472.3l-3.08-12.45-3.95.77-17.77,4,0.84,2.7,1.22,6.09,0.15,7.51-1,1.82,1.61,1.62,3.58-3.27,3-2.71,1.62-1.76,0.68,0.54,2.3-1.22,4.33-.95,6.52-2.66h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="massachusetts">
                    <path id="massachusetts_" class="northEast" d="M940,467.61l1.82-.57,0.38-1.44,0.86,0.1,0.86,1.91-1.05.38-3.25.1,0.38-.48h0Zm-7.85.67,1.91-2.2h1.34l1.53,1.24-2,.86-1.82.86-1-.77h0ZM903,449.87L917.77,446l1.89-.54,1.6-2.34,3.13-1.39,2.42,3.69-2,4.33L924.51,451l1.62,2.17,0.95-.68h1.49l1.89,2.17,3.25,5,3,0.41,1.89-.81,1.49-1.49-0.68-2.3-1.76-1.35-1.22.68-0.81-1.08,0.41-.41,1.76-.14,1.49,0.68,1.62,2,0.81,2.44,0.27,2-3.52,1.22-3.25,1.62L932,466.92l-1.62,1.22v-0.81l2-1.22,0.41-1.49-0.68-2.57-2.44,1.22L929,464.49l0.41,1.89-1.73.84-2.3-3.79-2.84-3.65-1.73-1.52-5.47,1.57-4.26.88-17.31,3.84-0.56-4,0.54-8.86,3.59-.74,5.68-1.08h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
            </g>
                <g id="sp">
                    <path id="sp_" class="middleWest" d="M1943.38-909l1.53-1.72,1.82-.67,4.5-3.25,1.91-.48,0.38,0.38-4.31,4.31-2.77,1.63-1.72.77-1.34-1h0Zm72.13,26.89,0.54,2.1,2.71,0.14,1.08-1a2.83,2.83,0,0,0-.34-1.35,12.18,12.18,0,0,1-1.35-1.56l-1.83.2-1.35.14-0.27.95,0.81,0.41h0Zm-84-2.49,0.6-.49,2.3-.68,3-1.89v-0.81l0.54-.54,5-.81,2-1.62,3.65-1.76,0.14-1.08,1.62-2.44,1.49-.68,1.08-1.49,1.89-1.89,3.65-2,3.92-.41,0.95,0.95-0.27.81-3.11.81-1.22,2.57-1.89.68-0.41,2-2,2.71-0.27,2.17,0.68,0.41,0.81-.95,3-2.44,1.08,1.08h1.89l2.71,0.81,1.22,0.95,1.22,2.57,2.3,2.3,3.25-.14,1.22-.81,1.35,1.08,1.35,0.41,1.08-.68h0.95l1.35-.81,3.38-3,2.84-.95,5.55-.27,3.79-1.62,2.16-1.08,1.22,0.14v4.74l0.41,0.27,2.44,0.68,1.62-.41,5.14-1.35,0.95-.95,1.22,0.41v5.82l2.71,2.57,1.08,0.54,1.08,0.81-1.08.27-0.68-.27-3.11-.41-1.76.54-1.89-.14-2.71,1.22h-1.49l-4.87-1.08-4.33.14-1.62,2.17-5.82.54-2,.68-0.95,2.57-1.08.95-0.41-.14-1.22-1.35-3.79,2h-0.54l-0.95-1.35-0.68.14-1.62,3.65-0.81,3.38-2.66,5.86-1-.87-1.15-.86-1.62-8.61-3-1.15-1.72-1.91-10.14-2.3-2.39-.86-6.89-1.82-6.6-1-3.11-4.31h0Z" transform="translate(-1343.28 971.5)"/>
                </g>
                <g id="ohio">
                    <path id="ohio_" class="middleWest" d="M802.45,484.41l-5.1,3.39-3.25,1.89-2.84,3.11-3.38,3.25-2.71.68-2.44.41-4.6,2.17-1.76.14-2.84-2.57-4.33.54L767,496.19l-2-1.13-4.1.59L752.43,497,743,498.83l1.08,12.25,1.49,11.5,2.16,19.62,0.47,4,3.45-.11,2-.68,2.82,1.26,1.73,3.65h4.3l1.58,1.77,1.47-.05,2.12-1.12,2.1,0.31,4.54,0.4,1.45-1.79,2-1.08,1.73-.57,0.54,2.3,1.49,0.81,2.91,2,1.83-.07,1.12-.41,0.15-2.31,1.33-1.22,0.08-4,0.86-3.44,1.09-.5,1.11,1,0.45,1.42,1.44-.87,0.37-1.22L793.36,540l0.06-1.94,0.63-.9,1.8-2.77,0.88-1.29,1.76,0.41,1.89-1.35,2.57-2.84,2.32-3.41,0.27-4.23,0.41-4.19-0.15-4.44-0.8-2.42,0.29-1,1.51-1.46-1.92-7.57-2.44-16.21h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="indiana">
                    <path id="indiana_" class="middleWest" d="M705.56,573.67l0.05-2.39,0.41-3.79,1.89-2.44,1.49-3.25,2.16-3.52-0.41-4.87-1.49-2.3-0.27-2.71,0.68-4.6L709.68,538l-1.08-13.4-1.08-12.85-0.81-9.81,2.57,0.74,1.22,0.81,0.95-.27,1.76-1.62,2.37-1.35,4.26-.14,18.4-1.89,4.67-.45,1.26,13.36L747.71,542l0.5,4.83-0.31,1.89,1,1.5,0.08,1.15-2.11,1.34-3,1.3-2.68.46-0.5,4.07-3.83,2.77-2.34,3.36,0.27,2-0.49,1.28h-2.78l-1.33-1.35-2.09,1.06-2.25,1.26,0.14,2.56-1,.22-0.39-.85-1.81-1.26-2.72,1.12-1.3,2.52-1.2-.68-1.22-1.34-3.74.41-4.68.81-2.44,1.3h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="illinois">
                    <path id="illinois_" class="middleWest" d="M705.54,574l0-2.7,0.47-3.89,2-2.44,1.56-3.41,1.87-3.34-0.31-4.4-1.68-3-0.08-2.8,0.58-4.41-0.69-6-0.89-13.21-1.08-12.57-0.77-9.74-0.23-.77-0.68-2.17L704.51,496l-1.35-1.49-1.22-2.17-0.2-4.59L663.41,490l0.19,2,1.91,0.57,0.77,1,0.38,1.53,3.25,2.87,0.57,1.91-0.57,2.87-1.53,3.06-0.57,2.1-1.91,1.53-1.53.57-4.4,1.15-0.57,1.53-0.57,1.72,0.57,1.15,1.53,1.34-0.19,3.44-1.53,1.34L658.63,523v2.3l-1.53.38-1.34,1-0.19,1.15,0.19,1.72-1.44,1.1-0.86,2.34,0.38,3.06,1.91,6.12,6.12,6.31,4.59,3.06-0.19,3.64,0.77,1.15,5.36,0.38,2.3,1.15-0.57,3.06-1.91,5-0.57,2.68,1.91,3.25,5.36,4.4,3.83,0.57,1.72,4.21,1.72,2.68-0.77,2.49,1.34,3.44,1.53,1.72,1.18-.74,0.76-1.74,1.85-1.46,1.78-.51,2.18,1,3,1.15,1-.25,0.17-1.89-1.08-2,0.25-2,1.54-1.13,2.53-.68,1.06-.38L704,579.46l-0.66-2,1.2-.82,1-2.69h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="wisconsin">
                    <path id="wisconsin_" class="middleWest" d="M701.79,487.79l-0.06-2.64-1-3.79-0.54-5.14-0.95-2,0.81-2.57,0.68-2.44L702,467l-0.54-2.84-0.54-3,0.41-1.49,1.62-2,0.14-2.3-0.68-1.08,0.54-2.17-0.38-3.49,2.3-4.74,2.44-5.68,0.14-1.89-0.27-.81-0.68.41-3.52,5.28-2.3,3.38L699,446.07,698.34,448l-1.64.68-0.95,1.62-1.22-.27-0.14-1.49,1.08-2,1.76-3.92,1.49-1.35,0.83-2-2.14-1.59L695.77,429l-3-1.12-1.63-1.93L681,423.62l-2.41-.85L671.73,421l-6.63-1L662,415.7l-0.63.46-1-.14-0.54-.95-1.12.25-0.95.14-1.49.81-0.81-.54,0.54-1.62,1.62-2.57,0.95-.95-1.62-1.22-1.76.68-2.44,1.62-6.22,2.71-2.44.54-2.44-.41-0.82-.74L639,416.15l-0.19,2.3v7.08l-1,1.34-4.4,3.25-1.91,5,0.38,0.19L634,437l0.57,2.68-1.53,2.68v3.25l0.38,5.55,2.49,2.49h2.87l1.53,2.68,2.87,0.38,3.25,4.78,5.93,3.44,1.72,2.3,0.77,6.22,0.57,2.77,1.91,1.34,0.19,1.15-1.72,2.87,0.19,2.68,2.1,3.25,2.1,1,2.49,0.38,1.12,1.16,37.92-2.23h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="missouri">
                    <path id="missouri_" class="middleWest" d="M654.39,530.27l-2.11-2.58-1-1.91-53.87,2-1.91.1,1.05,2.1-0.19,1.91,2.1,3.25,2.58,3.44,2.58,2.3,1.81,0.19,1.25,0.77v2.49l-1.53,1.34-0.38,1.91,1.72,2.87,2.1,2.49,2.1,1.53,1.15,9.76,0.26,30.19,0.19,3.92,0.38,4.51,18.78-.73,19.42-.57,17.41-.67,9.76-.19,1.82,2.87-0.57,2.77-2.58,2-0.48,1.54,4.5,0.38,3.26-.57,1.44-4.6,0.55-4.9L687.8,598,690,596.8l0-2.55,0.85-1.62-1.42-2.13-1.11.82-1.67-1.86-1.08-4,0.67-2.11-1.63-2.87-1.53-3.83-4-.67-5.83-4.69-1.44-3.44,0.67-2.68,1.72-5.07,0.38-2.4-1.63-.86-5.74-.67-0.86-1.43-0.09-3.54-4.59-2.87-5.84-6.5-1.91-6.12-0.19-3.54,0.67-1.92h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="iowa">
                    <path id="iowa_" class="middleWest" d="M663.39,489.65l0.22,2.33,1.86,0.48,0.8,1,0.42,1.55,3.17,2.81,0.57,2-0.56,2.87-1.32,2.71-0.67,2.29-1.82,1.34-1.44.48L660,511.1l-1.16,3.22,0.61,1.15,1.54,1.41-0.24,3.38-1.48,1.29-0.65,1.38,0.11,2.32-1.58.38-1.36.92-0.23,1.13,0.23,1.77-1.3.93-2.07-2.62-1.06-2.05-55,2.1-0.77.14-1.72-3.78-0.19-5.55-1.34-3.44-0.57-4.4-1.91-3.06-0.77-4-2.3-6.31-1-4.5-1.15-1.82-1.34-2.3,1.64-4.05,1.15-4.78-2.3-1.72-0.38-2.3,0.77-2.1h1.44l69.18-1.06,0.7,3.5,1.89,1.31,0.21,1.19-1.7,2.84,0.16,2.68,2.1,3.18,2.11,1.08,2.58,0.42,0.55,0.7h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="minnesota">
                    <path id="minnesota_" class="middleWest" d="M584.75,430.42l-0.38-7.08-1.53-6.12-1.53-11.29-0.38-8.23-1.53-2.87-1.34-4.21V382l0.57-3.25-1.52-4.56,25.22,0,0.27-6.9,0.54-.14,1.89,0.41,1.62,0.68,0.68,4.6,1.22,5.14,1.35,1.35H614l0.27,1.22,5.28,0.27v1.76h4.06l0.27-1.08,0.95-.95,1.89-.54,1.08,0.81h2.44l3.25,2.17,4.47,2,2,0.41,0.41-.81,1.22-.41,0.41,2.44,2.16,1.08,0.41-.41,1.08,0.14v1.76l2.16,0.81h2.57l1.35-.68,2.71-2.71,2.16-.41,0.68,1.49,0.41,1.08h0.81l0.81-.68,7.44-.27,1.49,2.57h0.54l0.6-.91,3.72-.31-0.51,1.91-3.3,1.54-7.74,3.4-4,1.68L655,399.93l-2,3L651,406.15l-1.49.68L645.76,411l-1.08.14-3.62,2.31L639,416.15l-0.19,2.67,0.08,6.73L637.73,427l-4.25,3.15-1.87,5L634,437l0.57,2.7L633,442.4l0.14,3.14,0.31,5.63,2.53,2.51h2.79l1.58,2.62,2.83,0.42,3.23,4.75,5.93,3.45,1.79,2.41,0.56,5.39-68,1-0.28-29.86-0.38-2.49-3.44-2.87-1-1.53v-1.34l1.72-1.34,1.15-1.15,0.19-2.68h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="kansas">
                    <path id="kansas_" class="middleWest" d="M612.08,594.1l-10.56.17-38.58-.38-37.3-1.72L505,591.12,508.28,537l18.48,0.57,33.72,0.7,37.08,0.83h4.27l1.83,1.81,1.69,0,1.37,0.85-0.05,2.52-1.53,1.44-0.28,1.87,1.54,2.85,2.47,2.67,1.95,1.35,1.09,9.41,0.16,30.2h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="nebraska">
                    <path id="nebraska_" class="middleWest" d="M593.84,524.06l2.7,5.88-0.11,1.93,2.9,4.6,2.28,2.64h-4.23l-36.4-.79-34.14-.75-18.63-.66,0.9-17.85-27.05-2.44,3.64-36.84,13,0.86,16.84,1,14.93,1,19.9,1,9-.38L561.1,485l4,2.49,1,0.77,3.64-1.15,3.25-.38,2.3-.19,1.53,1.15,3.4,1.34,2.49,1.34,0.38,1.34,0.77,1.72h1.53l0.67,0,0.75,3.92,2.44,7.09,0.48,3.14,2.11,3.16,0.48,4.28,1.35,3.55,0.21,5.42h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="southDakota">
                    <path id="southDakota_" class="middleWest" d="M585.76,493.36l0-.49-2.42-4.06,1.56-3.94,1.25-4.93-2.33-1.74-0.32-2.3,0.66-2.14h2.67l-0.1-4.19-0.28-25.26-0.52-3.15-3.41-2.79-0.82-1.4-0.05-1.35,1.69-1.28,1.28-1.39,0.21-2.22L536,429.41l-45.87-2.89-4.46,53.31,12.21,0.76,16.7,1,14.85,0.78,19.9,1.09,10-.36L561,485l4.35,2.72,0.64,0.6,3.8-1.22,5.47-.51,1.4,1.12,3.52,1.34,2.47,1.37,0.33,1.24,0.87,1.88,1.87-.17h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
                <g id="northDakota">
                    <path id="northDakota_" class="middleWest" d="M584.81,430.5l-0.51-7.06-1.4-5.71-1.58-10.9-0.38-9.2-1.46-2.58L578,390.71l0-8.74,0.52-3.2L577,374.19l-24-.47-15.56-.54-22.19-1.08-19.21-1.79-5.85,56.23,46,2.8,48.6,1.16h0Z"
                        transform="translate(-73.62 -328.82)"/>
                </g>
            </g>

2 个答案:

答案 0 :(得分:0)

获取所有路径,然后缩减为class属性,将为您提供各种方式 - 最后由您决定如何格式化。

const dictionary = [...document.getElementsByTagName('path')].reduce((acc, state) => {
    acc[state.class] = acc[state.class] ? [...acc[state.class], state.id] : [state.id]
    return acc;
}, {})

希望我理解正确!

答案 1 :(得分:0)

您可以使用SimpleXML来解析SVG源,并遍历这些区域。循环遍历状态并推入阵列。最后,您可以使用json_encode()来获得预期的输出。

$data = [];
$xml = simplexml_load_file('usa.svg');
foreach ($xml->g->g as $region) {
    $region_name = (string)$region['id'];
    foreach ($region->g as $state) {
        $data[$region_name][] = (string)$state['id'];
    }
}
$json = json_encode($data);
echo $json ;

输出(类似):

{
   "northEast":["newHampshire","vermont","maine","rhodeIsland","newYork","pennsylvania","newJersey","connecticut","massachusetts"],
   "middleWest":["ohio","indiana","illinois","wisconsin"]
}

要对数据进行排序,您可以使用(json_encode()之前):

$data = array_map(function($arr) { sort($arr);  return $arr; }, $data);
ksort($data);