[英]css vh vw and svg rectangle in Safari
I am trying to create a responsive svg layout for presentations that uses the same aspect as powerpoint or keynote (1024 x 768). 我正在尝试为演示文稿创建一个响应式svg布局,该布局使用与PowerPoint或基调(1024 x 768)相同的外观。 I use the following code which works fine in chrome but not in Safari (see attached snapshots).
我使用以下代码,这些代码在chrome中可以正常使用,但在Safari中则无法使用(请参见附件快照)。 I am on mbp 13 touch bar and Safari 11.
我正在使用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>
You shouldn't be messing with the body. 你不应该弄乱身体。 Why don't you try creating a container and apply those values to the container instead?
为什么不尝试创建容器并将这些值应用到容器呢? Try using the following code:
尝试使用以下代码:
html,
body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.container {
width:100vw;
height:50vh;
}
Here is a working fiddle: https://jsfiddle.net/6n4yLv4f/ 这是一个工作的小提琴: https : //jsfiddle.net/6n4yLv4f/
edit: I realized what you wanted as soon as I posted my previous reply in the comments. 编辑:我在评论中发布了我的上一个回复后就意识到您想要什么。 Here is the correct solution you are after:
这是您追求的正确解决方案:
Use viewBox
attribute as follows: 使用
viewBox
属性,如下所示:
<svg id='mainSVG' viewBox="0 0 1024 768" height="100%"></svg>
And use this css: 并使用此CSS:
svg {
background: white;
margin: 0 auto;
display: block;
}
Here is also a working fiddle. 这也是一个工作的小提琴。 You were using the
viewBox
attribute wrong that was the problem... 您使用的
viewBox
属性错误是问题所在...
https://jsfiddle.net/6n4yLv4f/2/ https://jsfiddle.net/6n4yLv4f/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.