html - 缩放 SVG 以适应视口(viewport)

Question

这是在制品:www.wearethefirehouse.com/wcftest

Logo 是来自 Illustrator 的 .SVG。

我的代码是(包括整个部分的透视图，可能有冲突的 div？):

<!-- Intro Header -->
<header class="intro">
    <div class="intro-body">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
                    <a href="#about" class="btn btn-circle page-scroll">
                        <i class="fa fa-angle-double-down animated"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</header>

如果您缩小浏览器窗口，您会发现它一开始很好，然后跳来跳去，最后在您进入移动视口(viewport)时出现无用的大迭代。

我如何让它干净地扩展？

这是我第一次使用 SVG，我知道这是我需要更多使用的东西...试一试，对吧？

如有任何帮助，我们将不胜感激!

Answer 1

这与 SVG 无关。由于 Bootstrap 以及它根据页面宽度调整页面元素大小的方式，它会跳来跳去。

如果您不希望它跳得太厉害，您可以使用不同的 Bootstrap 样式。例如:

<div class="col-md-12>
    <img src="img/master-logo-white.svg" alt="Wine Country Flooring Logo">
    <a href="#about" class="btn btn-circle page-scroll">
        <i class="fa fa-angle-double-down animated"></i>
    </a>
</div>