如何在HTML5中正确和响应地缩放SVG？ [英] How to scale SVG properly and responsively in HTML5?

问题描述

我想在同一个标​​题容器中包含页面标志和nav，左侧的标志，右侧的nav容器。如何使SVG标志嵌入在线正确缩放以始终填充其容器（标题）的高度和自动缩放宽度的100％ - 同时停留在容器的左边？ （需要单独< div> 包装< svg> 容器吗？）

I would like to contain page logo and nav in the same header container - logo on the left, nav container on the right. How to make SVG logo embedded inline properly scale to always fill 100% of its container (header) height and auto scale width - at the same time staying on the left of the container? (Do I need separate <div> to wrap <svg> container?)

可能我必须设置svg viewBox属性，但我不知道如何做，以确保它将响应和适当地在不同的分辨率渲染）？

Probably I have to set svg viewBox property, but I'm not sure about how to do it to be sure that it will be responsive and render properly in different resolutions)?

我的代码：

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;
   ...
}

推荐答案

您应该首先设置 viewBox 属性，然后在您的svg内相对于所有维度。当您分配 height 和 width （无论是在svg标签还是在css中） svg边界框，而不是其中元素的大小。通过设置 viewBox ，您可以让浏览器知道您想要将图像包含在某个边界框中，然后当您调整宽度或高度时，

You should set the viewBox attribute first, and then make all of your dimensions within your svg relative to that. When you assign height and width (whether in your svg tag or in your css) you are adjusting the size of the svg bounding box, not the size of the elements within it. By setting a viewBox you let the browser know that you want the image to be contained within a certain bounding box, and then when you then adjust the width or height, it will be re-scaled accordingly.

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

The viewBox attribute takes four space-separated values x y w h where x is the x-coordinate of the left side of the bounding box, y is the y-coordinate of the top of the bounding box and w and h are the width and height of the bounding box.

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

If you want a square bounding box for your logo, you could do something like this:

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

然后，所有内容都将相对于100x100的边框进行大小设置，所以如果你想在中心

Then everything would be sized relative to a 100x100 bounding box, so if you wanted a circle in the center, with the same width as the bounding box, you would just do:

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

然后，如果你使用css使 width：100％ / code>，您的圈子将是您的容器的宽度，而不是50像素。

Then if you used your css to make the width: 100%;, your circle would be the width of your container rather than 50px.

以下是 小提琴，显示如何更改每个值viewBox会影响输出 。希望有帮助。

Here's a fiddle that shows how changing each value of the viewBox affects the output. Hope that helps.

这篇关于如何在HTML5中正确和响应地缩放SVG？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！