页面的高度 vh html,html – 使用VH表示高度响应适合框SVG

问题是因为您只将视口单元中的高度分配给容器,而不是实际的SVG元素.因此,容器的高度始终保持响应(如60vh),但svg元素的高度会根据宽度和viewBox设置而变化.这会导致SVG的一部分由于溢出而被剪切：隐藏在容器元素上.

您可以通过从容器中删除overflow：hidden并向SVG元素添加边框来验证上述内容.

要解决此问题,只需将以下CSS属性添加到svg元素即可.这将确保SVG始终只与容器一样大.

svg {

width: 100%;

height: 100%;

}

.svg-container {

display: inline-block;

position: relative;

width: 100%;

height: 60vh; /* aspect ratio */

vertical-align: top;

overflow: hidden;

background-color: yellow;

}

svg {

width: 100%;

height: 100%;

}

.svg-content-responsive {

display: inline-block;

position: absolute;

top: 10px;

left: 0;

border: 1px solid;

}

.line {

fill: none;

stroke: steelblue;

stroke-width: 1.5px;

}

另一种可能的选择是将父容器设置为display：block,然后将所需的维度直接设置为svg元素.

.svg-container {

display: block;

position: relative;

vertical-align: top;

overflow: hidden;

background-color: yellow;

}

svg{

width: 100%;

height: 60vh; /* aspect ratio */

}

.svg-container {

display: block;

position: relative;

vertical-align: top;

overflow: hidden;

background-color: yellow;

}

.svg-content-responsive {

display: inline-block;

position: absolute;

top: 10px;

left: 0;

}

svg {

width: 100%;

height: 60vh; /* aspect ratio */

}

.line {

fill: none;

stroke: steelblue;

stroke-width: 1.5px;

}

页面的高度 vh html,html – 使用VH表示高度响应适合框SVG相关推荐

今天又学一招 vh和%的区别 vh的妙用
vh和%的区别 vh的妙用 vh与%的区别 vh是长度单位, vh是根据浏览器视口的高度变化; vw则是根据浏览器视口的宽度变化, 视口就是浏览器的可视区域把浏览器可视区宽高平均分成100份, 那1 ...
jq获取页面高度_通过 jQuery 获取浏览器窗口高度问题
我曾经在使用jQuery一些东西的时候碰到了这样一些奇怪的问题.例如,我尝试着用 jQuery 的 $(window).height() 来获取浏览器窗口高度,就遇到了问题. 理论上,$(window ...
html body最小高度,CSS网页布局中的最小高度问题的解决方法
假定有二个BOX,我们需要它的最小高度为150PX. CSS 复制代码代码如下: div.box1,div.box2{ width: 300px; min-height: 150px; backgro ...
ios 获取nav高度_ios 获取导航栏和状态栏高度，针对iPhoneX
因为iPhoneX的产生,原本的导航栏再也不是44了,那么会出现什么问题呢?在隐藏导航栏的页面,原本的高度要向上调整一个导航栏+状态栏的高度.那么iPhoneX的导航栏高度不是44了,我们需要手动获取 ...
案例：文件下载需求：1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载||中文文件问题
文件下载需求: 1. 页面显示超链接 2. 点击超链接后弹出下载提示框 3. 完成图片文件下载 * 分析: 1. 超链接指向的资源如果能够被浏览器解析,则在浏览器中展示 ...
设置UILabel可变高度（根据文本内容自动适应高度）
@property(nonatomic)UILabel *showLabel; // 计算文本所占高度,计算出来之后设置label的高度 // 第一个参数:字体大小,字体大小/样式影响计算字体的高度 ...
.jsp页面提交form表单，后台却无法获取input文本框value值
问题一:奇葩bug总结:input提交,后端获取不到value问题注意: java后端jsp页面input disabled="disabled"表单提交,后端无法print获取 ...
C#如何测量字符串的高度宽度和精确取得字符串的高度宽度
C#如何测量字符串的高度宽度和精确取得字符串的高度宽度因为MFC中CDC有GetTextExtent()可以获得字符串的高度宽度像素单位,所以自然想到c#的GDI+的MeasureString,这 ...
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 下载链接各种风格404错误页面html模板源码3 ...

页面的高度 vh html,html – 使用VH表示高度响应适合框SVG

页面的高度 vh html,html – 使用VH表示高度响应适合框SVG相关推荐

最新文章

热门文章