前端技术之SVG图片(图标)创建
0.SVG预备知识
SVG是什么
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义WEB上使用的矢量图
SVG 使用 XML 格式定义图形
SVG 图像在缩放时其图形质量不会有所损失
SVG 是W3C推荐的
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体
SVG的优势
SVG 可被非常多的工具读取和修改(比如记事本)
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可缩放的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
SVG 是开放的标准
SVG 文件是纯粹的 XML
1. SVG基本形状
svg有一些预定义的形状元素
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
<!DOCTYPE html>
<html><body><svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/><rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/><circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/><ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/><line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/><polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/><polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/><path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg></body>
</html>
呈现效果:
2. 理解坐标体系
和html文档的定位方式一样,但是注意和three.js的坐标不一样!
3. 形状的元素解析
公共:
x/y, cx/cy: 起点或者中心点的坐标
fill: 填充颜色
fill-opacity: 填充的透明度
stroke: 边框颜色
stroke-opacity 控制描边的不透明度(范围:0 - 1)
stroke-width 定义矩形边框的宽度
矩形rect:
width: 宽度 height:高度, rx/ry: 圆角的x/y方位半径
园circle:
r: 园的半径
椭圆ellipse:
rx/ry: 水平/垂直半径
线段line
x1/y1: 起点位置, x2/y2:终点位置
折线polyline
点的坐标集合
多边形polygen
最后一个点自动回到起始点
路径path
最为强大,由“命令+参数”构成序列
命令字包括:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
注:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
前端技术之SVG图片(图标)创建相关推荐
- web前端工具(配色图片图标)
配色工具: https://kuler.adobe.com/zh/explore/newest/ http://slayeroffice.com/tools/color_palette/ 在线取色: ...
- 前端技术之:使用npx创建一个Nuxt.js项目
$ npx create-nuxt-app my-first-nuxtjs npx: 401 安装成功,用时 43.891 秒 > Generating Nuxt.js project in / ...
- vue使用 svg图片以及修改svg图片颜色
一.如何使用svg 1.创建svg专用文件夹,里面只存放svg图片 2. 创建SvgIcon组件 <template><div v-if="isExternal" ...
- 前端VUE2.x优雅使用svg图片作为图标
安装svg-sprite-loader插件 npm install svg-sprite-loader 创建src/assets/icons/svg文件夹存放svg图片 创建src/assets/ic ...
- 前端svg字体图标使用_材质设计图标字体与svg以及如何在角度中使用svg精灵
前端svg字体图标使用 In this article we will compare usage of Google's Material Design Icons, as font and SVG ...
- Python3.7将普通图片(png)转换为SVG图片格式并且让你的网站Logo(图标)从此”动”起来
在之前的几篇文章中,介绍了业界中比较火爆的图片技术SVG(Scalable Vector Graphics),比如Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascrip ...
- Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
- 界面上展示svg图片_使用SVG创建SciFi用户界面元素
界面上展示svg图片 For some reason, clipped corners on UI elements is visual shorthand for "the future& ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- 【前端实例代码】Html5+css3创建登录和注册表单~实现新拟态新拟物风格(Neumorphism)网页图标效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: [web前端特效源码]Html5+css3创建登录和注册表单2!实现新拟态新拟物风格(Neumorphism)网页图标效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: ...
最新文章
- 大数据如何学习 cda认证_第十届CDA认证考试 LEVEL 1 优秀考生访问录:我是如何备考的?...
- 浏览器中Javascript的加载和执行
- C语言满分:L1-061 新胖子公式 (10分)
- 如何判断当前系统使用了share memory作为design layer processing
- 在单独的WAR组件中对SPA资源和API实现进行分区
- 英语笔记:词组句子:0712
- 32 - III. 从上到下打印二叉树 III
- 检查Prefab或场景物件是否丢失脚本
- html分组标签tfoot,网页布局中 tbody标签与thead和tfoot标签使用
- vscode markdown preview enhanced css font
- 【英语学习】【WOTD】feisty 释义/词源/示例
- iOS添加pch头文件
- 网易云静态页面html+css-----首页、热歌榜、搜索
- ide模式ahci模式_IDE的完整形式是什么?
- Pj Immediate Decodability
- Linux漏洞:showmount -e信息泄露(CEE-1999-0554)
- capl保存trace_CANoe常用操作(CANoe系列其一)
- 不存在从“int” 转换到“ListNode”的适当构造函数 错误解决方法
- Mendeley无法安装word插件解决方案及插入参考文献教程
- JavaSecurity和JAAS——Java标准安全体系概述(上)