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 ...
随机推荐
- 地址SQL文件
文件下载 Beckoning
- node 环境下简单web服务器搭建代码
零.前置 已经安装 node 环境. 一.代码片段 var http = require('http'); var path = require('path'); var fs = require(' ...
- C语言数据类型char
char简介 char是C/C++中的基本数据类型,可容纳单个字符的一种基本数据类型. char占一个字节,也就是8个bit(二进制位),0000 0000 ~ 1111 1111,在无符号类型时ch ...
- 关于文件下载Header设置
常见的媒体格式类型如下: text/html : HTML格式text/plain :纯文本格式 text/xml : XML格式image/gif :gif图片格式 image/jpeg :jpg图 ...
- Android开发之《ffmpeg解码mjpeg视频流》
MJPEG格式和码流分析,MJPEG格式的一些简介 FFmpeg解码USB摄像头MJPEG输出:http://blog.csdn.net/light_in_dark/article/details/5 ...
- 自定义一个简单的SegmentedControl
先大概看下我们想实现简单的效果 源码 // // DSegmentedControl.swift // IOS学习之自定义UISegmentedControl // // Created by din ...
- Luogu_2279_[HNOI2003]消防局的设立
题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...
- 聊聊 Airtest 自动化工具
阅读文本大概需要 5 分钟. 很多读者看过之前的文章,发现我使用最多的是一款 Airtest 的自动化测试框架. Airtest 是一款适合于游戏和 App 的 UI 自动化测试框架. 下面对 Air ...
- Python-控制语句及函数
if-elif-else for while 函数 函数定义 空函数 pass 返回多个值 可变参数 * 关键字参数 ** 控制语句 if - elif - else 比如,输入用户年龄,根据年龄打印 ...
- hihoCoder 1128 二分查找
Description Input and Output Codes 描述#1128 : 二分·二分查找 Description Nettle最近在玩<艦これ>,因此Nettle收集了很多 ...