HTML中使用SVG与SVG预定义形状元素介绍


Posted in HTML / CSS onJune 28, 2013

SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object>或者<iframe>。

复制代码
代码如下:

<embed src="rect.svg" width="300"height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>

pluginspage 属性指向下载插件的 URL。
复制代码
代码如下:

<object data="rect.svg"width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/"/>
<iframe src="rect.svg" width="300"height="100">
</iframe>

在这三个中<iframe>是比较早期的标签,现在用的比较的少了。用的较多的还是<embed>标签。
同时我们也可以将svg直接写入HTML文件中:
这样的话需要先引入SVG的dtd文件:
复制代码
代码如下:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

再在<svg>标签中填入需要的代码:
复制代码
代码如下:

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg" onclick="ccc();">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:yellow"/>
<ellipse cx="220" cy="100" rx="190" ry="20" id="w1"
style="fill:white"/>
</svg>

如果svg代码在html中,我们就更容易写javascript来控制图形的变换:
复制代码
代码如下:

<script type="text/javascript">
function ccc(){
var a = document.getElementById("w1");
a.style.fill="red";
a.setAttribute("cx", "150"); //设置值
a.setAttribute("ry", "50"); //设置值
}
</script>

下面介绍一些svg的预定义的形状元素:
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
HTML5中的nav标签学习笔记
Jun 24 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 #HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 #HTML / CSS
html5 offlline 缓存使用示例
Jun 24 #HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 #HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 #HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 #HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 #HTML / CSS
You might like
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
javascript简易画板开发
2020/04/12 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python生成pdf文件的方法
2014/08/04 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python文件与目录操作实例详解
2016/02/22 Python
python版本的读写锁操作方法
2016/04/25 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python PIL库图片灰化处理
2020/04/07 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
综合测评自我鉴定
2013/10/08 职场文书
小学教师听课制度
2014/02/01 职场文书
单位工资证明范本
2015/06/12 职场文书
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android