SVG——显示区域

BetaRabbit

SVG就像一张无限大的画布,需通过以下的属性给它指定显示区域,尺寸和坐标系统之后才能显示出我们需要的内容。

viewPort

viewPort也叫视口,用来控制画布区域的大小,主要通过widthheight来指定。

可以指定的单位包括:

  • px

  • em

  • ex

  • pt

  • pc

  • cm

  • mm

  • in

省略单位则默认使用pt。

宽高各100px
<svg width="100" height="100">

宽高各100em
<svg width="100em" height="100em">

viewPort左上角的点为坐标原点(0, 0),x轴向右不断变大,y轴向下不断变大。

viewBox

如果SVG是一个大画布,viewBox就是这块画布上你想让人看到的部分。举例来说,假设整个屏幕是viewPortviewBox就是截图的那个截取框,截完了之后再将框中的内容整个显示在屏幕(viewPort)上。

viewBox由以下几个属性构成:

  • x
    相对原点的横向位移

  • y
    相对原点的纵向位移

  • width
    viewBox的宽度

  • height
    viewBox的高度

<svg width="100" height="100" viewBox="0 0 50 50">

表示从原点开始,截取左上角1/4大小,然后将这1/4完全铺满viewPort

viewBoxviewPort上截取一块区域。
clipboard.png

然后将截取的内容铺满viewPort
clipboard.png

preserveAspectRatio

viewBox的宽高比和viewPort的宽高比正好相同时,那没什么问题。如果宽高比不一致,就得有个属性来决定如何显示了。
这个属性正是preserveAspectRatio

preserveAspectRatio="alignment [meet | slice]"

默认值为xMidYMid meet

其中,alignment指定轴和位置:

  • xMin
    viewPort左侧和viewBox的x轴最小值对齐

  • xMid
    viewPort水平中心和viewBox的x轴中心值对齐

  • xMax
    viewPort右侧和viewBox的x轴最大值对齐

  • yMin
    viewPort顶侧和viewBox的y轴最小值对齐

  • yMid
    viewPort垂直中心和viewBox的y轴中心值对齐

  • yMax
    viewPort底侧和viewBox的y轴最大值对齐

x和y可以任意组合,比如xMinYMaxxMaxYMid等等。

meet

meet表示按x和y轴中较小的尺寸等比缩小图形,以使图形完全填充viewPort

preserveAspectRatio="xMinYMin meet"

clipboard.png

slice

slice表示按x和y轴中较大的尺寸等比放大图形,并裁剪掉超出viewPort的部分。

preserveAspectRatio="xMinYMin slice"

clipboard.png

none

指定preserveAspectRationone表示根据不保留宽高比,图像会被挤压缩放,以适应viewPort

preserveAspectRatio="none"

clipboard.png


另外,值得一提的是,SVG中还能嵌套SVG,子SVG拥有自己的坐标系统,就好像大画布中的小画布一样。

阅读 6.2k

笨兔子
记录些随想、问题解决方法和平时学习的总结

全栈,猫奴

1.4k 声望
22 粉丝
0 条评论

全栈,猫奴

1.4k 声望
22 粉丝
文章目录
宣传栏