内联 svg 缩放 - 自动宽度答案

【问题标题】：Inline svg scaling - auto width内联 svg 缩放 - 自动宽度
【发布时间】：2014-07-31 23:31:37
【问题描述】：

我已经构建了一个响应式仪表板，一个新的要求是大屏幕电视观看。为了实现徽标资源的缩放，我决定使用 SVG，这也消除了为移动/桌面查看维护单独的视网膜精灵的需要。

由于徽标都是不同的宽度，我需要设置一个共同的高度，宽度为自动。这在使用带有 img 标签的 svg 时效果很好，但是当使用内联 SVG 时，路径可以很好地缩放，但 svg 宽度仍设置为 viewBox 大小。

如果需要，我可以选择 img 选项，但我更喜欢使用 inline 选项，所以我可以使用 css 控制路径的颜色。

我已经设置了一个 jsfiddle 来展示一个例子。红色的关键线显示了这两个元素的尺寸问题。 http://jsfiddle.net/bxeBW/2/

<svg version="1.1" id="DT" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="445.997px" height="100px" viewBox="0 0 445.997 100" preserveAspectRatio="xMinYMin meet">

.logo{
    height:3em;
    padding: 0.5em;

    svg, 
    img{
      height:3em;
      width:auto;
      border: 1px solid #ff0000;

        #telegraph{
            fill:#ff0000;
        }
    }
}

感谢您的帮助。

干杯，丹

【问题讨论】：

尝试将 display: flex; 属性添加到 logo 类中。小提琴会有所帮助
感谢@fauverism。不幸的是，这并没有奏效。上面的帖子正文中有一个小提琴链接。

标签： css html svg responsive-design scale

【解决方案1】：

看来，通过将 max-width 添加到 svg 的 css，将完全按照我的需要格式化尺寸。这适用于 Webkit 浏览器和 Firefox，幸运的是，它满足了我的要求，但是如果 IE 支持是必不可少的，那么这并不是真正的解决方案。

.logo{
    svg, 
    img{
      height:3em;
      max-width:100%;
    }
}

http://jsfiddle.net/bxeBW/3/

【讨论】：