Question

我试图制造一个异常的＆＃39;使用SVG标记覆盖我页面的一部分的多边形。但是，当我缩放页面时，对象会从视图中消失。在缩放时如何使SVG保持可见？

干杯

＆＃13;

.about {
    /* Keeps the div fixed in one position */
    position: fixed;
    /* Removes White surrounding boxes */
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    /* Sets the Width and height of the div, and the background colour */
    width: 100vw;
    height: 100vh;
    background: #141311;
} 

svg {
    width: 100vw;
    height: 100vh;
}

＆＃13;

<div class="about">
    <svg height="100%" width="100%">
        <path d="M1000 0 L1280 0 L1280 700 L900 700 Z"  fill="#FEFEFA"  />
    </svg>
</div>

＆＃13;

Answer 1

这可以通过一些javascript来完成，以调整其宽度/高度及其viewBox值。请参阅下面的示例。

<head>
  <title>Untitled</title>
<style type="text/css">
<!--
.about {
    /* Keeps the div fixed in one position */
    position: fixed;
    /* Removes White surrounding boxes */
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    /* Sets the Width and height of the div, and the background colour */
    width: 100vw;
    height: 100vh;
    background: blue;
}
-->
</style>
</head>

<body>
<div class="about">
    <svg>
        <path d="M1000 0 L1280 0 L1280 700 L900 700 Z"  fill="red"  />
    </svg>
</div>
</body>
<script>
//--onload, onresize----
function sizeFull()
{
    var mySVG=document.getElementsByTagName("svg")[0]
    var svgW=window.innerWidth
    var svgH=window.innerHeight
    var bb=mySVG.getBBox()
    var bbx=bb.x
    var bby=bb.y
    var bbw=bb.width
    var bbh=bb.height

        mySVG.setAttribute("viewBox",bbx+" "+bby+" "+bbw+" "+bbh )
        mySVG.setAttribute("width",svgW)
        mySVG.setAttribute("height",svgH)
}
sizeFull(); //---init window---
document.addEventListener("onload",sizeFull(),false)
window.onresize=sizeFull
</script>

跨设备/屏幕尺寸的SVG扩展问题

1 个答案: