SVG(Scalable Vector Graphics):可缩放矢量图形,一种二维图形表示语言。
借助SVG,我们可以实现很多同Canvas API类型的绘制操作,但在Canvas元素上绘制文本的时候,字符会以像素的方式固定到上面。文本成为了图像的一部分,除非重新绘制Canvas绘制区域,否则无法改变文本内容。正因为如此,Canvas上面的文本无法被搜索引擎获取,而SVG上的文本却是可搜索的。例如,Google会对Web上的SVG内容中的文本进行索引。
在页面中添加SVG
内联方式:像HTML中的其它元素一样使用,在此基础上可以编写HTML,JavaScript和SVG的交互应用。
<body> <svg width="200" height="200"> </svg> </body>
外联方式:通过<img>元素,在HTML导入外部SVG文件,缺点是无法编写与SVG元素进行交互的脚本。
<img src="example.svg" />
简单的形状
SVG包含了基本的形状元素,如矩形、圆形和椭圆。形状元素的尺寸和位置被定义成了属性。矩形的属性有width和height。圆形有一个表示半径的r属性。它们都应用CSS语法表示距离,因此单位包括了px 、point 、em等。
矩形:x="50" y="20"表示矩形的起点为(50,20)
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> </svg> </body>
SVG绘制开关对象是按对象文档中出现的顺序进行的。如果我们在画完矩形之后再画圆,那么圆形会显示在矩形之上。
增加一个圆形:
<body> <svg width="200" height="200"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </svg> </body>
变换SVG元素
SVG中可以将多个元素结合起来,使它们形成一个组,变为一个整体。
<g>元素代表“组”,可以用来结合多个相关的元素。组内成员可以由通过ID来引用。些外,组也可以作为一个整体进行变换。如果你为组添加了变换属性,那么组中所有内容都会进行变换。变换属性包含了旋转、变形、缩放和斜切。
<svg width="200" height="200"> <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </svg>
复用内容
SVG中的<defs>元素用于定义留待将来使用的内容。可以用<use>元素将<defs>定义的内容链接到需要展示的地方。借助这两个元素,你可以多次复用同一内容,消除冗余。
<svg width="200" height="200"> <defs> <g id="ShapeGroup"> <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect> <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> </g> </defs> <use xlink:href="#ShapeGroup" transform="translate(60,0) scale(0.4)"></use> <use xlink:href="#ShapeGroup" transform="translate(120,80) scale(0.75)"></use> <use xlink:href="#ShapeGroup" transform="translate(20,60) scale(0.25)"></use> </svg>
图案和渐变
<defs> <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse" x="0" y="0" width="100" height="67" viewBox="0 0 100 67"> <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" /> </pattern> <%--渐变--%> <linearGradient id="RedBlackGradient"> <stop offset="0%" stop-color="#000"></stop> <stop offset="100%" stop-color="#f00"></stop> </linearGradient> </defs> <rect x="0" y="20" width="100" height="80" stroke="red" fill="url(#RedBlackGradient)" /> <circle cx="120" cy="80" r="40" stroke="#00f" stroke-width="8" fill="url(#GravelPattern)" /> </svg>
路径
SVG不公包含简单的形状,还包含自由形态的路径。path元素有一个d属性,代表路径数据。在d的值中,M代表移至(Move to),L代表划线至(Line to),Q代表二次曲线,Z代表闭合路径。
<svg width="200" height="200"> <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z" /> </svg>
文本
SVG中文本有点类型于CSS中对于样式的定义
<svg width="200" height="200"> <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f" font-size="40px" font-weight="bold">Hello SVG</text> </svg>
相关推荐
网上大部分html5的代码是第一版的代码 第二版的svg+drag两章的代码这里有,希望对大伙儿有帮助!
《深入HTML5编程(第 2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容,并对部分内容进行了更新。...
介绍了HTML5 的历史背景、新的语义标签及与以往HTML 版本相比的根本变化,同时揭示了HTML5 背后的设计原理。本书在上一版的基础上新增了SVG 和拖放API相关内容,并对部分内容进行了更新。
今天,HTML5在Web标准之争中已经胜出并被大多数浏览器所支持。体验HTML5带给Web开发的...第2版进行了全面的修订,新增了针对HTML5视觉效果的SVG和针对用户体验的拖放这两部分内容,将助读者的Web设计和开发更上一层楼。
HTML5+SVG+Lottie.js实现万圣节焦躁的程序猿秒变狼人动画效果源码.zip
5、控制你的页面布局和CSS3的设计,嵌入字体,动画,转换,3D和圆形边界 6、利用新的HTML5的元素,例如,文章,节,页脚,页眉 7、Web应用程序扩展到移动设备,如iPhone,Android和HTML5的2.0 WebOS手机 8、实现Web...
全书共分为12章,从HTML5的历史故事讲起,涉及了文档结构和语义、智能表单、视频与音频、画布、SVG与MathML、地理定位、Web存储与离线Web应用程序、WebSockets套接字、Web Worker多线程、微数据以及以拖曳为代表的...
macSVG是MIT许可的开源macOS应用,用于设计HTML5 SVG 1.1(可缩放矢量图形)艺术和动画。 macSVG可以为可在大多数主要台式机和移动平台(包括iOS,Android,macOS,Microsoft Windows和Linux)上运行HTML5 Web视图...
该项目是一个基于Java的事件驱动流式低代码编程应用程序设计,旨在提供一个便捷、高效的低代码开发解决方案。用户可以在编辑器中采用拖拽的形式来实现业务编程工作,一键运行和停止,让开发工作变得更简单高效。
特征SVGIcon支持以下功能: Twig功能可轻松在模板中输出内联HTML 读取SVG图标文件(来自boostrap-icons,材料设计图标) 覆盖样式和标签(宽度,高度等),并提供有用的默认值(如果未在SVG图标中找到)。...
除了为当今的多设备世界生成与分辨率无关的图像外,SVG还允许您创建动画和可视化效果以添加到您的站点和应用程序中。 跨平台标记的简单性,再加上熟悉的现代Web语言(例如CSS和JavaScript),为设计人员和开发人员...
HTML5技术支持音视频播放、Canvas绘图、SVG矢量图形、 Offline Storage等功能,广泛应用于移动应用、Web应用和桌面应用等领域。 三、HLS技术 HLS(HTTP Live Streaming)是一种基于HTTP的直播流媒体协议,主要用于...
新千年以来,超文本标记...Web 设计人员开始学习使用异步 JavaScript + XML(Ajax),在现有的框架下通过层叠样式表(CSS)和 JavaScript™ 语言建立自己的应用程序。但是在接下来的八年中,HTML 本身没有任何变化。
该程序包的产生是出于算法设计涉及线和多边形的图的需要,并在图上标记了角度。 如果放置不当,文本重叠的行最多看起来看起来不整洁,最糟糕的是不可读。 即使文本不与线重叠,也不能将其放置在尽可能靠近角度的点处...
本项目是基于Javascript的钢琴即兴伴奏与人声合成程序设计源码,包含43个文件,其中包括14个JavaScript文件、7个JSON文件、3个HTML文件、3个Markdown文档、2个PNG图片文件、2个SVG文件、2个CSS文件和1个nojekyll文件...
本项目是一个基于Python语言开发的Web应用程序,包含518个文件,主要文件类型包括Python类文件、GIF图片、JavaScript脚本、CSS样式表、HTML页面、JSON配置文件、Dockerfile文件、PNG图片、EOT字体文件和SVG图形。...
该项目完全是一个客户端应用程序,除了下载 svg 功能 只需打开 index.html 即可运行 该项目使用观察者模式作为将模块分离成组件的一种手段 您将在 components 目录中找到每个组件的小演示 您可以尝试绘制一个正方形...