内联 svg 缩放 - 自动宽度

Posted 2023-03-06

【中文标题】内联 svg 缩放 - 自动宽度

【英文标题】：Inline svg scaling - auto width

【发布时间】：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"
       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。不幸的是，这并没有奏效。上面的帖子正文中有一个小提琴链接。

【参考方案1】：

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

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

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