转载

SVG——显示区域

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 上截取一块区域。

然后将截取的内容铺满 viewPort

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"

slice

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

preserveAspectRatio="xMinYMin slice"

none

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

preserveAspectRatio="none"

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

原文  https://segmentfault.com/a/1190000004741332
正文到此结束
Loading...