1

基本上，这里的目标是获取 SVG，如果的父包装器高度小于SVG，则它位于<object>调整大小。<object>现在发生的是 SVG 溢出......但是，SVG 在调整宽度时会做出响应。

这是我的 jquery的一部分，相对的部分。

var a = document.getElementById("theSVG");

    a.addEventListener("load",function(){
    var SVGfit = function() {
            var containerWidth;
            var containerHeight;

            if (typeof window.innerWidth != 'undefined') {
                containerWidth = $("#wrapper").width;
                containerHeight = $("#wrapper").height; //get the SVG wrapper container size
            }
            var svgTag = document.getElementsByTagName("svg")[0];
            var svgBox = svgTag.viewBox.baseVal;

            svgBox.setAttribute("viewBox","0 0 "+ containerWidth+ " "+containerHeight);
        }

        window.addEventListener("resize",SVGfit,false);

和我的 HTML：

<div id="wrapper">
    <section id="svg">
            <object data="MonroeJeff.svg" type="image/svg+xml" id="theSVG"></object>
    </section> <!--close svg-->
</div><!--close wrapper-->

我正在处理的网站的链接：http: //zadias.me/SVG/Monroe%20Jefferson/MonroeJeff.html

请注意，如果您根据高度调整窗口大小，SVG 会溢出，但包装边框会适应。

目标：根据父母的高度调整大小。

任何帮助表示赞赏。谢谢。

4

0 回答 0