英文:
Firefox doesn't set width correctly for SVG's parent div
问题
我有一个没有固定宽度和高度的SVG，只定义了视口框（viewbox）。我有一个flex容器，其中包含一些子div，而在这些子div内部是SVG。在Chrome中，这样做可以正常工作，SVG会并排放置在一起。但在Firefox中，这些子div的宽度为0像素，所有的SVG都叠在一起。我该如何使这些div / svg在Firefox中像Chrome一样工作？
我尝试了在JavaScript中设置div宽度的解决方案，但我更喜欢纯CSS的解决方案。
<div class="container">
<div class="first">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
<div class="second">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
</div>
.container {
display: flex;
height: 50px;
}
.first {
background: green;
}
.second {
background: yellow;
}
svg {
width: auto;
height: 100%;
}
英文:
I have an SVG without fixed width and height, it has only viewbox defined. I have one flex container which contains some child divs and inside those childs are the SVG's. With Chrome this works fine and SVG's are set side by side next to each other. But with Firefox those child divs have width 0px and all the SVG's are put on top of each other. How could I make those divs / svgs behave in Firefox same way as Chrome?
I tried the solution where I set the width of the divs in javascript, but I would prefer CSS only solution.
<div class="container">
<div class="first">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
<div class="second">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
</div>
.container {
display: flex;
height: 50px;
}
.first {
background: green;
}
.second {
background: yellow;
}
svg {
width: auto;
height: 100%;
}
答案1
得分: 1
你还需要在父级 div 中添加 width: auto 和 height: 100%：
.container {
display: flex;
height: 50px;
}
.first {
background: green;
}
.second {
background: yellow;
}
svg, .first, .second {
width: auto;
height: 100%;
}
或者，你也可以直接将 SVG 放在主容器中：
.container {
display: flex;
height: 50px;
}
.first {
background: green;
}
.second {
background: yellow;
}
svg {
width: auto;
height: 100%;
}
英文:
You also have to add width: auto and height: 100% to the parent divs:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
height: 50px;
}
.first {
background: green;
}
.second {
background: yellow;
}
svg, .first, .second {
width: auto;
height: 100%;
}
<!-- language: lang-html -->
<div class="container">
<div class="first">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
<div class="second">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
</div>
<!-- end snippet -->
Alternatively you can put the SVGs directly in the main container
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
height: 50px;
}
.first {
background: green;
}
.second {
background: yellow;
}
svg {
width: auto;
height: 100%;
}
<!-- language: lang-html -->
<div class="container">
<svg viewBox="0 0 100 100" class="first">
<circle cx="50" cy="50" r="50" />
</svg>
<svg viewBox="0 0 100 100" class="second">
<circle cx="50" cy="50" r="50" />
</svg>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论