Question

我想在同一个标题容器中包含页面徽标和导航 - 左侧的徽标，右侧的导航容器。如何使嵌入内嵌的SVG徽标正确缩放以始终填充其容器（标题）高度和自动刻度宽度的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。希望有所帮助。

Answer 2

你确实可以用css缩放svg图像，看看这个页面，在那里用很多例子很好地解释了它。 http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php

如何在HTML5中正确和响应地扩展SVG？

2 个答案: