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实现字体颜色渐变的实现
Mar 09 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
Dec 13 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
canvas与html5实现视频截图功能示例
Dec 15 HTML / CSS
使用canvas压缩图片大小的方法示例
Aug 02 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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
无线电的诞生过程
2021/03/01 无线电
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
QQ登录简单实现代码
2021/03/09 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
基于Vue2x的图片预览插件的示例代码
2018/05/14 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
python图片验证码生成代码
2016/07/02 Python
Python端口扫描简单程序
2016/11/10 Python
python 2.7.14安装图文教程
2018/04/08 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
C语言面试题
2013/05/19 面试题
美术第二课堂活动总结
2014/07/08 职场文书
鲁迅故居导游词
2015/02/05 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
Python IO文件管理的具体使用
2022/03/20 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA