Javascript SVG错误答案

【问题标题】：Javascript SVG errorJavascript SVG错误
【发布时间】：2014-06-28 12:22:39
【问题描述】：

我有一系列用 jquery 显示的 SVG 地图。当您转到第一页时，美国地图显示在左侧，初始状态显示在右侧，县域属性突出显示。如果单击任何其他状态，然后返回原始状态，则属性已消失。当用户单击左侧的州时，如何更改此处的代码以使右侧显示每个州的属性？我不希望属性消失。这是代码和正在发生的事情的屏幕截图。在第三个屏幕上，我需要像第一个屏幕一样显示属性。

-----代码-----

<script type="text/javascript">

            $('#mapsvg-usa').mapSvg({source: 'maps/usa.svg', width: 1200, responsive: 1,
            colors: {background: 'transparent', hover: 4, selected: 10, stroke: '#ffffff'},
            tooltipsMode: 'names',
            regions: {'CO': {selected: true}},
            onClick: function(){

               var file = 'usa-'+this.name.toLowerCase()+'.svg';

               console.log($('#mapsvg-states').html());

               if($('#mapsvg-states').find('svg').length){
                $('#mapsvg-states').mapSvg().destroy();
               }

               $('#mapsvg-states').mapSvg({
                    source : 'maps/counties/'+file,
                    //responsive: 1,
                    colors: {background: 'transparent', base: "#DDDDDD", stroke: '#ffffff'},
                    width: $('#mapsvg-usa').width(),
                    height: $('#mapsvg-usa').height(),
                    tooltipsMode: 'combined',
                    zoomButtons: {show: true, location: 'right'},
                    zoom: 1,
                    pan: 1
               });

            }
            });

           $('#mapsvg-states').mapSvg({
                source : 'maps/counties/usa-co.svg',
                responsive: 1,
                colors: {background: 'transparent', stroke: '#ffffff'},
                width: $('#mapsvg-usa').width(),
                tooltipsMode: 'names',
                zoomButtons: {show: true, location: 'right'},
                zoom: 1,
                pan: 1,
                regions: {
                    Douglas: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}},
                    Jefferson: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}}}
           });


        </script>

        <script type="text/javascript">

            $('#maplinks a').on('click', function(e){
               e.preventDefault();
               var file = $(this).attr('data-svg');


               if($('#mapsvg-other').find('svg').length){
                $('#mapsvg-other').empty().mapSvg().destroy();
               }

               $('#mapsvg-other').mapSvg({
                    source : 'maps/'+file,
                    responsive: 1,
                    width: $('#mapsvg-other-cont').width(),
                    height: $('#mapsvg-other-cont').height(),
                    tooltipsMode: 'names',
                    zoomButtons: {show: true, location: 'left'},
                    zoom: 1,
                    pan: 1
               });

            });

        </script>

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

单击某个州时正在加载的地图不像最初加载的地图那样包含区域数据。将区域代码复制到其中

regions: {
             Douglas: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}},
             Jefferson: {tooltip: 'RFC Submitted', attr: {fill: '#fc0'}}
}

希望对您有所帮助。

【讨论】：