• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5之SVG 2D入门8—文档结构及相关元素总结

HTML5之SVG 2D入门8—文档结构及相关元素总结

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含SVG,2D,文档结构等相关知识,佚名 希望在学习及工作中可以帮助到您
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性。
SVG文档的元素基本可以分为以下几类:
•动画元素:animate,animateColor,animateMotion,animateTransform,set;
•解释元素:desc,metadata,title;
•图形元素:circle,ellipse,line,path,polygon,polyline,rect;
•结构元素:defs,g,svg,symbol,use;
•渐变元素:linearGradient,radialGradient;
•其他元素:a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view等。
其中图形元素,渐变元素,文本,图像元素和组合等都介绍过了,下面介绍另外几个与结构相关的元素。

视窗-svg元素
可以在svg元素中以任何顺序放置任何的其他元素,包括嵌套svg元素。
svg元素支持的属性常用的也就是id,class,x,y,width,height,viewBox,preserveAspectRatio,以及fill和stroke的相关属性。
svg元素支持的事件也是常用的onload,onmouseover,onmousemove,onmousedown,onmouseup,onclick,onfocusin,onfocusout,onresize,onscroll,onunload等。svg元素就不多说了,完整的属性和事件列表参看后面的官方文档。

解释性元素-desc元素与title元素
每个容器元素(可以包含其他容器元素或者图形元素的元素,例如:a,defs,glyph,g,marker,mask,missing-glyph,pattern,svg,switch和symbol)和图形元素都可以包含desc和title元素,这两个元素都是辅助性的元素,用于解释相关情境;它们的内容都是文本。当SVG文档被渲染的时候,这2个元素不会被渲染到图形中。这个2个元素之间差别不是太大,title在有些实现中是作为提示信息出现的,所以通常title是放到父元素的第一个位置上。
典型的用法如下:

<ellipseonclick="hideReveal(evt)"cx="175"cy="100

您可能想查找下面的文章:

  • 实例讲解使用SVG制作loading加载动画的方法
  • 使用HTML5进行SVG矢量图形绘制的入门教程
  • HTML5新特性之用SVG绘制微信logo
  • 深入浅析HTML5中的SVG
  • 深入解析HTML5使用SVG图像时的viewBox属性用法
  • html5+svg学习指南之SVG基础知识
  • html5中svg canvas和图片之间相互转化思路代码
  • HTML中使用SVG与SVG预定义形状元素介绍
  • HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
  • HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

相关文章

  • 2018-12-03H5的Canvas做出圆形进度条并显示数字百分比
  • 2018-12-03像这种网站效果,整屏整屏换有没有什么名字?
  • 2018-12-03从登录框看前端
  • 2018-12-03html5 web本地存储将取代我们的cookie_html5教程技巧
  • 2018-12-03使用jQuery控制HTML5视频播放/暂停
  • 2017-08-06深入剖析webstorage[html5的本地数据处理]
  • 2018-12-03弹性盒模型-容器属性的理解
  • 2018-12-03最近微信出现的HTML5的邀请函?
  • 2018-12-03HTML5实现移动端自适应的几种方法介绍
  • 2018-12-03分享一个简单的HTML5 视频嵌入实例代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • phonegap使用方法介绍(四)创建联系人
    • 详解强大的HTML5幻灯片系统-H5Slides
    • HTML5 FileReader接口的详细介绍
    • 目前流行的前端框架有哪些?
    • iWork for iCloud 如此流畅,是如何实现的,有哪些关键技术?
    • 3D模型如何使用?总结3D模型实例用法
    • 一款利用html5和css3动画排列人物头像的实例演示
    • canvas文字怎么换行?canvas文字换行的方法介绍
    • H5 video标签只能放声音不能放视频的解决办法
    • React Native 之ScrollView轮播图实现方法实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有