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>
(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>
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 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 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>
- 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 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>
路径- path
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" />
</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=" ...
- [翻译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世界",但我觉得叫画布比较合适) ...
随机推荐
- Java系列之：看似简单的问题 静态方法和实例化方法的区别
(2011-12-06 15:28:26) 转载▼ 标签: 杂谈 分类: study 今天看书时一直没真正弄明白静态方法和实例方法的区别,就在网上搜索,找到一篇很好的文章,和大家分享一下: 这是一个经 ...
- Java图形与文本（18）
实例018 旋转图形 实例说明 本实例演示在Java中绘制图形时,如何对图形进行旋转.运行程序,单击窗体上的“顺时针”按钮,可以将图形顺时针旋转,效果如图1.18所示,用户还可以通过单击“逆时针”和 ...
- 二十三 NoSql&Redis及其安装
什么是Nosql not only sql , 不仅仅是sql,是一项全新的数据库理念,泛指非关系型的数据库. 为什么需要NoSql 解决以下问题: 1 High Performance 对数据库 ...
- Bug的等级及定位
缺陷等级一般划分为四个等级:致命.严重.一般.低 一.致命(一级bug) 通常表现为:系统无法运行,崩溃或严重资源不足,应用模块无法启动或者异常退出,主要功能模块无法使用. 比如: 1.系统崩溃(蓝屏 ...
- 实训41 S7通信 单向连接 基于DP网络通信
连接的基本概念? 连接是指两个通信伙伴之间执行通信服务建立的逻辑链路,而不是指两个站之间用物理媒体(例如电缆)实现的连接. 连接相当于 通信伙伴之间 一条虚拟的"专线". 一条物理 ...
- centos 禁用ip v6
# sysctl -w net.ipv6.conf.all.disable_ipv6=1 # sysctl -w net.ipv6.conf.default.disable_ipv6=1 # s ...
- Unix-Time
1. Unix_time 2. Year_2000_problem 3. Year_10,000_problem 4. Year_2038_problem 5. Time_formatting_and ...
- GoJS API学习
var node = {}; node["key"] = "节点Key"; node["loc"] = "0 0";// ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
- U盘启动盘空间变小
Windows下管理员身份运行cmd,调用diskpart,约5秒进入程序 磁盘管理中新建卷. 建议使用Rufus制作U盘启动盘.