html5 SVG 涂鸦

<!DOCTYPE HTML>
<html>
<body>

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

<rect
	x="20" 
	y="20" 
	rx="20" 
	ry="20" 
	width="250" 
	height="100" 
	style="fill:red;stroke:black;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5"/>

<circle 
	cx="100" 
	cy="160" 
	r="40" 
	stroke="black"
	stroke-width="2" 
	fill="red"
	style="fill:green;opacity:0.5"/>

<ellipse cx="240" cy="230" rx="220" ry="30" style="fill:purple"/>

<ellipse cx="220" cy="270" rx="190" ry="20" style="fill:lime"/>

<ellipse cx="210" cy="345" rx="170" ry="15" style="fill:yellow"/>

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

<polygon points="220,400 300,610 170,650 123,434" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

<polyline points="400,0 400,20 420,20 420,40 440,40 440,60" style="fill:white;stroke:red;stroke-width:2"/>

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C411 300 886 674 500 600"
style="stroke:red;stroke-width:2"/>

<defs>
	<filter id="Gaussian_Blur">
		<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
	</filter>
</defs>

<ellipse 
	cx="500" 
	cy="150" 
	rx="70" 
	ry="40"
	style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

<defs>
	<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
		<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
		<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
	</linearGradient>
</defs>

<ellipse cx="720" cy="190" rx="85" ry="55" style="fill:url(#orange_red)"/>

<defs>
	<radialGradient id="grey_blue" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
		<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
		<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
	</radialGradient>
</defs>

<ellipse cx="750" cy="400" rx="110" ry="100" style="fill:url(#grey_blue)"/>

</svg>

</body>
</html>
时间: 06-17

html5 SVG 涂鸦的相关文章

7种炫酷HTML5 SVG液态水滴融合分解动画特效

这是一组使用HTML5 SVG过滤器制作的炫酷液态水滴融合分解动画特效.这些SVG动画特效使一些HTML元素.如菜单.分页button.APP.选择框等元素的过渡动画像几粒水滴一样融合分解.效果很的酷. 通过SVG Filters能够改动一个给定的图形,创建我们须要的结果.SVG中包括了一组能够运行各种操作的filter元素. 最常见的SVG filter效果是通过feGaussianBlur来制作模糊效果. <svg xmlns="http://www.w3.org/2000/svg&q

HTML5 SVG之矩形简单示例分享

最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分 1.简单矩形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100"></rect> </svg> 代码解析: rect

三天学会HTML5——SVG和Canvas的使用

在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习 首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SVG 实现功能 Lab1—— 使用Canvas Canvas 是指定了长度和宽度的矩形画布,我们将使用新的HTML5 JavaScript,可使用HTML5 JS API 来画出各种图形. 初始化 1. 创建HTML页面 <html> <head></head> <bo

Html5 SVG矢量图像的使用

SVG中文参考地址 : mozilla.:可缩放矢量图形(Scalable Vector Graphics,SVG)

html5 SVG

1,SVG是可伸缩矢量图形.含有不同标签<rect>用于创建矩形:<circle>创建圆形:<ellipse>用于创建椭圆:<line>线:<polyline>折线:<polygon>多边形 2,svg <path d="M 250,150 L150,350 L350 350 Z"/> 定义了一条路径,开始于(250px,150px),到达(150px,350px),再到达(350px,350px),最

基于HTML5 SVG和Rapha?l.js的混合图标动画特效插件教程

一.安装 $ npm install hybicon $ bower install hybicon 二.使用方法 <script src="js/required/raphael.min.js"></script> <script src="js/hybicon.min.js"></script> 三.Html结构 <div data-hybicon="icon1-icon2"><

基于HTML5 SVG和Rapha&#235;l.js的混合图标动画特效插件教程

一.安装$ npm install hybicon$ bower install hybicon 二.使用方法<script src="js/required/raphael.min.js"></script><script src="js/hybicon.min.js"></script> 三.Html结构<div data-hybicon="icon1-icon2"></div

14款超时尚的HTML5时钟动画

时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助. 1.可爱的CSS3圆盘时钟动画 今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步. 在线演示 源码下载 2.HTML5 SVG圆盘时钟动画 5种时钟样式 今天我

H5 Canvas vs. SVG

HTML 5 Canvas vs. SVG HTML5 SVG HTML5 地理定位 Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的.您可以为某个元素附加 JavaScript 事件处理器. 在 SVG 中,每个被绘制的图形均被视为对象.如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形. Canvas Canvas 通