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

Question

当 size 为非原生时，我想要一个内联 svg 元素的内容比例。当然我可以把它作为一个单独的文件并像那样缩放它。

index.html： <img src="foo.svg" style="width: 100%;" />

foo.svg： <svg width="123" height="456"></svg>

但是，我想通过 CSS 向 SVG 添加其他样式，因此无法链接外部样式。如何制作内联 SVG 比例尺？

原文由 bjb568 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要独立于图像的缩放尺寸指定 SVG 图像内的坐标，请使用 viewBox SVG 元素上的属性来定义图像的边界框在图像坐标系中的位置，以及使用 width 和 height 属性来定义相对于包含页面的宽度或高度。

例如，如果您有以下内容：

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

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

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

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

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

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

如果你想将它放大到 HTML 视口的宽度：

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

如果您确实希望它水平拉伸，请使用 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>

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

原文由 Brian Campbell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

注意：此示例是使用 React 编写的。如果您不使用它，请将驼峰式大小写变回连字符（即：将 backgroundColor 更改为 background-color 并更改样式 Object -b39adfa 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

最小 x、最小 y、宽度和高度

即：viewbox=“0 0 1000 1000”

Viewbox 是一个重要的属性，因为它基本上告诉 SVG 绘制的尺寸和位置。如果您使用 CSS 将 SVG 设为 1000x1000 像素，但您的视图框为 2000x2000，您将看到 SVG _的左上四分之一_。

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

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

检查这个： viewbox=“50 50 450 450”

前两个数字会将您的 SVG 向左移动 50px 并向上移动 50px，后两个数字是视图框大小：450x450 px。如果您的 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://css-tricks.com/scale-svg/

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

原文由 agm1984 发布，翻译遵循 CC BY-SA 3.0 许可协议