如何使用其父容器制作 svg 比例尺？

要指定 SVG 图像内的坐标而与图像的缩放大小无关，请使用 SVG 元素上的 viewBox 属性来定义图像的边界框在图像坐标系中的位置，并使用 {2 } 和 height 属性来定义相对于包含页面的宽度或高度。

例如，如果您有以下情况：

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

它将呈现为 10 像素 x 20 像素的三角形：

https://ephemera.continuation.org/stackoverflow/svg-scale/1.svg

现在，如果您只设置宽度和高度，这将改变 SVG 元素的大小，但不会缩放三角形：

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

https://ephemera.continuation.org/stackoverflow/svg-scale/2.svg

如果您设置视图框，这会导致它转换图像，使得给定的框（在图像的坐标系中）被放大以适应给定的宽度和高度（在页面的坐标系中）。例如，将三角形放大为 100 像素 x 50 像素：

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

https://ephemera.continuation.org/stackoverflow/svg-scale/3.svg

如果要将其放大到 HTML 视口的宽度：

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

https://ephemera.continuation.org/stackoverflow/svg-scale/4.svg

请注意，默认情况下，会保留纵横比。因此，如果您指定元素的宽度应为 100%，但高度为 50px，它实际上只会放大到 50px 的高度（除非您的窗口非常窄）：

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

https://ephemera.continuation.org/stackoverflow/svg-scale/5.svg

如果您确实希望它水平拉伸，请使用 preserveAspectRatio=none 禁用纵横比保留：

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

https://ephemera.continuation.org/stackoverflow/svg-scale/6.svg

（请注意，虽然在我的示例中我使用了适用于 HTML 嵌入的语法，但为了将示例作为图像包含在 StackOverflow 中，我改为嵌入到另一个 SVG 中，因此我需要使用有效的 XML 语法）

---

经过 48 小时的研究后，我最终这样做以获得比例缩放：

注意：这个示例是用 React 编写的。如果您不使用它，请将驼峰式的东西改回连字符（即：将 backgroundColor 更改为 background-color 并将样式 Object 更改回 String）。

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

以下是上述示例代码中发生的情况：

视图框

MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

min-x, min-y, 宽度和高度

即：viewbox="0 0 1000 1000"

Viewbox 是一个重要的属性，因为它基本上告诉 SVG 要绘制什么尺寸以及在哪里绘制。如果您使用 CSS 制作 1000x1000 像素的 SVG，但您的 viewbox 是 2000x2000，您会看到 SVG 的左上角四分之一。

前两个数字 min-x 和 min-y 确定 SVG 是否应该在视图框内偏移。

我的 SVG 需要向上/向下或向左/向右移动

检查这个：viewbox="50 50 450 450"

前两个数字会将您的 SVG 向左移动 50 像素并向上移动 50 像素，后两个数字是视图框大小：450x450 像素。如果您的 SVG 是 500x500 但上面有一些额外的填充，您可以操纵这些数字在“视图框”内移动它。

您此时的目标是更改其中一个数字，看看会发生什么。

您也可以完全省略视图框，但是您的里程数将根据您当时的所有其他设置而有所不同。根据我的经验，您会遇到保留纵横比的问题，因为视图框有助于定义纵横比。

保留纵横比

MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

根据我的研究，有很多不同的纵横比设置，但默认设置称为 xMidYMid meet。我把它放在我的身上是为了明确地提醒自己。 xMidYMid meet 使其根据中点 X 和 Y 按比例缩放。这意味着它在视图框中保持居中。

宽度

MDN：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

看看我上面的示例代码。请注意我如何只设置宽度，不设置高度。我将它设置为 100%，这样它就可以填满它所在的容器。这可能是回答这个 Stack Overflow 问题的最大贡献。

您可以将其更改为您想要的任何像素值，但我建议像我所做的那样使用 100% 将其放大到最大尺寸，然后通过父容器使用 CSS 控制它。我推荐这个，因为你会得到“适当的”控制。您可以使用媒体查询，并且无需疯狂的 JavaScript 即可控制大小。

使用 CSS 缩放

再次查看我上面的示例代码。注意我是如何拥有这些属性的：

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

这是附加的，但它向您展示了如何允许用户调整 SVG 的大小，同时保持适当的纵横比。因为 SVG 保持自己的纵横比，您只需在父容器上调整宽度，它会根据需要调整大小。

我们不理会高度和/或将其设置为自动，我们用宽度控制调整大小。我选择宽度是因为响应式设计通常更有意义。

这是正在使用的这些设置的图像：

https://i.stack.imgur.com/EU0SO.gif

如果您阅读了此问题中的每个解决方案，但仍然感到困惑或不太明白您需要什么，请在此处查看此链接。我发现它很有帮助：

https://css-tricks.com/scale-svg/

这是一篇庞大的文章，但它几乎分解了所有可能的操作 SVG 的方法，无论是否使用 CSS。我建议在随便喝杯咖啡或您选择的液体时阅读它。

---

你会想要做一个这样的转换：

使用 JavaScript：

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

使用 CSS：

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

将您的 SVG 页面包装在 Group 标记中，并将其定位为操作整个页面：

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

注意：比例 1.0 为 100%

---

乱搞并发现这个 CSS 似乎包含 Chrome 浏览器中的 SVG，直到容器大于图像：

div.inserted-svg-logo svg { max-width:100%; }

似乎也在 FF + IE 11 中工作。

---

这是一个简单的方法：

类型 1：大多数 SVG 都有一个视图框，如下所示：

<svg viewBox="0 0 24 30" ...>

您可以在 css 中轻松控制它们的大小：

svg {
  height: 20px;
}

类型 2：如果 svg 有宽度和高度，但没有视口，如下所示：

<svg width="810" height="540">

然后您可以手动添加一个与其宽度和高度完全相同的视图框，如下所示：

<svg width="810" height="540" viewBox="0 0 810 540">

然后您可以执行与类型 1 相同的操作。

---

另一种简单的方法是

transform: scale(1.5);

---

更改 SVG 文件对我来说不是一个公平的解决方案，因此我使用了 relative CSS units。

vh、vw、% 非常方便。我使用像 height: 2.4vh; 这样的 CSS 来为我的 SVG 图像设置动态大小。

---

调整 currentScale 属性在 IE 中有效（我用 IE 11 测试过），但在 Chrome 中无效。

---

如果您想在没有 preserveAspectRatio 属性的情况下缩放 SVG。

这样 SVG 将始终拉伸以填充 width 和 height，为此，它只会调整 width 或 height 的大小，如有必要，已经找了好几天了，所以想在这里分享如果其他人正在寻找这个

您必须从 <svg> 中删除 width 和 height 并添加 viewBox 属性并添加 preserveAspectRatio="none"

例子

<?xml version="1.0" encoding="utf-8"?>

<svg 
version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
viewBox="0 0 5.8208332 15.9"
preserveAspectRatio="none">

<polygon points="480.4,200 0,200 0,0 480.4,0 599.9,100 " fill="#E1E1E1"/>
</svg>

---