网站群建设指南,如何将网站开发成微信小程序,沈阳建筑大学网络信息化中心,做视频网站需要多少上传svg 进阶
svg 应用场景
绘制 icon绘制动画
svg viewport 和 viewBox viewport 是 svg 图像的可见区域 viewBox 是用于在画布上绘制 svg 图形的坐标系统 在一下案例中 svg中 width“500” height“200” 就是可视区域 比如你的svg是100X100但是你的可视区域只有20X20 那么他…svg 进阶
svg 应用场景
绘制 icon绘制动画
svg viewport 和 viewBox viewport 是 svg 图像的可见区域 viewBox 是用于在画布上绘制 svg 图形的坐标系统 在一下案例中 svg中 width“500” height“200” 就是可视区域 比如你的svg是100X100但是你的可视区域只有20X20 那么他就不能展示—viewport viewBox表示svg的绘制坐标系默认值取viewport svg的viewBox是怎么计算的呢 就是拿viewport 中的x和y除viewBox的x和y得到一个比值然后拿着这个比值去等比的缩放或者放大svg的宽高 这个 viewBox 有四个数字分别表示左上角 x 坐标、左上角 y 坐标、宽度和高度。
svg width500 height200 viewBox0 0 50 20 styleborder: 1px solid #000000rect x20 y10 width10 height5 stylestroke: #000000; fill:none;/
/svg 上述案例中 viewBox 坐标系中 1 10px上述代码相当于
svg width500 height200 styleborder: 1px solid #000000rect x200 y100 width100 height50 stroke-width10 stylestroke: #000000; fill:none;/
/svgpreserveAspectRatio 用于当 viewport 和 viewBox 宽高比不相同时指定这个坐标系在viewport 中是否完全可见同时也可以指定它在viewport 坐标系统中的位置
preserveAspectRatio 是一个较难理解的概念它相当于在 viewport 内部绘制了一个虚拟内框它的默认值为xMidYMid meet
svg width500 height200 viewBox0 0 200 200 styleborder: 1px solid #000000 preserveAspectRatioxMidYMid meetrect x100 y100 width100 height50 stroke-width10 stylestroke: #000000; fill:none;/
/svg上述配置的原理如下图
svg width500 height200 viewBox0 0 200 200 styleborder: 1px solid #000000 preserveAspectRatioxMaxYMin meetrect x100 y100 width100 height50 stroke-width10 stylestroke: #000000; fill:none;/
/svg上述配置的原理如下图
preserveAspectRatio 第二个参数如下
meet: 保持宽高比并将viewBox缩放为适合viewport的大小 meet 模式下svg 将优先采纳压缩比较小的作为最终压缩比meet 是默认参数 slice: 保持宽高比并将所有不在viewport中的viewBox剪裁掉
svg width500 height200 viewBox0 0 200 200 styleborder: 1px solid #000000 preserveAspectRatioxMidYMax slicerect x100 y100 width100 height50 stroke-width10 stylestroke: #000000; fill:none;/
/svg 上述代码原理如下图
svg width500 height200 viewBox0 0 200 200 styleborder: 1px solid #000000 preserveAspectRatioxMaxYMin slicerect x100 y100 width100 height50 stroke-width10 stylestroke: #000000; fill:none;/
/svg 上述代码原理如下图 slice 模式下svg 将优先采纳压缩比较大的作为最终压缩比 none: 不保存宽高比。缩放图像适合整个viewbox可能会发生图像变形 none 模式下svg 将分别计算 x 和 y 轴的压缩比 svg width500 height200 viewBox0 0 200 200 styleborder: 1px solid #000000 preserveAspectRationonerect x100 y100 width100 height50 stroke-width10 stylestroke: #000000; fill:none;/
/svg svg 组件库
defs 标签g 标签
g idarrowpolyline points30 20, 70 50, 30 80 filltransparent strokecurrentColor stroke-width3/polyline
/guse 标签
svg :style{color:red}use href#filledArrow/use
/svgsymbol symbol 与 g 标签类似但 symbol 可以拥有一个独立的 viewBox
svg width0 height0symbol idcross viewBox0 0 100 100line x150 y110 x250 y290 stroke-width8 strokecurrentColor/lineline x110 y150 x290 y250 stroke-width8 strokecurrentColor/line/symbol
/svg使用 iconfont 的正确姿势
集成 svg 图标
找到合适的 svg 图标下载图标将 svg 代码集成到组件库在 vue 项目中使用组件
创建 iconfont 项目
创建 iconfont 项目上传 svg 图标生成 js 库 官方帮助文档查看推荐使用 symbol 方式 创建 svg 组件
外部引用 symbol 链接接收 icon nameicon 外层样式封装
