• 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教程技巧

HTML5之SVG 2D入门8—文档结构及相关元素总结_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含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是放到父元素的第一个位置上。
典型的用法如下:

官方文档:http://www.w3.org/TR/SVG11/

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

  • 实例讲解使用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-03如何解决微信通过H5页面直接打开本地app
  • 2018-12-03H5文件异步上传
  • 2018-12-03HTML基础
  • 2018-12-03HTML5每日一练之details展开收缩标签的应用
  • 2018-12-03phonegap使用方法介绍(一)查找联系人
  • 2018-12-03H5微信支付之引入微信的js-sdk包失败的解决方法
  • 2018-12-03canvas学习和滤镜实现代码
  • 2018-12-03HTML5跨域信息交互技术之postMessage代码实例详解
  • 2018-12-03http的方法,状态码和组成部分
  • 2018-12-03HTML5标准学习-简介介绍

文章分类

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

最近更新的内容

    • HTML页面中添加Canvas标签示例_html5教程技巧
    • HTML5新特性之文件和二进制数据的操作
    • html5摇一摇代码优化包括DeviceMotionEvent等等
    • HTML5游戏框架cnGameJS开发实录-基本图形模块篇
    • 分享HTML5实现弹出框的效果示例
    • HTML5技术之图像处理:一个滑动的拼图游戏
    • H5的文件域FileReader怎样分段读取文件上传到服务器
    • HTML5 history新特性pushState、replaceState及两者的区别 _html5教程技巧
    • html5 canvas 微信海报分享
    • HTML5实战与剖析之焦点管理(activeElement和hasFocus)

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

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