[翻译svg教程]svg学习系列 开篇
2014-12-14 10:33
337 查看
目录 [翻译svg教程]svg学习系列 开篇
【翻译svg教程 】svg 的坐标系统
[翻译svg教程]svg 中的g元素
[翻译svg教程]svg中矩形元素 rect
[翻译svg教程]svg中的circle元素
[svg翻译教程]椭圆(ellipse元素)和线(line元素)
[svg 翻译教程]Polyline(折线)polygon(多边形)
[翻译svg教程]Path元素 svg中最神奇的元素!
网上svg的资料太少 买个书也买不到 碰巧遇到一个外国友人的svg学习些列,翻译下
http://tutorials.jenkov.com/svg/index.html
svg 简介
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
今天的现代多数浏览器都支持SVG ie9+ 火狐 chrome 等
svg 最大的用途就是绘图 各种图标 等 ,在网页上直接绘图
因为svg本身的dom节点,所以可以和网页上其他dom节点通信
这是些svg绘图的截图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/77b7412e683ed846727512434715eb2c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/8fb6eb473ee8f91430e3d13301577a6b.png)
例如一个svg矩形
代码
网页上的样子
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/2aac222daebeaa3e1bb38dcc7178335d.png)
如何在网页中显示一个svg 呢
方法有很多
但我们常用的也就两个
1 将svg作为一个dom节点插入到dom中
例如
这样的好处是可以用jquery等各种js工具操作svg,事件什么的也都可以
2图片和背景图片
图片
将svg的内容作为图片显示
背景图片
还有一中最近诞生的用户就是将svg作为web字体使用,就不举例了,因为我不熟悉。。。。。
【翻译svg教程 】svg 的坐标系统
[翻译svg教程]svg 中的g元素
[翻译svg教程]svg中矩形元素 rect
[翻译svg教程]svg中的circle元素
[svg翻译教程]椭圆(ellipse元素)和线(line元素)
[svg 翻译教程]Polyline(折线)polygon(多边形)
[翻译svg教程]Path元素 svg中最神奇的元素!
网上svg的资料太少 买个书也买不到 碰巧遇到一个外国友人的svg学习些列,翻译下
http://tutorials.jenkov.com/svg/index.html
svg 简介
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
今天的现代多数浏览器都支持SVG ie9+ 火狐 chrome 等
svg 最大的用途就是绘图 各种图标 等 ,在网页上直接绘图
因为svg本身的dom节点,所以可以和网页上其他dom节点通信
这是些svg绘图的截图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/77b7412e683ed846727512434715eb2c.png)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/8fb6eb473ee8f91430e3d13301577a6b.png)
例如一个svg矩形
代码
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/> </svg>
网页上的样子
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/03/2aac222daebeaa3e1bb38dcc7178335d.png)
如何在网页中显示一个svg 呢
方法有很多
但我们常用的也就两个
1 将svg作为一个dom节点插入到dom中
例如
<div> <svg> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> </svg> </div>
这样的好处是可以用jquery等各种js工具操作svg,事件什么的也都可以
2图片和背景图片
图片
<img src="/svg/circle-element-1.jsp">
将svg的内容作为图片显示
背景图片
div { background-image: url('my-svg-image.svg'); background-size : 100px 100px; }
还有一中最近诞生的用户就是将svg作为web字体使用,就不举例了,因为我不熟悉。。。。。
相关文章推荐
- 一步一步学习多线程系列文章---开篇《Threading in C#》翻译
- 经典教程翻译系列: Mach-II新手指南(上)
- 经典教程翻译系列: mach-ii.info的新手常见问题解答
- 基于TCP的网络游戏黑白棋系列教程开篇
- [翻译]XNA系列教程 2D 碰撞教程 1: 矩形检测
- [翻译:ASP.NET MVC 教程]ASP.NET MVC学习之旅——总索引
- 经典教程翻译系列: 间接调用体系入门
- [翻译]Popfly系列课程7 –深入幕后:使用 Popfly学习XML的初学者指南
- 学习Model-Glue框架的系列教程-Building your first Model-Glue Application中文理解通俗版(5)
- 学习Model-Glue框架的系列教程-Building your first Model-Glue Application中文理解通俗版(4)
- [翻译]XNA系列教程2D碰撞教程3:转换物体的碰撞检测
- 经典教程翻译系列: 插件的设计
- 转一篇正在学习中的好文!【翻译】Scott Mitchell的ASP.NET2.0数据教程中文版 微软推荐学习资源
- (翻译)UIP Application Block学习系列(二)谁将学习这个文档
- 学习Model-Glue框架的系列教程-Building your first Model-Glue Application中文理解通俗版(6)
- 经典教程翻译系列: Mach-II新手指南(下)
- (翻译)UIP Application Block学习系列(一)欢迎学习User Interface Process Application Block
- sql server数据库优化教程系列--开篇
- FMS3系列学习网上教程
- 经典LinuxCBT视频教程系列 Linux快速学习视频教程一帖通