【发布时间】：2016-01-08 07:27:33
【问题描述】：
我的 SVG 徽标是响应式的，但是我不确定它为什么会起作用，我原以为这会更复杂，并且觉得我在这里遗漏了一些东西
这是我的徽标的 HTML：
-logo容器的宽度由引导类col-xs-6定义
-我的 css 中所有图片都设置为最大宽度 {100%}
-标题高度设置为AUTO
<div id="logo" class="col-xs-6 clearfix">
<img src="images/logo.svg" alt="The website logo">
</div>
这是我的徽标的 XML：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 57.8 15" enable-background="new 0 0 57.8 15" xml:space="preserve">
<rect x="0.5" y="0.7" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" width="56.8" height="13.8"/>
<text transform="matrix(1 0 0 1 15.0075 10.044)" font-family="'MyriadPro-Regular'" font-size="12">logo</text>
<g>
<g>
<path fill="#1E6E30" d="M-0.2,3.8c17.7,0.4,35.3,0.5,53,0.3c1.4,0,3.7-2.9,3.8-2.9C39,1.4,21.3,1.3,3.6,0.9
C2.3,0.9-0.1,3.8-0.2,3.8L-0.2,3.8z"/>
</g>
</g>
</svg>
我的问题
我需要添加一些删除任何 XML 吗？我应该使用下面的 CSS 吗？ SVG 看起来像其他任何图像一样工作，我应该进行任何调整吗？
#logo img
{
width: 100%;
height: 100%;
}
非常感谢您的宝贵时间
【问题讨论】：
-
带有 viewBox 和百分比宽度/高度的 SVG 通常是响应式的。你有那些，所以他们是。基本上就这些了。
-
谢谢罗伯特。如果我画了一个矩形（作为我的徽标）并从 XML 中删除了宽度高度属性，那么我在我的 CSS 中定义徽标 img 宽度 100% 和高度 100%，这样可以吗？我假设徽标只会填充包含徽标的 DIV？
-
您的 SVG 中没有宽度/高度，您依赖于 100% 的默认值，这对于独立文档来说很好。除非您将 CSS 内联在 SVG 文件本身中，否则您将无法使用 CSS 覆盖它，并且无论如何您都不需要。
-
看看css-tricks.com/scale-svg——它非常详尽地解释了 SVG 图像的缩放。