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 是边界框的宽度和高度。

如果你想要一个正方形的边界框作为你的标志，你可以这样做:

<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 .希望对您有所帮助。