html - 如何在 HTML5 中正确且响应式地缩放 SVG？

Question

我想在同一个标​​题容器中包含页面 Logo 和导航 - Logo 位于左侧，导航容器位于右侧。如何使 SVG Logo 嵌入内联正确缩放以始终填充其容器(标题)高度和自动缩放宽度的 100% - 同时保持在容器的左侧？ (我需要单独的 <div> 来包装 <svg> 容器吗？)

可能我必须设置 svg viewBox 属性，但我不确定如何做到这一点以确保它能够响应并在不同的分辨率下正确渲染)？

我的代码:

HTML:

<header id="page-header">

    <svg id="logo" 
         xmlns="http://www.w3.org/2000/svg">
         <path d="..."/><g></g>
    </svg>

    <nav id="page-nav">
          <a href="...">...</a>
          ...
    </nav>

</header>

CSS:

#page-header {
    height: 9em;
    padding: 0;
    margin: 0 0 6em 0;
}

#logo {
    padding: 0;
    width:600px;  //not working at all.

    vertical-align:top;
    float:left;

    display:inline-block;
}

#page-nav {
   float:right;
   ...
}

Answer 1

您应该首先设置 viewBox 属性，然后使 svg 中的所有尺寸都与其相关。当您分配 height 和 width (无论是在 svg 标签中还是在 css 中)时，您正在调整 svg 边界框的大小，而不是其中元素的大小。通过设置 viewBox，您可以让浏览器知道您希望图像包含在某个边界框中，然后当您调整宽度或高度时，它将相应地重新缩放。

viewBox 属性采用四个空格分隔的值 x y w h，其中 x 是边界框左侧的 x 坐标， y 是边界框顶部的 y 坐标，w 和 h 是边界框的宽度和高度。

如果您想要 Logo 的方形边框，您可以执行以下操作:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- your svg elements -->
</svg>

然后所有内容的大小都会相对于 100x100 边界框进行调整，因此，如果您想要在中心有一个圆，其宽度与边界框相同，您只需执行以下操作:

<circle cx="50" cy="50" r="50" fill="red"></circle>

然后，如果您使用 css 来制作 width: 100%;，您的圆圈将是容器的宽度而不是 50px。

这是一个fiddle that shows how changing each value of the viewBox affects the output 。希望有帮助。