HTML5 SVG
初识 SVG
-
定义及优势：
- 可缩放矢量图形
SVG用于定义用于网络的基于数学描述的图形SVG使用 XML 格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有损失，适合用于响应式设计SVG图像可通过文本编辑器来创建和修改SVG图像可被搜索、索引、脚本化或压缩
-
SVG与Canvas的区别-
SVG基于XML，而Cnavas基于JavaScript。 -
SVG基于 XML 就意味着这意味着SVG DOM中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。 -
在
SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。Canvas是逐像素进行渲染的。在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
-
-
SVG与Canvas比较Canvas SVG 依赖分辨率器 不依赖分辨率 不支持事件处理 支持事件处理器 弱的文本渲染能力 最适合带有大型渲染区域的应用程序（比如谷歌地图） 能够以 .png 或 .jpg 格式保存结果图像 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用 -
SVG的应用场景- 网页图标
- 数据可视化
- 复杂的动画效果
SVG 的使用
语法规范
使用：HTML5 支持内联 SVG。
<svg> 元素是 SVG 图形的容器。
<svg>
<!-- SVG 路径定义一个带有边框的正方形，并且设置透明度-->
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
<!-- 定义一个带有黑色边框的红色圆形 -->
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
svg元素默认的宽高为300px * 150px- SVG 绘制图形时，属性如
stroke、stroke-width、fill等既可以直接作为 HTML 属性使用，也可以通过style属性以 CSS 样式的形式应用。
SVG 的绘制
实质上就是大同小异，就是一些坐标和图形自身必要的参数，这里就不过多赘述。详情参考SVG 实例 | 菜鸟教程 (runoob.com)
-
基本形状
- 线形
- 直线段<line>
- 折线<polyline>
- 图形
- 圆形<circle>
- 椭圆<ellipse>
- 矩形<rect>
- 三角形<polygon>
- 多边形<polygon>
- 星星<polygon>
- 路径<path>
- 文本<text>
- 路径文本<textPath>
- 多行文本<tspan>
- 线形
-
滤镜
-
渐变
-
线性渐变（此处为水平）
<linearGradient><!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- 定义渐变的方式 --> <!-- x1, y1 以及 x2, y2 是渐变的轴线开始和结束的地方，坐标是相对于 svg 元素的 --> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <!-- 对于线性渐变，offset 是相对与轴线的百分比位置 --> <!-- style 是定义两端的颜色的 --> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html> -
放射性渐变
<radialGradient><!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- cx="50%": 渐变的中心点的x坐标，相对于SVG元素的宽度50%位置。 cy="50%": 渐变的中心点的y坐标，相对于SVG元素的高度50%位置。 r="50%": 渐变的半径，相对于SVG元素的宽度50%位置。 fx="50%": 渐变的焦点的x坐标，通常这个属性与cx相同，表示渐变以中心点向外扩散。 fy="50%": 渐变的焦点的y坐标。 --> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <!-- 对于放射性渐变，offset的百分数是相对于渐变中心到最外层的长度 --> <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" /> <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /> </svg> </body> </html>
-
-
动画
-
以下是实现一个矩形颜色淡出的效果
<animate><!DOCTYPE html> <html> <body> <p><b>Note:</b> This example only works in Firefox and Google Chrome.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="20" y="20" width="250" height="250" style="fill:blue"> <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" /> </rect> </svg> </body> </html> -
大小和颜色的渐变
<animate><!DOCTYPE html> <html> <body> <p><b>Note:</b> This example only works in Firefox and Google Chrome.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> <!-- 这里不采用animateColor是因为它过时了 --> <animate attributeName="fill" from="green" to="red" begin="0s" dur="4s" fill="freeze" /> </rect> </svg> </body> </html> -
沿一个运动路径移动、旋转并缩放的文本 + 逐步放大并改变颜色的矩形
<animateMotion>&<animateTransform><!DOCTYPE html> <html> <body> <p><b>Note:</b> This example only works in Firefox and Google Chrome.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect id="rec" x="300" y="100" width="300" height="100" style="fill:lime"> <animate attributeName="x" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="100" to="300" /> <animate attributeName="fill" attributeType="XML" from="lime" to="red" begin="2s" dur="4s" fill="freeze" /> </rect> <g transform="translate(100,100)"> <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24; visibility:hidden"> It's SVG! <set attributeName="visibility" attributeType="CSS" to="visible" begin="1s" dur="5s" fill="freeze" /> <animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" /> <animate attributeName="fill" from="red" to="blue" begin="1s" dur="5s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="1s" dur="5s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="1s" dur="5s" fill="freeze" /> </text> </g> </svg> </body> </html>
-
SVG 特殊的标签
| 标签 | 含义 |
|---|---|
<g> | <g> （group），它用于将多个SVG元素组合在一起，作为一个单元进行操作。对 <g> 操作，那么内部每个元素都被操作 |
<defs> | 用于定义可重用的图形元素 |
<use> | 引用由<defs>定义的元素 |
<filter> | 创建一个或多个图像的各种视觉效果，比如模糊、颜色偏移、亮度和对比度调整、阴影等 |
fe开头的一系列滤镜相关的标签 | 详情见 https://www.runoob.com/svg/svg-examples.html |
<animate> | 动画化大多数SVG属性，如x、y、width、height、opacity、fill等 |
<animateMotion> | 让元素沿着给定的路径运动 |
<animateTransform> | 允许动画化旋转(rotate)、缩放(scale)、倾斜(skew)、位移(translate)等变换效果 |
参考手册
SVG 规范中定义了更多的元素和属性。
常见 SVG 属性：
id: 元素的唯一标识符。class: 元素的类名，用于CSS样式。style: 元素的内联样式。transform: 应用到元素上的变换。x,y: 元素的位置。width,height: 元素的尺寸。fill: 填充颜色。stroke: 描边颜色。stroke-width: 描边宽度。opacity: 透明度。visibility: 元素的可见性。
SVG 元素列表如下：
| 元素 | 说明 | 属性 |
|---|---|---|
<svg> | 定义 SVG 文档的根元素 | width height viewBox preserveAspectRatio xmlns … |
<a> | 定义超链接 | xlink:href target … |
<altGlyph> | 定义替代的字形 | glyphRef format rotate dx dy … |
<altGlyphDef> | 定义用于 <altGlyph> 的替代的字形集合 | (无) |
<altGlyphItem> | 定义 <altGlyphDef> 的可替代的字形 | glyphRef format … |
<animate> | 定义动画 | attributeName from to dur repeatCount fill … |
<animateColor> | 定义颜色动画 | attributeName from to dur repeatCount fill … |
<animateMotion> | 定义路径动画 | path dur repeatCount … |
<animateTransform> | 定义变换动画 | attributeName type from to dur … |
<circle> | 定义圆形 | cx cy r fill stroke stroke-width … |
<clipPath> | 定义剪切路径 | clipPathUnits (无) |
<color-profile> | 定义颜色配置文件 | (无) |
<cursor> | 定义鼠标指针 | x y width height xlink:href … |
<defs> | 定义可重复使用的元素 | (无) |
<desc> | 为 SVG 元素提供描述 | (无) |
<discard> | 规定要丢弃的元素 | (无) |
<ellipse> | 定义椭圆 | cx cy rx ry fill stroke stroke-width … |
<feBlend> | 定义图像混合 | in in2 mode … |
<feColorMatrix> | 定义颜色矩阵 | in type values … |
<feComponentTransfer> | 定义颜色/Alpha 组件的转换函数 | (无) |
<feComposite> | 定义图像合成 | in in2 operator … |
<feConvolveMatrix> | 定义卷积矩阵 | in order kernelMatrix … |
<feDiffuseLighting> | 定义漫反射光照 | in surfaceScale diffuseConstant … |
<feDisplacementMap> | 定义位移图 | in in2 scale … |
<feDistantLight> | 定义远程光照 | azimuth elevation … |
<feDropShadow> | 定义投射阴影 | dx dy stdDeviation … |
<feFlood> | 定义用于图形元素的颜色 | flood-color flood-opacity … |
<feFuncA> | 定义用于调整 Alpha 通道的曲线 | type tableValues slope … |
<feFuncB> | 定义用于调整图像的曲线 | type tableValues slope … |
<feFuncG> | 定义用于调整图像的曲线 | type tableValues slope … |
<feFuncR> | 定义用于调整图像的曲线 | type tableValues slope … |
<feGaussianBlur> | 定义高斯模糊效果 | stdDeviation … |
<feImage> | 定义要嵌入的图像 | href result … |
<feMerge> | 定义用于合并图像的滤镜图形 | (无) |
<feMergeNode> | 定义用于合并图像的输入图像 | (无) |
<feMorphology> | 定义用于改变输入图像形状的滤镜 | operator radius … |
<feOffset> | 定义输入图像的偏移 | dx dy … |
<fePointLight> | 定义点光源 | x y z … |
<feSpecularLighting> | 定义镜面高光效果 | in surfaceScale specularConstant … |
<feSpotLight> | 定义聚光灯 | x y z pointsAtX pointsAtY pointsAtZ … |
<feTile> | 定义重复输入图像 | (无) |
<feTurbulence> | 定义湍流图像 | baseFrequency numOctaves … |
<filter> | 定义滤镜效果 | filterUnits primitiveUnits x y width height … |
<font> | 定义字体资源 | horiz-origin-x horiz-origin-y horiz-adv-x vert-origin-x vert-origin-y vert-adv-y … |
<font-face> | 定义字体的属性 | font-family font-style font-variant font-weight font-stretch … |
<font-face-format> | 定义字体文件格式 | (无) |
<font-face-name> | 定义字体名称 | (无) |
<font-face-src> | 定义字体文件的位置 | (无) |
<font-face-uri> | 定义字体文件的位置 | (无) |
<foreignObject> | 定义 SVG 文件中的其它 XML 命名空 |
1502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
