目录 [翻译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绘图的截图

例如一个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>

网页上的样子

如何在网页中显示一个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字体使用,就不举例了,因为我不熟悉。。。。。

[翻译svg教程]svg学习系列 开篇的更多相关文章

  1. YYKit学习系列 ---- 开篇

    准备花半年时间系统学习YYKit,  学习过程会放入"YYKit学习系列"这个分类, 喜欢YYKit的可以随时留意我的文章, 一起学习!!!

  2. [翻译svg教程]svg中的circle元素

    svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...

  3. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  4. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  5. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  6. SVG 教程

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...

  7. Windows 8实例教程系列 - 开篇

    原文:Windows 8实例教程系列 - 开篇 2012年10月26日,微软发布Windows 8操作系统以及自主品牌平板电脑Surface,Windows作为世界上最流行的操作系统,发布一周内,下载 ...

  8. opencv-python教程学习系列1-安装库

    前言 以后的项目可能会用到python和opencv进行实现,故准备opencv-python教程学习系列记录学习过程的点滴,这是这一系列的开篇,坚持学习,共同进步. 系列教程参照OpenCV-Pyt ...

  9. XAML实例教程系列 - 开篇(一)

    XAML实例教程系列 - 开篇 2012-05-14 11:47 by jv9, 5588 阅读, 8 评论, 收藏, 编辑 去年,曾答应银光中国论坛的朋友推出一个关于XAML语言实例教程系列,帮助学 ...

随机推荐

  1. python table转空格

    有需求: 预留,先上代码: import os def Table_Space(file_name,lis_out,tab_num = 4): file_str = open(file_name,&q ...

  2. 将十进制数转为一个n位数的密码(每位都是个m进制数)

    例如一个6位数的10进制密码,共有106个密码,如果把每个6位数的密码编成号就是[0,106-1].这是十进制的情况,即6个位,每个位有10种选择.如果要遍历所有密码,需要6重for循环,每个循环10 ...

  3. 如何设置redis中hash的field的expire ?

    redis > hset expire:me name tom (integer) redis > hget expire:me name "tom" redis &g ...

  4. erlang 故障排查工具

    系统级别perf top, dstat -tam, vtune 都能很好分析beam 瓶颈,本文主要erlang 级别排查: 1. 反编译 确认线上运行代码是否正确,reltools没掌握好,升级偶尔 ...

  5. 为WIN8 APP创建置顶desktop应用

    Windows 8: TopMost window   I am working on my next ambitious project “MouseTouch” which is multi to ...

  6. 序列化多个form表单内容同时提交

    一.首先将表单主体序列化为json对象. 方法: //将表单序列化为json,这里加了个jQuery的扩展方法 $.fn.serializeJson = function () { var resul ...

  7. 【svn】SSL error: A TLS warning alert has been received的解决方法

    第一次用svn(>_<),结果在运行下面语句时,svn很不友好的报错了..... svn co http:10.11.12.13/test1/test2 . 报错信息: svn: OPTI ...

  8. C语言-纸牌计算24点小游戏

    C语言实现纸牌计算24点小游戏 利用系统时间设定随机种子生成4个随机数,并对4个数字之间的运算次序以及运算符号进行枚举,从而计算判断是否能得出24,以达到程序目的.程序主要功能已完成,目前还有部分细节 ...

  9. vim 加行号 和取消行号

    :set nu #是加行号 :set nonu #是去掉行号

  10. linux 查看目录所在的分区

    df -h /data2 Filesystem Size Used Avail Use% Mounted on /dev/xvda1 20G .5G 12G % /