使 svg 图像流畅答案

【问题标题】：Making svg image fluid使 svg 图像流畅
【发布时间】：2014-12-22 10:32:38
【问题描述】：

我试图在一个流畅的网站中制作我的 svg 图像，所以当浏览器更小/更大时我需要它重新缩放，但我没有取得太大的成功。任何建议都会非常感谢
谢谢！这是我的代码：

<div class="five columns" id="logo">

    <svg width="300" height="160">
        <image xlink:href="/Users/MaxRuizTagle/Desktop/guardado por illustrator/logoprobando.svg" src="" width="270" height="200"/>
    </svg>

</div>

css:

#logo {
        position: absolute;
        top:-35px;
    }

【问题讨论】：

调整大小时的缩放可以通过 JS 代码完成，或者使用带有宽度/高度和/或@media 查询的百分比，通常在 CSS 中定义。

标签： html css svg fluid-layout

【解决方案1】：

虽然您可以在 SVG 上设置 height 和 width，但您确实应该在调整大小之前设置视图框...

<svg width="300" height="160" viewBox="0 0 300 160">

...这将确保内部比例与您定义的height 和width 保持一致。

这是一篇很棒的文章：http://tutorials.jenkov.com/svg/svg-viewport-view-box.html

【讨论】：