Question

我的SVG徽标是响应式的，但我不确定为什么这样做有效，我期待这会更复杂，并且觉得我在这里遗漏了什么

以下是我的徽标的HTML：

- 徽标容器的宽度由引导类col-xs-6

定义

- 我的css中所有图片都设置为max-width {100％}

-Header height设置为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%;   
}

非常感谢你的时间

Answer 1

由于它们在svg容器中没有宽度/高度参数，因此它不知道固定宽度/高度的那些参数。试试这个

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="640" height="480" 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>

我只是在你的svg中添加了宽度/高度参数。

SVG响应式设计

1 个答案: