如何使用其父容器制作svg秤？

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

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

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

但是，我想通过CSS向SVG添加其他样式，因此链接外部样式不是一种选择。如何制作嵌入式SVG秤？

要在SVG图像内指定坐标，而与图像的缩放大小无关，请使用viewBoxSVG元素上的属性来定义图像在坐标系中的边界框，并使用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语法）

经过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/zh-CN/docs/Web/SVG/Attribute/viewBox

min-x，min-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左移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/zh-CN/docs/Web/SVG/Attribute/width

看我上面的示例代码。请注意，我是如何只设置宽度而不设置高度的。我将其设置为100％，以便填充其中的容器。这可能是回答此Stack Overflow问题的最大贡献。

您可以将其更改为所需的任何像素值，但我建议像使用一样将其放大到最大尺寸，然后通过父容器使用CSS对其进行控制，使用100％。我建议这样做，因为您将获得“适当的”控制。您可以使用媒体查询，并且可以控制大小而无需疯狂的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还是不使用CSS，它都几乎分解了每种可能的操作SVG的方法。我建议在随便喝咖啡或选择某些液体时阅读。

您将需要进行如下转换：

使用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中工作。

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

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

另一个简单的方法是

transform: scale(1.5);

调整currentScale属性可在IE中使用（我已使用IE 11进行了测试），但不适用于Chrome。