如何使用其父容器创建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图像中指定独立于图像缩放大小的坐标,请使用viewBoxSVG元素上的属性来定义图像的边界框在图像的坐标系中的位置,并使用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

经过48小时的研究,我最终做到这一点,以实现比例缩放:

注意:此示例使用React编写.如果您没有使用它,请将驼峰案例内容更改为连字符(即:更改backgroundColor为background-color并将样式更改Object回a 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制作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.这意味着它在视图框中保持居中.

宽度

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 3

你会想要做一个转换:

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

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

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

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

Answer 5

这是一个简单的方法：

类型 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 相同的操作。

Answer 6

另一种简单的方法是

transform: scale(1.5);

Answer 7

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

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