デバイス/画面サイズでのSVGスケーリングの問題

SVGタグを使用してページの一部をカバーする「異常な」ポリゴンを作成しようとしています。しかし、私がページを拡大縮小すると、オブジェクトは表示されなくなります。スケーリングの際にSVGを見えるようにするにはどうすればよいですか？デバイス/画面サイズでのSVGスケーリングの問題

乾杯

.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; 
 
}

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

出典

2016-07-05 James Milner

これは、幅/高さとそのビューボックスの値のサイズを変更するためのJavaScriptのビットを用いて達成することができます。以下の例を参照してください。支援のための

<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>

出典

2016-07-05 15:23:14

感謝。しかし、私はSVGの配置を右に位置するように調整することができますか？私が調整しようとするとき、SVGの値はページの中央に非常に近いままです。 –

@Fjcym - はい、試してください：var bbx = bb.x-300または、プレースメントが好きになるまで、300ではなくオフセット値を含めることができます。 –

デバイス/画面サイズでのSVGスケーリングの問題

答えて

関連する問題