在Safari中的css vh vw和svg矩形

我正在嘗試爲使用與powerpoint或主題（1024 x 768）相同方面的演示文稿創建響應式svg佈局。我使用下面的代碼在Chrome中可以正常工作，但不在Safari中（請參閱附加的快照）。我MBP 13觸摸條上和Safari 11在Safari中的css vh vw和svg矩形

<!DOCTYPE html> 
<meta charset="utf-8"> 

<script src='https://d3js.org/d3.v4.min.js'></script> 

<style type='text/css'> 

body{ 
    margin:0; 
    display:block; 
    padding-top: 0px; 
    height: 100vh; 
    background: black; 
    font-family: Helvetica; 
} 

body svg { 
    /*border: 1px solid #C1543D;*/ /*for testing*/ 
    display:block; 
    margin: auto; 
} 

.background { 
    fill: white; 
} 

</style> 

<body> 
    <svg id='mainSVG' width='100%' height='100%' viewbox='0,0, 1024, 768'> 
    <rect x='0px' y='0px' width='100%' height='100%' class='background'></rect> 
    </svg> 
</body>

Safari瀏覽器

鉻

來源

2017-10-05 spyrostheodoridis

你試過從體內移除標籤的邊緣？ – Sacha

是的，它是一樣的 – spyrostheodoridis

也許你可以用javascript調整像素大小。我讀過很多關於Safari瀏覽器的其他錯誤，但沒有正確計算視口單元 – Sacha

你不應該與身體搞亂。爲什麼不嘗試創建容器並將這些值應用於容器？請嘗試使用下面的代碼：

html, 
body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
.container { 
    width:100vw; 
    height:50vh; 
}

這裏是工作提琴： https://jsfiddle.net/6n4yLv4f/

編輯：我意識到你一旦想要的東西，我貼我以前在評論中回覆。這是正確的解決方案，您是後：

使用viewBox屬性如下：

<svg id='mainSVG' viewBox="0 0 1024 768" height="100%"></svg>

，並使用此CSS：

svg { 
    background: white; 
    margin: 0 auto; 
    display: block; 
}

這裏也是一個工作提琴。您正在使用viewBox屬性錯誤的，這是問題...

https://jsfiddle.net/6n4yLv4f/2/

來源

2017-10-06 09:08:44 scooterlord

不幸的是，這不起作用，或者 – spyrostheodoridis

第二個想法我不確定你想實現什麼是可能的。你可以伸展一個SVG，因爲它接受CSS屬性，但不是像rect這樣的元素。儘管你在svg上使用viewBox屬性，你仍然可以保持矩形的比例。你究竟想達到什麼目的？ – scooterlord

我修改了這個問題，以反映我的實際目標 – spyrostheodoridis

回答

相關問題