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实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
CSS 圆形进度栏
Apr 06 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 HTML / CSS
HTML中link标签属性的具体用法
May 07 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中实现记住密码自动登录的代码
2011/03/02 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php对称加密算法示例
2014/05/07 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
python time模块用法实例详解
2014/09/11 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
Python和Bash结合在一起的方法
2020/11/13 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
毕业生怎样写好自荐信
2013/11/11 职场文书
气象学专业个人求职信
2014/04/22 职场文书
党员个人总结自评
2015/02/14 职场文书
简历自我评价优缺点
2015/03/11 职场文书