Question

我有一个面板，我想嵌入一个SVG图像。点击面板主体后，我想打开一个显示svg图像全屏的模态窗口。

SVG图像的尺寸是多少，我希望它适合 - 通过压缩或拉伸 - 在面板和模态窗口中，这将是全屏的。

这是html

<div class="panel-body" data-toggle="modal" data-target="#myModal">
    <embed src="test.svg" id="testsvg" type="image/svg+xml"/>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Some Name</h4>
            </div>
            <div class="modal-body">
                <div class="svg-container">
                    <embed src="test.svg" id="testsvg" type="image/svg+xml"/>
                </div>
            </div>
        </div>  
    </div>
</div>

Answer 1

我从this library获得了帮助

这是一个例子

<div class="panel-body" id="SVGPanel">
    <embed src="1.svg"  id="testsvg" name="testsvg"     type="image/svg+xml"/><!--</object>-->
</div>

和java脚本

function elastic(newsvgPanelWidth)
        {

            var windowwidth = newsvgPanelWidth;//$(window).width();
            var windowheight = $(window).height();
            var imageheight;
            var imagewidth;

            var svgfile=document.getElementById("testsvg");
            var SvgDoc;
            SvgDoc=svgfile.getSVGDocument();
                if(SvgDoc==null)
                {
                    SvgDoc=svgfile.contentDocument;
                }
                alert("SVG contentDocument Loaded!"+SvgDoc);

            var allSvgElements = SvgDoc.getElementsByTagName('svg'); 

            for(var i = 0; i < allSvgElements.length; i++)
            {
                var element = allSvgElements[i];
                alert(element);
                if(element.getAttribute("width")!=null)
                {
                    imagewidth=element.getAttribute("width");
                }
                if(element.getAttribute("height")!=null)
                {
                    imageheight=element.getAttribute("height");
                }
            }

            $("#SVGPanel").width(windowwidth);
            $("#SVGPanel").height(windowheight);  

            var $section = $('#SVGPanel');
            var $elem =$section.find('#testsvg');

            var $panzoom = $elem.panzoom(
            {
                startTransform: 'scale(1.0)',
                maxScale: 100,
                increment: 0.5,
                contain: true
            }).panzoom('zoom', true);   

            var offsetwidth =1+ ((windowwidth-imagewidth)/imagewidth);
            var offsetheight = 1+((windowheight-imageheight)/imageheight); 
            var twidth = imagewidth*((offsetwidth-1)/2);
            var theight = imageheight*((offsetheight-1)/2); 


            $elem.panzoom("setMatrix", [ offsetwidth, 0, 0,offsetheight, twidth,theight ]);

            //$elem.panzoom("setMatrix", [1, 0, 0, 1, 0,0 ]);
            $elem.panzoom('option', 'contain', false);
        }

我做的是我获取了屏幕宽度和高度，找到了差异，从而增加了实际SVG文件的宽度和高度的百分比，并使用库来设置这些参数。

通过稍微调整和数学，svg图像将完全适合父组件。

在引导程序面板

1 个答案: