Html 为什么设置视图宽度和高度不足以强制SVG元素的完整浏览器窗口渲染？_Html_Svg

Html 为什么设置视图宽度和高度不足以强制SVG元素的完整浏览器窗口渲染？

html svg

Html 为什么设置视图宽度和高度不足以强制SVG元素的完整浏览器窗口渲染？,html,svg,Html,Svg,问题我有以下html，其中我试图绘制一个SVG视口，其中包含一条与我的浏览器窗口大小相同的线： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

问题

我有以下html，其中我试图绘制一个SVG视口，其中包含一条与我的浏览器窗口大小相同的线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" 
    style="outline: 5px solid red" width="100vw" height="100vh">
        <line x1="0" y1="75%" x2="250" y2="50" stroke="black"/>
    </svg>
   </body>
</html>

添加块元素行为

根据以下svg的答案之一。这很好，但是简单地在css中包含

display:block

应该可以解决问题，但是这不起作用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            svg {
            box-sizing: border-box;
            border: 5px solid red;
            width: 100vw;
            height: 100vh;
            display: block;
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="75%" x2="250" y2="50" stroke="black" />
        </svg>
    </body>
</html>


文件
svg{
框大小：边框框；
边框：5px纯红；
宽度：100vw；
高度：100vh；
显示：块；
}

对某些答案的异议

我不明白为什么在这里必须使用

单位

只是提供相对于父元素的相对长度，在本例中，父元素是

主体

vw

和

vh

提供相对于视口窗口的长度，如中所述。在这个特定的应用程序中，我更关心的是视口窗口，而不是主体元素本身

我不明白为什么这里需要将body元素的边距设置为0。body元素包含svg块，但由于svg块是根据视图高度和宽度定义的，因此应导致body元素的独立宽度和高度行为

默认情况下，SVG元素以内联方式显示

添加css，并检查结果

svg {
  box-sizing: border-box;
  border: 5px solid red;
  width: calc(100vw - 10px - 8px);
  height: calc(100vh - 10px - 8px);
  display: block;
}

为

主体

标签去掉

边距

body {
    margin: 0;
}

将

svg

边框的显示类型替换为

边框

，以免违反

svg

的标称尺寸。将宽度设置为

宽度：100%

。并通过设置

display:block

使

svg

块化

svg {
    display: block;
    border: 5px solid red;
    width: 100%;
    ...
}

正文{
保证金：0；
}
svg{
显示：块；
框大小：边框框；
边框：5px纯红；
宽度：100%；
高度：100vh；
}


文件

谷歌Chrome的开发工具在这里非常方便。突出显示DOM中的

body

和

svg

元素，并检查浏览器中的项目，显示以下内容：

```
body
```
元素的默认边距大于0，但默认边框和填充看起来等于0
```
svg
```
元素的默认边距和填充等于0

svg

元素的默认边框在此为非零，因此在指定视口的

宽度和高度时需要边框框
行为


浏览器基本上是将body
元素的非零默认边距添加到我分配给svg
元素的100个视图高度和视图宽度。因此，在我的初始代码中，一个滚动条出现是有道理的
强制正文
元素上的零边距将删除我的SVG内容周围的所有无关空白，正如@s.kuznetsov和@Zia Ur Rehman所指出的，这将产生所需的输出。这是我最后得到的代码：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body{
                margin:0;
            }
            svg {
            box-sizing: border-box;
            border: 5px solid red;
            width: 100vw;
            height: 100vh;
            display: block;
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="75%" x2="250" y2="50" stroke="black" />
        </svg>
    </body>
</html>


文件
身体{
保证金：0；
}
svg{
框大小：边框框；
边框：5px纯红；
宽度：100vw；
高度：100vh；
显示：块；
}

我相信这个答案澄清了为什么我首先会得到一个滚动条，与其他答案相反。但是，出于礼貌，我会接受其他答案中的一个，因为它们允许我理解代码中发生的事情。
使用%
单位而不是vw
和vh
在CSS作品中为我使用%
使svg占据整个宽度，但不是全高。@user32882 HTML页面默认情况下有页边距：8px
，您会溢出，因为SVG元素是100%屏幕宽度，而正文只能包含“100vw-16px”或“100%视口宽度-左右边距”的元素。您可以使用width:calc（100vw-16px）；高度：计算（100vh-16px）但您追求的是大多数人设置为0的正文边距width:100%
计算相对于父级的值，而100vw
根据屏幕大小获取一个绝对值——它们是两个截然不同的值。或者，使用svg{margin:-8px}
进行偏移，但这被认为是一种错误，最好知道svg元素是块元素。但是，我不明白为什么必须将body
元素的margin
设置为0。使用border box
和100vw
/100vh
应该足够了。默认情况下，主体包含一些边距，因此当我们应用100vh或100vw时，页面滚动的边距原因应该通过强制border box
行为来处理。如果您使用%而不是vh
或vw
则不需要修改主体
元素边框框
将起作用。请选中“编辑到原始问题”是否可以请您解释为什么需要将正文
边距设置为0才能使其生效？还有，为什么我不能在我的svg
元素中将display
类型设置为block
，而不是嵌套在新的div
元素中呢？@user32882，我没有div，但是我的解决方案还没有完全准备好。我正在寻找一个理想的解决方案，该解决方案只会操作svg元素……您似乎仍然是manip
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body{
                margin:0;
            }
            svg {
            box-sizing: border-box;
            border: 5px solid red;
            width: 100vw;
            height: 100vh;
            display: block;
            }
        </style>
    </head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="75%" x2="250" y2="50" stroke="black" />
        </svg>
    </body>
</html>