Question

我目前正在尝试在HTML应用程序中显示嵌入式SVG。 SVG是从Microsoft Visio导出的大文件。在浏览器中以SVG格式打开时，它可以正确显示，但是粘贴到任何HTML页面元素中时，它就会消失。

我尝试将SVG链接为对象，Img或iFrame，但是SVG具有可点击的链接，而执行这3个操作并不能保持可点击的链接。

我还将jQuery库和其他SVG一起使用，以在SVG上平移和缩放。为了获得更好的用户体验，我在导航到链接之前显示了一个模式，并希望对此进行维护。

请查看问题的图片。这只是SVG的图片 Old SVG 这是inline SVG的图片。如您所见，缺少几个区域。

请注意，SVG大约有100,000行代码，因此几乎不可能通过梳理来找到问题，并且出于隐私目的，我不能在此处共享SVG。如果您遇到此问题或有解决方法的想法，将不胜感激！

这是我的代码段（HTML和JavaScript）

$section.find('.panzoom').panzoom({

        $zoomIn: $section.find(".zoom-in"),
        $zoomOut: $section.find(".zoom-out"),
        $zoomRange: $section.find(".zoom-range"),
        $reset: $section.find(".reset"),
        transition: false,
        increment: 1,
        minScale: 1,
        maxScale: 12,
        exponential: false,
        contain: 'automatic',
        onEnd: function(e, panzoom, matrix, changed) {
           
            if (changed) {
     
                    $("section a").each(function(){
                        $(this).on("click touchstart", function(e){
                            if(e.type  =='touchstart'){
                                 $('#myModal').show();
 
                                hrefValue = $(this).attr("xlink:href");
                                $('.alert').text("You are navigating to the following external site " + hrefValue + " would you like to continue?");

                                e.preventDefault();

                                $('.okBtn').click(function() {
                                    window.open(hrefValue);
                                   
                                    $('.modal').hide();

                                });

                                $('.cancelBtn').click(function() {

                                    $('.modal').hide();


                                });
                            }
                            if(e.type == "click"){
                                e.preventDefault();
                                $('#myModal').hide();

                                return false;
                            }
                           
                             
                             
                        });
                    });
                
            } else {
               
                $("section a").each(function(){
                    
                    $(this).on('click touchstart', function(e){

                       
                        $('#myModal').show();
                        // alert("Tapped");
                        hrefValue = $(this).attr("xlink:href");
                        $('.alert').text("You are navigating to the following external site " + hrefValue + " would you like to continue?");

                        e.preventDefault();

                        $('.okBtn').click(function() {
                            window.open(hrefValue);
                            // event.preventDefault();
                            $('.modal').hide();

                        });

                        $('.cancelBtn').click(function() {

                            $('.modal').hide();


                        });

                    });


                });
    
            }




        }
        

    });

<div class="parent">
      <div class="map-container panzoom">
        {% include 'digitalmap/CyberNB.svg' %}
       <!-- <object class='map-container panzoom' style='width:100%; height:100vh;' type="image/svg+xml" data="{% static 'digitalmap/imgs/CyberNB.svg' %}" target="_blank"></object> -->
      </div>
</div>

SVG内联不呈现所有元素

0 个答案: