如何使用其父容器创建svg比例？

Question

当大小是非本机的时，我想要一个内联svg元素的内容比例。当然，我可以将它作为一个单独的文件并按比例缩放它。

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

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

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

Answer 1

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

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

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

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

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

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

如果设置了视图框，则会导致它变换图像，使得给定的框（在图像的坐标系中）按比例放大以适合给定的宽度和高度（在页面的坐标系中） ）。例如，要将三角形放大到100px乘以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语法）

Answer 2

你想要做一个转换：

使用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％

Answer 3

经过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，宽度和高度

ie：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像素。如果您的SVG是500x500但它上面有一些额外的填充，您可以操纵这些数字在“视图框”内移动它。

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

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

保留宽高比

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

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

<强> WIDTH

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。我建议您在随便喝咖啡或选择精选液体时阅读。

Answer 4

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

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

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

Answer 5

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

vh，vw，%非常方便。我使用了height: 2.4vh;之类的CSS为我的SVG图片设置了动态尺寸。

Answer 6

另一种简单的方法是

return

Answer 7

调整currentScale属性在IE中有效（我已经使用IE 11进行了测试），但是在Chrome中不起作用。