为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕前端131612 2019-10-04 16:11:16

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


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


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


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


查看完整描述

3 回答

?
繁星淼淼

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


例如,如果您具有以下条件:


<svg>

    <polygon fill=red stroke-width=0 

             points="0,10 20,10 10,0" />

</svg>

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


//img4.sycdn.imooc.com/5d96feda000129e903000200.jpg

现在,如果仅设置宽度和高度,则将更改SVG元素的大小,但不会缩放三角形:


<svg width=100 height=50>

    <polygon fill=red stroke-width=0 

             points="0,10 20,10 10,0" />

</svg>

//img1.sycdn.imooc.com/5d96fede0001668b03000200.jpg

如果设置了视图框,则将其转换为图像,以使给定的框(在图像的坐标系中)按比例缩放以适合给定的宽度和高度(在页面的坐标系中)。例如,将三角形放大为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>

//img3.sycdn.imooc.com/5d96fee10001692a03000200.jpg

如果要将其缩放到HTML视口的宽度,请执行以下操作:


<svg width="100%" viewBox="0 0 20 10">

    <polygon fill=red stroke-width=0 

             points="0,10 20,10 10,0" />

</svg>

//img3.sycdn.imooc.com/5d96fee50001a2ce03000200.jpg

请注意,默认情况下会保留宽高比。因此,如果您指定该元素的宽度应为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>

//img1.sycdn.imooc.com/5d96feeb0001068a03000200.jpg

(请注意,尽管在我的示例中,我使用了适用于HTML嵌入的语法,但要将示例作为图像包含在StackOverflow中,而是将其嵌入到另一个SVG中,所以我需要使用有效的XML语法)


查看完整回答
反对 回复 2019-10-04
?
弑天下

经过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问题的最大贡献。


您可以将其更改为所需的任何像素值,但我建议像我一样使用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还是不使用CSS,它都几乎分解了每种可能的操作SVG的方法。我建议在随便喝咖啡或选择某些液体时阅读。


查看完整回答
反对 回复 2019-10-04
?
隔江千里

您将需要进行如下转换:


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


查看完整回答
反对 回复 2019-10-04

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信