Question

我正在尝试为使用与powerpoint或keynote（1024 x 768）相同方面的演示文稿创建响应式svg布局。我使用以下代码在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>

的Safari

铬

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

1 个答案: