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

如何使用<svg> viewBox属性?

如何使用<svg> viewBox属性?

杨魅力 2019-12-26 09:27:13
我正在从官方文件中学习svg,有这样的说法。我不明白,如果它已经具有widthand height属性,那么再次指定它又有viewBox="0 0 1500 1000"什么用呢?据说,“一个px单位被定义为等于一个用户单位。因此,“ 5px”的长度与官方文档中的“ 5”的长度相同,因此此viewBox的宽度为1500px, 1000高度视图,超过300px和200px。那么为什么要首先定义宽度和高度值呢? <svg width="300px" height="200px" version="1.1"         viewBox="0 0 1500 1000" preserveAspectRatio="none"         xmlns="http://www.w3.org/2000/svg">
查看完整描述

3 回答

?
PIPIONE

TA贡献1829条经验 获得超9个赞

宽度和高度是多少<svg>。viewBox控制其内容的显示方式,因此viewBox =“ 0 0 1500 1000”会将<svg>元素的内容按比例缩小5(1500/300 = 5和1000/200 = 5),并且内容将为1 / 5没有viewBox时的大小,但是<svg>

假设您有一个弹性表面,并将其切成4个相等的部分。如果扔掉3块,则表面的大小是原始表面的1/4。如果现在拉伸表面并使其大小与原始表面相同,则该表面上的所有内容都会是该尺寸的两倍。这就是viewBox和width / height关联的方式。


查看完整回答
反对 回复 2019-12-26
?
茅侃侃

TA贡献1842条经验 获得超21个赞

如果不指定视区,则元素中所有无单位的数字均假定为像素。(并且SVG假设将90 dpi或每英寸的像素从厘米等单位转换为像素。)


一个视图框使您可以在元素中使无单位数字表示“用户单位”,并指定如何将这些单位映射到大小。为简单起见,仅考虑x坐标,即标尺。您的视图框显示标尺将具有1500个单位,以匹配svg的200像素大小宽度。


从0到1500(无单位,即用户单位)的线元素将拉伸200像素,如图所示,即横跨svg绘图的宽度。


(并且由于SVG可伸缩且不会降低分辨率,因此当用户放大或缩小像素时,像素在现实世界中的意义并不大。)


它是一种坐标转换。


我建议您从类似“ SVG Essentials”的书中学习,大约要用10美元,我从中大致引用了这个答案。


查看完整回答
反对 回复 2019-12-26
?
慕勒3428872

TA贡献1848条经验 获得超5个赞

默认情况下


<svg width="300" height="200">

svg网格的“标尺”以像素为单位(该svg中的所有形状均以像素为单位)


但是您想使用自己的单位,可以使用viewBox attr:


<svg width="300" height="200" viewBox="0 0 1500 1000">

这意味着:


水平轴: 1500(您的宽度单位)= 300px => 1(您的宽度单位)= 300 / 1500px = 1 / 5px


垂直轴: 1000(您的身高单位)= 200px => 1(您的身高单位)= 200 / 1000px = 1 / 5px


现在,svg中的所有形状都会缩放:

与原点相比,它们的宽度缩小到1 / 5px(缩小1/5 <1 =>)。


与原点相比,它们的高度也缩放为1 / 5px(1/5 <1 =>缩小)


查看完整回答
反对 回复 2019-12-26
  • 3 回答
  • 0 关注
  • 590 浏览
慕课专栏
更多

添加回答

举报

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