Safari中的CSS VH VW和SVG矩形

Question

我正在嘗試為演示文稿創建一個響應式svg布局，該布局使用與PowerPoint或基調（1024 x 768）相同的外觀。 我使用以下代碼，這些代碼在chrome中可以正常使用，但在Safari中則無法使用（請參見附件快照）。 我正在使用Mbp 13觸摸欄和Safari 11。

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

蘋果瀏覽器

鉻

Answer 1

你不應該弄亂身體。 為什么不嘗試創建容器並將這些值應用到容器呢？ 嘗試使用以下代碼：

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/

Safari中的CSS VH VW和SVG矩形

問題描述

1 個解決方案

解決方案1
0 2017-10-06 09:08:44

Safari中的CSS VH VW和SVG矩形

問題描述

1 個解決方案

解決方案1 0 2017-10-06 09:08:44

解決方案1
0 2017-10-06 09:08:44