svg教程 - 秒客网

实例

<html>

<body>

<h1>My first SVG</h1>

<svg style="border: 1px solid; margin-left: 20px;">

	<circle r="20" stroke-width="2" fill="red" cx="100" cy="50" />

</svg>

</body>

</html>

svg教程

(cx, cy)：圆心坐标
stroke和stroke-width：控制如何绘制轮廓

在HTML中，embed,object

使用embed标签

<embed src="circle1.svg" type="image/svg+xml" />

使用object标签

<object data="circle1.svg" type="image/svg+xml"></object>

使用iframe标签

<iframe src="circle1.svg"></iframe>

直接嵌入svg标签

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

   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />

</svg>

矩形

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

	<rect width="300" height="100"

		  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);fill-opacity:0.1;"/>

</svg>

style/属性

fill 填充颜色
strok-width 轮廓宽度
stroke 轮廓颜色
fill-opacity：填充颜色的不透明度
stroke-opacity：轮廓颜色不透明度
opacity：整个元素的不透明度
width
height
rx,ry ：产生圆角
x，y：坐标原点，偏移

圆形

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

  <circle cx="100" cy="50" r="40" stroke="black"

  stroke-width="2" fill="red"/>

</svg>

style/属性

cx,cy：圆心
r：半径

椭圆

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px">

  <ellipse cx="300" cy="80" rx="100" ry="50"

  style="fill:yellow;stroke:purple;stroke-width:2"/>

</svg>

svg教程

style/属性

cx,cy：椭圆圆心
rx,ry：半径

直线

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

	<line x1="0" y1="0" x2="200" y2="200"

		  style="stroke:rgb(255,0,0);stroke-width:2"/>

</svg>

svg教程

多边形

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

	<polygon points="200,10 250,190 160,210"

			 style="fill:lime;stroke:purple;stroke-width:1"/>

</svg>

svg教程

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

	<polygon points="100,10 40,180 190,60 10,60 160,180"

			 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />

</svg>

svg教程

fill-rule:nonzero：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 200px">

	<polygon points="100,10 40,180 190,60 10,60 160,180"

			 style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

</svg>

svg教程

折线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200px">

	<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"

			  style="fill:none;stroke:black;stroke-width:3" />

</svg>

svg教程

路径- path

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

    <path d="M150 0 L75 200 L225 200 Z" />

</svg>

svg教程

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve 方贝塞尔曲线
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

svg教程的更多相关文章

[翻译svg教程]svg学习系列开篇
目录 [翻译svg教程]svg学习系列开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...
SVG 教程
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...
[翻译svg教程]Path元素 svg中最神奇的元素！
先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...
[翻译svg教程]svg中的circle元素
svg中的<circle> 元素,是用来绘制圆形的,例如 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= ...
[翻译svg教程]svg中矩形元素 rect
svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=&quot ...
[翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
【翻译svg教程】svg 的坐标系统
http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样数学/ ...
非常不错的svg教程
介绍的非常详细,也很有调理,内容很详细适合于初学者学习 http://www.softwhy.com/qiduan/SVG_source/
SVG坐标系统
SVG的画布.画布视区(viewBox).浏览器视窗的概念画布画布是绘制SVG内容的一块区域,理论上在所有维度上都是无限的.(也有人称为"SVG世界",但我觉得叫画布比较合适) ...

随机推荐

ajax的使用：例题、ajax的数据处理
需要注意的是,调用的封装的数据库,和jQuery的保存地址一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...
ANDROID调用webservice带soapheader验证
最近的一个项目中调用webservice接口,需要验证soapheader,现将解决方法记录如下:(网上资料出处太多,就不做引用,原作者如看到,如有必要添加请通知) 1.先看接口 POST /webs ...
linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl)(zz)
linux下不同服务器间数据传输(rcp,scp,rsync,ftp,sftp,lftp,wget,curl) 分类: linux2011-10-10 13:21 8773人阅读评论(1) 收藏举 ...
利用curl并发来提高页面访问速度
在我们平时的程序中难免出现同时访问几个接口的情况,平时我们用curl进行访问的时候,一般都是单个.顺序访问,假如有3个接口,每个接口耗时500毫秒那么我们三个接口就要花费1500毫秒了,这个问题太头 ...
Android05－UI02布局，自定义控件，ListView
1.布局布局的内部除了放置控件外,也可以放置布局,通过多层布局的嵌套,我们就能够完成一些比较复杂的界面实现 ¨四种基本布局 LinearLayout RelativeLayout FrameLay ...
xcode UIImageView创建、图片加载、音频文件播放、延迟调用
代码创建 /** 创建UIImageView */ UIImageView * imageView=[[UIImageView alloc]init]; /** 设置尺寸位置 */ imageView ...
kibana-Request Timeout after 30000ms故障解决
etc在日志系统搭建起来后大半年一直没有出现大的问题,在上个月的某段时间,我慢慢发现有这个问题的存在了,首先是自己遇到过,后面也有人反应这个问题.于是就开始对这个问题进行分析: 1.因为服务器是放在国 ...
redis的 rdb 和 aof 持久化的区别
aof,rdb是两种 redis持久化的机制.用于crash后,redis的恢复. rdb的特性如下: Code: fork一个进程,遍历hash table,利用copy on write,把整个d ...
使用Travis CI自动部署博客到github pages和coding pages
每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...
离线下载pip包安装
Host-A 不能上网,但是需要在上面安装python-package 通过另外一台能上网的Host-B主机 1. 下载需要离线安装的Packages 在Host-B上执行如下命令: 安装单个Pack ...