HTML5：SVG入门
SVG（可缩放矢量图形）允许您在网页中创建完全按比例放大和缩小的图像，无论用户设备屏幕的大小如何。此外，您可以在SVG中实现交互式和动画功能。您可以使用CSS和JavaScript以及许多SVG元素在Web页面代码中创建动态SVG。
在本教程中，我将介绍在HTML5页面中构建SVG所涉及的基本过程。我们将一路触摸交互和动画，并向您介绍一些基本的形状和渐变。最终结果将是一个简单的交互式秒表动画效果，带有启动和停止按钮，允许用户控制手表的旋转。结果应该在主要浏览器的新版本中起作用，但在较旧的浏览器中可能无法访问。
这是最终结果的样子：
用户可以单击开始和停止按钮以查看手在表盘周围旋转。
使用SVG元素
从以下HTML5页面大纲开始：
在body部分内，添加一个SVG元素，如下所示：
ID不是必需的，但我将使用它来设置JavaScript函数的宽度和高度。您可以将宽度和高度设置为打开SVG标记的一部分，但在JavaScript中设置尺寸将允许我们演示如何创建可以轻松扩展的图形元素。
在样式部分中，为SVG元素添加边框，以便您可以在页面中清楚地看到其边界：
svg {border：1px solid＃999999;}定义
SVG 的defs部分允许您定义可重用的元素，例如渐变填充。在SVG元素中添加一个defs元素：
让我们在defs部分添加一些渐变：我们需要一个用于背景，一个用于开始和停止按钮，一个用于拨号区域。从背景开始：
这是线性渐变。该ID将允许我们在创建它时将其应用于背景形状。X1，X2，Y1和Y2的属性指示开始和结束坐标的梯度。在这种情况下，它将从左上角到右下角。渐变有三个颜色停止，在开始，结束和中途。
现在为表盘添加渐变：
这次梯度是径向的。唯一的区别是渐变属性指示渐变将延伸的中心圆（fx和fy中心点）和外圆（cx和具有r半径的cy中心点）。在这种情况下，渐变将简单地从圆的中心延伸到其外边缘，第一个颜色停止沿着填充渐变的任何形状中途开始。
为开始和停止按钮添加另外两个渐变：
除了颜色之外，它们与表盘渐变相似，但第一个颜色停止从30％开始，因此第一种颜色以固体形式表示。
创建形状
在SVG中创建形状。
背景
使用矩形形状来表示图形的背景。在SVG元素内部，在defs部分之后：
矩形从SVG元素的左上角开始，并扩展其整个宽度和高度。通过使用相对百分比值，我们可以创建一个形状，无论我们设置SVG的整体尺寸，都可以按比例放大和缩小。我们通过包含其ID属性来指定我们在定义部分中列出的背景渐变。
秒表拨号
在背景矩形之后添加秒表表盘，使表盘显示在它上面：
这次形状是椭圆形，在这种情况下是圆形，因为rx和ry（X和Y半径属性）相等。在CX和CY的属性指示所述椭圆形状的中心点，在这种情况下，SVG的中心。我们应用我们创建的填充，这次也使用颜色和宽度指定笔划。
秒表手
使用矩形在表盘形状后添加秒表指针：
矩形水平放置在中央，在表盘的边界内，从中心垂直向上延伸到表盘边缘附近。该RX和RY属性指定圆角。稍后我们将在此矩形形状元素中添加代码以对其进行动画处理。
启动和停止按钮
添加开始和停止按钮：
按钮设置为显示在表盘右侧，靠近顶部和底部。我们对这些形状使用ID值，以便在用户点击它们时指示浏览器启动和停止动画时引用它们。
动画
为表盘设置动画，在我们定义手形的矩形元素内：
SVG提供了一系列动画选项 – 在这种情况下，我们使用animateTransform，以便我们可以旋转形状。我们使用attributeName和type属性指定旋转变换。在开始和结束的属性使用我们给的开始ID值和停止按钮的形状，以指定动画应该开始和点击这些形状结束。我们指示持续时间，在动画停止时冻结动画并将其设置为无限重复。我们可以选择包含以下属性，指示动画的开始和停止位置，包括度数，旋转中心X和Y点：
from="0 100 100" to="360 100 100"但是，由于我们在代码的其余部分使用了相对百分比值，因此在设置SVG维度时，我们将在JavaScript中设置这些属性 – from和to属性不能占用百分比值。上面的固定值适用于SVG设置为200宽度和高度的地方，这是我们要做的演示。
通过JavaScript设计样式
使用JavaScript来动态设置维度。在脚本部分，添加一个函数：
function setDimensions(){
}在函数内部指定宽度和高度：
var width=200;
var height=200;获取SVG元素的引用并设置尺寸：
var svgElem = document.getElementById("stopWatchGraphic");
svgElem.style.width=width+"px";
svgElem.style.height=height+"px";获取动画元素的引用来设置旋转中心点：
var stopWatch = document.getElementById("rotateStopWatch");使用宽度和高度计算中心点：
var centerX = width/2;
var centerY = height/2;准备from和to属性：
var from = "0 "+centerX+" "+centerY;
var to = "360 "+centerX+" "+centerY;设置animateTransform属性：
stopWatch.setAttribute("from", from);
stopWatch.setAttribute("to", to);最后，在函数之后但仍在脚本部分内部，在页面内容加载时调用该函数：
window.addEventListener("DOMContentLoaded", setDimensions, false);在浏览器中保存并打开，点击按钮开始和停止秒表指针旋转。
通过尝试SVG的不同宽度和高度值进行实验。现在您已经拥有了一个功能正常的交互式动画SVG，可以使用形状，渐变和动画来感受您可以做的事情。
原文路径：https://www.simcf.cc/3061.html