html5：svg入门-mile米乐体育

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，可以使用形状，渐变和动画来感受您可以做的事情。

• javascript学习指南：利用javascript进行seo优化