SVG 在不应该的时候放大到 html 大小

Question

这是我第一次使用SVG。我把艺术板设置为一个特定的大小60 x 70像素或接近这个大小的东西，但当我在浏览器中加载它的巨大时

.st6 {
fill: none;
stroke: #4d4d4d;
stroke-miterlimit: 10
}

<nav>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 60 70" xml:space="preserve">
<path d="M54.49 70H5.51C2.47 70 0 67.53 0 64.49V5.51C0 2.47 2.47 0 5.51 0h48.98C57.53 0 60 2.47 60 5.51v58.98c0 3.04-2.47 5.51-5.51 5.51z" fill="gray" stroke="#4d4d4d" stroke-miterlimit="10"/>
<path d="M52.44 66H7.56C5.59 66 4 64.41 4 62.44V7.56C4 5.59 5.59 4 7.56 4h44.88C54.41 4 56 5.59 56 7.56v54.88c0 1.97-1.59 3.56-3.56 3.56z" fill="none" stroke="#00f" stroke-width="2" stroke-miterlimit="10"/>
<text transform="translate(11.528 19.33)" font-size="16" font-family="MyriadPro-Regular" fill="#fff">
News
</text>
<path fill="none" stroke="gray" stroke-miterlimit="10" d="M30 65V46"/>
<path class="st6" d="M5.5 46.5h49M30.5 64.5v-18"/>
</svg>
</nav>

Answer 1

您只需要在svg 上设置宽度/高度

svg {
width: 60px;
height: 70px;
}

<nav>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 60 70" xml:space="preserve">
<style>
.st6{fill:none;stroke:#4d4d4d;stroke-miterlimit:10}
</style>
<path d="M54.49 70H5.51C2.47 70 0 67.53 0 64.49V5.51C0 2.47 2.47 0 5.51 0h48.98C57.53 0 60 2.47 60 5.51v58.98c0 3.04-2.47 5.51-5.51 5.51z" fill="gray" stroke="#4d4d4d" stroke-miterlimit="10"/>
<path d="M52.44 66H7.56C5.59 66 4 64.41 4 62.44V7.56C4 5.59 5.59 4 7.56 4h44.88C54.41 4 56 5.59 56 7.56v54.88c0 1.97-1.59 3.56-3.56 3.56z" fill="none" stroke="#00f" stroke-width="2" stroke-miterlimit="10"/>
<text transform="translate(11.528 19.33)" font-size="16" font-family="MyriadPro-Regular" fill="#fff">
News
</text>
<path fill="none" stroke="gray" stroke-miterlimit="10" d="M30 65V46"/>
<path class="st6" d="M5.5 46.5h49M30.5 64.5v-18"/>
</svg>
</nav>

因此，即使你可以在photoshop/illustrator中将艺术板设置为60 x 70，但当它生成SVG时，它实际上并没有设置宽度或高度。因此，如果你不指定它的大小，它将占用所有可用空间。