Flexbox 使用原始 SVG 宽度而不是缩放宽度

Posted 2023-03-05

【中文标题】Flexbox 使用原始 SVG 宽度而不是缩放宽度

【英文标题】：Flexbox is using original SVG width instead of scaled width

【发布时间】：2017-12-29 10:59:16

【问题描述】：

我正在尝试制作一个包含 2 个 flex div 框的部分，其中：

左一：具有img 的自动宽度。 右一：具有左侧宽度。

我几乎所有东西都在工作，但我被这个困住了：

它似乎设置了 SVG 文件的原始宽度，而不是“缩放”的宽度。 SVG 图像包含在img 标记中，并使用height: 100%; 和width: auto; 进行缩放。

我一直在互联网上寻找多种解决方案，但都没有奏效。

有什么办法可以解决吗？ （尽可能不使用 javascript）

---

index.htm

<div id="SideMessage">
    <div class="Decoration">
        <img src="./image.svg" >
    </div>
    <div class="Message">
        <span>SAMPLE TEXT</span>
    </div>
</div>

style.css

div#SideMessage 
    /**/background: lightblue;
    display: flex;
    height: 64px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;

        div#SideMessage > div.Decoration 
            /**/border: 1px dashed green;
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 0;
        
        div#SideMessage > div.Message 
            /**/border: 1px dashed red;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        
                div#SideMessage > div.Decoration > img 
                    height: 100%;
                    width: auto;
                
                div#SideMessage > div.Message > span 
                    font-size: 20px;
                    letter-spacing: 2px;
                

image.svg

<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 18.475 32">
    <polygon fill="rgb(0, 0, 0)" points="0,0 18.475,0 0,32"/>
</svg>

【问题讨论】：

似乎已经按照您在jsfiddle.net/3ys4n9bp 上面的代码的需要工作了，svg 尺寸是34.8834px x 62px?

@Zze 图像的一部分被截断（Firefox 和 Chrome 都试过），我想看到的是其容器内的整个图像。

所以您的问题实际上是：“Flexbox 使用的是原始 svg 宽度而不是缩放宽度”？

@Zze 是的，好多了！我根据您的建议编辑了标题。

如果您从 svg 中删除 height:100%，它将缩放并被包含。如果你仍然需要它占据整个高度，你需要给装饰更多的宽度（在 64 像素高，你需要 36.95 像素）以保持 svg 纵横比。

【参考方案1】：

2 年后，但从 <div class="Decoration"> 解开 <img> 应该可以解决它。并添加box-sizing: border-box; 以防止其边框/填充溢出。