SVG 入门指北(二)

SVG 相关概念

本节中所提及的概念非常重要,他是 SVG 的基础,在应用中经常可以看到。需要仔细理解揣摩。

画布

画布无限大,可以在任何位置绘制内容。

视窗(viewport)

在使用 SVG 展示内容时,其实是在通过一个视窗在看画布上的东西。就比如我们透过窗户(视窗)看天空(画布),看到的那一小片天空,叫做视野。随意改变窗户的大小不是一件容易的事,但是可以通过<svg />的属性 widthheight 来随意改变视窗的宽高。就算不手动设置,浏览器通常也会有默认值。

html 复制代码
<!--
在 100px * 100px 的视窗内,以画布的(0,0)点(画布的原点和视窗的原点默认对齐)为圆心画半径为 40 的圆,填充色绿色
-->
<svg width="100" height="100">
  <circle cx='0' cy="0" r="40" fill="green" />
</svg>


See the Pen <a href="https://codepen.io/healerlzh/pen/wvRWVQm"> SVG - default hidden</a> by Healer (<a href="https://codepen.io/healerlzh">@healerlzh</a>) on <a href="https://codepen.io">CodePen</a>.

现实中,透过窗户的视野是有限的。SVG 也一样,所有超出视窗的内容默认不可见,它是通过 SVG 的默认样式overflow: hidden来实现的。所以可以通过设置overflow: visible让超出视窗边界的内容变得可见。

视野(viewBox)

上文我们说透过窗户看到的那片天空是我们视野。在SVG中我们可以选定画布上的任意位置任意大小的内容来放到视窗中做为我们的视野。换句话说,它不像现实中窗外的视野那样总是看那么大范围看那些东西,SVG可以让我们透过有限的视窗,看到画布上任意位置任意大小的内容,这就是SVG viewBox的作用。viewBox 属性的值是一个包含 4 个参数的列表 min-x,min-y,width,height,以空格或者逗号分隔开,min-xmin-y 决定了 viewBox 的左上角,widthheight 决定了 viewBox 的宽和高。注意 widthheight 如果设置成 0 ,会禁止元素的渲染。

在视窗一节中,我们通过设置overflow: visible 来显示完整的圆。现在我们使用移动视野的方式来实现。

html 复制代码
<svg width="100" height="100" viewBox="-40 -40 100 100">
  <circle cx='0' cy="0" r="40" fill="green" />
</svg>


See the Pen <a href="https://codepen.io/healerlzh/pen/RwEGYBo"> SVG - viewBox equal ratio</a> by Healer (<a href="https://codepen.io/healerlzh">@healerlzh</a>) on <a href="https://codepen.io">CodePen</a>.

viewBox 就很像一个取景器,将我们设定坐标范围中的内容呈现在视窗中。 这里视窗与视野大小一致,所展示的内容大小不变。 设置viewBox="-40 -40 80 80"视野小于视窗 ,内容铺到 100 的视窗中被放大 (这里不做图解和案例了,发挥空间想象)。 设置viewBox="-40 -40 200 200"视野大于于视窗 ,内容铺到 100 的视窗中被缩小(同上)。

保持纵横比(preserveAspectRatio)

本文为了循序渐进的讲述,上述的案例中视窗与视野的宽高定义总是等比的。现实总是那么不尽人意,如果宽高比不一样,那么视野铺到视窗中的时候,SVG 图形就可能发生变形。由此我们需要preserveAspectRatio(保持纵横比)

preserveAspectRatio="align [meetOrSlice]"

  • align 是否保持纵横比,以及视野与视窗如何对齐

    可选值 说明
    none 不保持纵横比
    xMinYMin 保持纵横比。 横向左侧对齐,纵向顶部对齐。
    xMidYMin 保持纵横比。 横向局中对齐,纵向顶部对齐。
    xMaxYMin 保持纵横比。 横向右侧对齐,纵向顶部对齐。
    xMinYMid 保持纵横比。 横向左侧对齐,纵向局中对齐。
    xMidYMid (默认值) 保持纵横比。纵横局中对齐。
    xMaxYMid 保持纵横比。横向右侧对齐,纵向局中对齐。
    xMinYMax 保持纵横比。横向左侧对齐,纵向底部对齐。
    xMidYMax 保持纵横比。横向局中对齐,纵向底部对齐。
    xMaxYMax 保持纵横比。横向右侧对齐,纵向底部对齐。
  • meetOrSlice [可选参数] 如何保持纵横比。align值为none时,此参数无效。

    可选值 说明
    meet (默认值) 保持纵横比缩放视野以适应视窗,能展现视野全部内容。类似background-size: contain
    slice 保持纵横比并放大比例小的方向适应视窗,可能视野展示不全。类似background-size: cover

整两个示例?

See the Pen <a href="https://codepen.io/healerlzh/pen/NWebeZX"> SVG - preserveAspectRatio</a> by Healer (<a href="https://codepen.io/healerlzh">@healerlzh</a>) on <a href="https://codepen.io">CodePen</a>.

相关推荐
王哈哈^_^1 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具3 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json