SVG 意为可缩放矢量图形（Scalable Vector Graphics）。

HTML三种方法导入svg文件：

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>

<p>This is an HTML paragraph</p>
<!--1-->
<!--<embed src="rect1.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />-->

<!--2-->
<!--<object data="rect1.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />-->

<!--3-->
<!--<iframe width="300" height="100" src="rect1.svg"></iframe>-->

<object data="background.svg" width="1000" height="1000"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</body>
</html>

SVG文件内容编辑：

<?xml version="1.0" standalone="no"?> //xml声明
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> //引用外部svg DTD

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.2;stroke-opacity:0.9"/>
</svg>

上面只是一个矩形svg的例子；

更多：

矩形（rect）：  style属性里写样式 rx,ry边角

圆形（circle）：  cx，cy圆心坐标

椭圆（ellipse）：cx，cy中心坐标 rx,ry水平，垂直半径

线（line）：x1 y1起点坐标 x2 y2终点坐标

多边形（ploygon）：points节点坐标 x,y x1,y1 x2,y2

折线（ployline）：points节点坐标 x,y x1,y1 x2,y2

路径（path）：M A L C H V S Q T Z

几个常用属性：

stroke，stroke-width：边框，边框宽度

fill：填充颜色

CSS的SVG学习的更多相关文章

  1. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  2. SVG 学习（一）

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...

  3. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG学习笔录（一）

    SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...

  9. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

随机推荐

  1. B-Tree索引

    翻译自http://dev.mysql.com/doc/refman/5.6/en/index-btree-hash.html 理解B-Tree和Hash的数据结构能够帮助我们预测不同存储引擎下的查询 ...

  2. Eclipse中项目过大引起的 IDE 加载缓慢，JVM 内存不足的情况解决

    如果 IDE 加载项目非常缓慢,甚至常常出现卡死的情况,有可能是开发工具设置的 JVM 内存不够引起的.解决办法:找到 Eclipse 的安装目录,修改 Eclipse.ini 配置文件.修改此配置文 ...

  3. OpenCV 基本的阈值操作

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  4. sm4算法（附源码、测试代码）

    from:http://blog.csdn.net/mao0514/article/details/52930944 SM4是我们自己国家的一个分组密码算法,是国家密码管理局于2012年发布的.网址戳 ...

  5. Java捕获并处理线程失败抛出的异常

    使用 UncaughtExceptionHandler 示例代码如下: Thread.UncaughtExceptionHandler handler = new Thread.UncaughtExc ...

  6. 吴裕雄--天生自然 oracle学习笔记：Sqlplus连接的时候中文出现乱码“?胧淙胗没?”的解决方案

  7. 机器学习入门教程-k-近邻

    k-近邻算法原理 像之前提到的那样,机器学习的一个要点就是分类,对于分类来说有许多不同的算法,所谓的物以聚类,分以群分.我们非常的清楚,一个地域的人群,不管在生活习惯,还是在习俗上都是非常相似的,也就 ...

  8. 对Java tutorial-examples中hello2核心代码分析

    1.在hello2中有两个.java源文件分别是GreetingServlet.Java和ResponseServlet.jva文件主要对以下核心代码做主要分析. String username = ...

  9. ChatterBot聊天机器人呢结构（五）：ChatterBot对话流程

    原文地址:http://www.bugingcode.com/blog/ChatterBot_Dialogue_process.html 创建机器人 部署机器人的各种属性,根据前面的章节里聊天机器人的 ...

  10. Flask向模板中JS传值简便方式

    后台传值: return render_template('statistics/numberofuserlogin/login_number.html', result_json = json.du ...