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 相关文章推荐
利用css3 translate完美实现表头固定效果
Feb 28 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
Oct 28 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
在php中取得image按钮传递的name值
2006/10/09 PHP
PHP脚本中include文件出错解决方法
2008/11/20 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
使用js显示当前时间示例
2014/03/02 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
node.js基础知识小结
2018/02/26 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
Python面向对象特殊成员
2017/04/24 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python3下载抖音视频的完整代码
2019/06/05 Python
详解Django 时间与时区设置问题
2019/07/23 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
电焊工岗位职责
2014/03/06 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
仓库文员岗位职责
2014/04/06 职场文书
中央空调节能方案
2014/06/15 职场文书
规范化管理年活动总结
2014/08/29 职场文书
学习计划书怎么写
2014/09/15 职场文书
人事聘任通知
2015/04/21 职场文书
立春观后感
2015/06/18 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang