Question

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

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

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

我已经设置了一个jsfiddle来展示一个例子。红色keyline显示两个元素的大小问题。 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;
        }
    }
}

感谢您的帮助。

干杯，丹

Answer 1

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

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

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

内联svg缩放 - 自动宽度

1 个答案: