代码之家 › 专栏 › 技术社区 › Sam R. chikka.anddev

设置SVG初始宽度和高度

svg css html

Sam R. chikka.anddev · 技术社区 · 7 年前

所以我想把这个SVG放在 col div,但我希望它与右列的高度相同。如果右边的列较大,则一切正常,但如果它较小,则SVG列将获胜并决定其他列的高度。

不管怎样,我是否可以设置SVG的初始大小,并使其在高度方面保持响应?

简言之,我希望右栏指示其他人的高度。

.row {
  display: flex;
  width: 90vw;
}

.col {
  flex: 1;
  border: 1px solid lightgray;
}

<div class="row">
  <div class="col">
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="100%">
      <line
        x1="50%" 
        y1="100%" 
        x2="50%" 
        y2="0%"
        stroke="black" 
        stroke-width="2" />

      <circle 
        cx="50%" 
        cy="10%" 
        r="5" />
  </svg>
  </div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis
  </div>
</div>

这是期望的结果:

这是 jsbin 如果你想玩的话。

1 回复 | 直到 7 年前

Sam R. chikka.anddev 7 年前

好吧,看来我只是需要 height 和a min-height 以及一些调整:

.row {
  display: flex;
  width: 90vw;
}

.col {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  border: 1px solid lightgray;
}

.col>svg {
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 20px;
  height: 20px;
  width: 30px;
}

<div class="row">
  <div class="col">
    <svg xmlns="http://www.w3.org/2000/svg">
      <line 
        x1="50%"
        y1="100%"
        x2="50%" 
        y2="0"
        stroke="darkgray" />
      <circle cx="50%" cy="50%" r="3" />
  </svg>
  </div>

  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis
  </div>
</div>

推荐文章

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

1 年前

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

1 年前

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

1 年前

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

2 年前

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

3 年前

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

3 年前

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

3 年前

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

3 年前

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

3 年前

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

3 年前