CSS的SVG学习
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学习的更多相关文章
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
- SVG 学习（一）
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gr ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<三>渐变
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<二>进阶 SVG世界，视野，视窗 stroke属性 svg分组
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG学习笔录（一）
SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...
- [翻译svg教程]svg学习系列 开篇
目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...
随机推荐
- h指数|JCR|ORCID|CCC|Research ID|BKCI|
h指数有如下缺点: 年龄大且平庸的学者比杰出的青年学者的h-index大.学科之间h指数的评价标准不同.有时候,审稿人暗示作者引用自己文章. 再此处可找到相关信息: JCR上可以查询到影响因子,以下是 ...
- Steve Lin:如何撰写一篇优秀的SIGGRAPH论文
Lin:如何撰写一篇优秀的SIGGRAPH论文" title="Steve Lin:如何撰写一篇优秀的SIGGRAPH论文"> 英文原版 PPT下载:http:// ...
- Python---8函数（函数的参数&递归函数）
一.函数的参数 Python的函数定义非常简单,但灵活度却非常大.除了正常定义的必选参数外,还可以使用默认参数.可变参数和关键字参数,使得函数定义出来的接口,不但能处理复杂的参数,还可以简化调用者的代 ...
- openssl编译时！遇见的问题
openssl编译: 1.编译静态库 ./config --prefix=/root/openssl/soft make 2.编译动态库 ./config --prefix=/root/openssl ...
- 使用fiddler盖楼评论
使用fiddler盖楼评论:使用replay重复请求某接口
- 那些被刻意“阉割”的名人名言
"天才是百分之一的灵感,百分之九十九的汗水",这句名言大家都知道的吧!不过还有好多人不知道的是这句名言还有后半句:"但百分之一的灵感甚至比百分之九十九的汗水更重要.&qu ...
- IDEA 详细使用教程
第一步:安装 略 安装首先需要Java语言的运行环境,这里不做概述. 第二步:破解 这里使用的是2016版的,所以直接在网上搜索秘钥即可 https://blog.csdn.net/ksksjipen ...
- Elasticsearch,Filebeat,Kibana部署,添加图表及elastalert报警
服务端安装 Elasticsearch和Kibana(需要安装openjdk1.8以上) 安装方法:https://www.elastic.co以Ubuntu为例: wget -qO - https: ...
- IDEA系列（九）Intellij IDEA界面介绍 - 哲也的博客
原文出处:https://github.com/judasn/IntelliJ-IDEA-Tutorial 首次打开 重点说明: IntelliJ IDEA 是没有类似 Eclipse 的工作空间的概 ...
- 从国内APP更新“精雕细琢” 看国内外产品理念之差
看国内外产品理念之差" title="从国内APP更新"精雕细琢" 看国内外产品理念之差"> 对于当下的大众来说,智能手机已经成为新的" ...