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制作精致的照片墙特效
Jun 07 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3实现时间轴特效
Nov 02 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP number_format() 函数定义和用法
2012/06/01 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php画图实例
2014/11/05 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
原生js实现验证码功能
2017/03/16 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
毕业证丢失证明
2014/01/15 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
财务总监管理职责范文
2014/03/09 职场文书
合作意向协议书范本
2014/03/31 职场文书
消防宣传口号
2014/06/16 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
五一劳动节活动总结
2015/02/09 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
关于MySQL中的 like操作符详情
2021/11/17 MySQL