代码之家 › 专栏 › 技术社区 › nmh

与父容器相比的SVG大小。为什么不100%最小高度填充父对象?

svg css html

nmh · 技术社区 · 6 年前

.parent {
  position: relative;
  background: green;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  overflow: hidden;  
  height: 400px; 
  width: 270px;
}

.child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);

}

<div class="parent">
    <div class="child">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  viewPort="550 0 600 430.95" viewBox="246 0 600 430.95" preserveAspectRatio="xMidYMid meet" >
<rect width="100%" height="100%" fill="red" />
</svg>

 </div>
</div>

1 回复 | 直到 6 年前

Paul LeBeau 6 年前

min-width 和 min-height width height
宽度 viewBox 宽度 "100%"
```
270 * 430.95 / 600 ~= 194px
```

将SVG的高度设置为 div.child 但是 preserveAspectRatio="xMidYMid meet" div

.parent {
  position: relative;
  background: green;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  overflow: hidden;  
  height: 400px; 
  width: 270px;
}

.child {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
}

<div class="parent">
    <div class="child">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  viewBox="246 0 600 430.95" preserveAspectRatio="xMidYMid meet" width="100%" height="100%">
<rect width="846" height="100%" fill="red" />
</svg>

 </div>
</div>

如果希望SVG忽略纵横比,并拉伸到 ,然后设置 preserveAspectRatio="none"

.父级{
背景:绿色;
显示:内联块;
宽度:270px;

显示:块;
左:50%;
转换:转换(-50%,-50%);

<div class="parent">
    <div class="child">

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  viewBox="246 0 600 430.95" preserveAspectRatio="none" width="100%" height="100%">
<rect width="846" height="100%" fill="red" />
</svg>

 </div>
</div>

ps.没有这样的svg属性 viewPort

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前