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. FPGA实现CRC编码

    首先CRC应用的主要场景: 在数据通信中要求数据的高度可靠性,但实际上由于信道不理想或者噪声干扰都会导致数据的误码率 那么对于信道不理想产生的影响可以用均衡的方法进行改善或者消除,而噪声干扰的数据误码 ...

  2. C# SerialPort 读写三菱FX系列PLC

    1:串口初始化 com = , Parity.Even, , StopBits.One); 2:打开关闭串口 if (com.IsOpen) { com.Close();//关闭 } com.Open ...

  3. SHELL用法七（Sed语句）

    1.SHELL编程Sed语句案例实战 1)SHELL编程四剑客之二的Sed工具,主要是用于Linux系统文本文件的编辑. 打印的,也称为非交互模式编辑器(vi|vim交互模式编辑器),Sed工具的语法 ...

  4. 隐私标签(Privacy.Tag)：轻轻一贴，愉快拍照！

    用相机去捕捉精彩瞬间,用照片来记录生活足迹,并实时地与朋友们分享当下的心情,似乎已成为我们忙碌生活中最有趣的调味剂.但随着移动设备照相功能的日益完善,以及各大社交平台的不断兴起,很多时候,你是否也会有 ...

  5. [洛谷P4299] 首都

    题目传送门 还是维护子树信息. 但是这里多了一个找重心的操作. 这里有一个关于树重心的结论,据说可以用反证法证明.反正我不会证 就是:新的重心一定在原来两个重心之间的那条树链上. 这样我们逐步缩小搜索 ...

  6. js寄生组合式继承

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. es6 转载

    1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...

  8. python基础局部变量、全局变量

    局部变量的作用域只作用与当前函数块(或代码块)中,对函数块(或代码块)之外的重名变量,没有任何影响. 在函数块(或代码块)中,局部变量可用通过global关键字声明变量来改变在函数块(或代码块)之外对 ...

  9. 初识JS之数据类型

    JavaScript JavaScript引入方式 Script标签内写代码 <script> // 在这里写你的JS代码 </script> 引入额外的JS文件 <sc ...

  10. Python---7函数（调用&定义函数）

    函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数abs(),只有一个参数.可以直接从Python的官方网站查看文档: http: ...