如何在 HTML5 中正确和响应地缩放 SVG？

Posted 2023-03-28

【中文标题】如何在 HTML5 中正确和响应地缩放 SVG？

【英文标题】：How to scale SVG properly and responsively in HTML5?

【发布时间】：2014-07-03 05:16:23

【问题描述】：

我想在同一个标​​题容器中包含页面徽标和导航 - 左侧是徽标，右侧是导航容器。如何使嵌入的 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;
   ...

【问题讨论】：

一个演示对这个问题很有帮助——CodePen 等

如果你想缩放 SVG，它必须有一个 viewBox 属性。

我不知道你所说的演示究竟是什么意思。有一点 JSfiddle：jsfiddle.net/2myBV/32 有一个模型：i.imgur.com/vC6ugq1.png

【参考方案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%;，您的圆圈将是容器的宽度，而不是 50 像素。

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

【讨论】：

感谢您的解释！但是为了确定——看起来不可能使用纯 CSS（而不是 javascript）在不同的分辨率上响应缩放 svg 图像——在 ems 中指定 viewBox 大小或将其大小限制为其容器的大小？

@Senthe 如果你想更好地控制尺寸，你可以给它宽度和高度100% 并将它包装在div 中，给包装器一个百分比宽度。 FIDDLE。尝试拖动窗口宽度...如果您在 ems 中指定宽度，您将获得固定大小；如果您希望它具有响应性，则需要使用百分比。

【参考方案2】：

您确实可以使用 css 缩放 svg 图像，请查看此页面，其中有很多示例对此进行了很好的解释。 http://soqr.fr/testsvg/embed-svg-liquid-layout-responsive-web-design.php