SVG制作简单的图形
圆形 circle
<svg width="200" height="200" >
<circle
cx="100"
cy="100"
r="80"
stroke="green"
stroke-width="4"
fill="none"/>
</svg>
矩形 rect
<svg>
<rect
x="10"
y="10"
rx="5"
ry="5"
width="150"
height="100"
stroke="red"
fill="none">
</rect>
</svg>
椭圆 ellipse
<svg>
<ellipse
cx="400"
cy="60"
rx="70"
ry="50"
stroke="red"
fill="none">
</ellipse>
</svg>
线 line
<svg>
<line
x1="10"
y1="120"
x2="160"
y2="220"
stroke="red">
</line>
</svg>
折线 polyline
<svg>
<line
x1="10"
y1="120"
x2="160"
y2="220"
stroke="red">
</line>
</svg>
多边形 polygon
<svg>
<polygon
points="250 120
300 220
200 220"
stroke="red"
stroke-width="5"
fill="yellow"
transform="translate(150 0)">
</polygon>
</svg>
路径 path
可用于路径数据的命令
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
<svg>
<path
d="M250 150 L150 350 L350 350 Z" />
</svg>
SVG制作简单的图形的更多相关文章
- 动态svg图片简单制作
一.简介 #topics #no-box-shadow-img { box-shadow: none } 博主头像 svg图片格式不同于其它图片格式,svg图片本质上是一个xml文件,它内部是标记语言 ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- 太可爱了!CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...
- 基于svg.js实现对图形的拖拽、选择和编辑操作
本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形 ...
- Unreal Engine 4 系列教程 Part 5:制作简单游戏
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Unreal Engine 4 系列教程 Part 10:制作简单FPS游戏
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Highcharts使用教程(1):制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...
- ZAM 3D 制作简单的3D字幕 流程(二)
原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...
随机推荐
- druid抛出的异常------javax.management.InstanceAlreadyExistsException引发的一系列探索
最近项目中有个定时任务的需求,定时检查mysql数据与etcd数据的一致性,具体实现细节就不说了,今天要说的就是实现过程中遇到了druid抛出的异常,以及解决的过程 异常 异常详细信息 五月 05, ...
- 高性能linux服务器内核调优
高性能linux服务器内核调优 首先,介绍一下两个命令1.dmesg 打印系统信息.有很多同学们服务器出现问题,看了程序日志,发现没啥有用信息,还是毫无解决头绪,这时候,你就需要查看系统内核抛出的异常 ...
- 【python的基本数据类型及进制扫盲】
一.进制 1.进制简介 进制就是进位制,是人们规定的一种进位方法.计算机底层的数据运算和存储都是二进制数据.计算机语言就是二进制,计算机能直接识别二进制数据,其它数据都不能直接识别. 2.常用进制 对 ...
- win彩 百款皮肤任选任换.可视化
- CSS预编译器:Sass(入门),更快的前端开发
SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...
- Memcache服务搭建
Memcache Memcache的作用网上资料都讲的很好,说简单点就是减轻读取数据库的压力,原理也很简单: 被请求的数据会先到memcache里去取,如果没有就去数据库里取,顺便给memcache带 ...
- 18个你可能不相信是用CSS制作出来的东西
与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...
- [原创]安全系列之端口敲门服务(Port Knocking for Ubuntu 14.04 Server)
Port Knocking for Ubuntu 14.04 Server OS:ubuntu 14.04 server 原理简单分析: 端口敲门服务,即:knockd服务.该服务通过动态的添加ipt ...
- CORS协议与Spring注解的冲突
众所周知,HTML5的CORS协议,支持各种request method,远胜于仅支持get方式的JSONP. 但今天,我用CORS协议,却一直不成功. 跨域异常,如图 POST http://10. ...
- 使用ConcurrentDictionary替代Hashtable对多线程的对象缓存处理
在之前一段时间里面,我的基类多数使用lock和Hashtable组合实现多线程内缓存的冲突处理,不过有时候使用这两个搭配并不尽如人意,偶尔还是出现了集合已经加入的异常,对代码做多方的处理后依然如故,最 ...