SVG - 创建SVG图片
时间:2022-05-03
本文章向大家介绍SVG - 创建SVG图片,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
SVG - 创建SVG图片
HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Canvas要难很多。没有合适的中文文档,自己只能去翻译英文文档(唉,英语不好啊)。今天先来说说SVG的基本知识以及创建SVG的基本方法。
SVG是什么
W3C推荐的网页图形格式,类似于Flash,SVG是一种描述二维矢量图形的标记语言,但它是一种开发的以XML为基础的语言,不是一种私有语言。
SVG的支持程度
IE8-以及Android 2.3默认浏览器是不支持SVG的
对SVG的基本理解
可以把SVG想象成类似于HTML的图形,可以与其他浏览器技术,如JavaScript、CSS、DOM无缝集合
为何使用SVG-SVG的优势
1、开发者可以使用任何简单的文本/网页编译器进行创建和修改。不需要Flash、PhotoShop、Paint等软件。
2、与像素无关,可以放大或者缩小,甚至打印成任意大小,图片质量不会改变。
创建SVG图片
方法1:使用外部引入SVG的方式
SVG是一个以.svg结尾的文本格式的文件,可以将这个文件以普通图片的方式嵌入到DOM当中。
<object data="XXX.svg" type="image/svg+xml" />
SVG文件的编辑
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>
SVG - 示例demo
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
<circle cx="350" cy="180" r="20" fill="black" />
<circle cx="450" cy="180" r="20" fill="black" />
<clipPath id="faceClip">
<rect x="300" y="240" width="220" height="60" />
</clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</svg>
方法2 在HTML中直接使用SVG
SVG - 示例demo
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
<circle cx="350" cy="180" r="20" fill="black" />
<circle cx="450" cy="180" r="20" fill="black" />
<clipPath id="faceClip">
<rect x="300" y="240" width="220" height="60" />
</clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</g>
</svg>
- 域名Deskbike.com刚注册没多久就以五位数结拍
- 一起Polyfill系列:Function.prototype.bind的四个阶段
- winform实现拼图游戏
- 一起Polyfill系列:让Date识别ISO 8601日期时间格式
- Oracle 监听器无法启动(TNS-12537,TNS-12560,TNS-00507)
- Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)
- Python补充03 Python内置函数清单
- 不懂JQuery的孩子:自封装Ajax函数
- .Net魔法堂:史上最全的ActiveX开发教程——ActiveX与JS间交互篇
- 飓风“桑迪”路径图的制作
- 根据标准word模板生成word文档类库(开源)
- Oracle 监听器无法启动(TNS-12555,TNS-12560,TNS-00525)
- Python补充02 Python小技巧
- 四则运算核心算法(开源)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法