HTML5：SVG入门-草根SEO博客

SVG（可缩放矢量图形）允许您在网页中创建完全按比例放大和缩小的图像，无论用户设备屏幕的大小如何。此外，您可以在SVG中实现交互式和动画功能。您可以使用CSS和JavaScript以及许多SVG元素在Web页面代码中创建动态SVG。

在本教程中，我将介绍在HTML5页面中构建SVG所涉及的基本过程。我们将一路触摸交互和动画，并向您介绍一些基本的形状和渐变。最终结果将是一个简单的交互式秒表动画效果，带有启动和停止按钮，允许用户控制手表的旋转。结果应该在主要浏览器的新版本中起作用，但在较旧的浏览器中可能无法访问。

这是最终结果的样子：

用户可以单击开始和停止按钮以查看手在表盘周围旋转。

使用SVG元素

从以下HTML5页面大纲开始：

<!DOCTYPE html> <html> <head> <script type="text/javascript"> </script> <style type="text/css"> </style> </head> <body> </body> </html>

在body部分内，添加一个SVG元素，如下所示：

<svg id="stopWatchGraphic" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>

ID不是必需的，但我将使用它来设置JavaScript函数的宽度和高度。您可以将宽度和高度设置为打开SVG标记的一部分，但在JavaScript中设置尺寸将允许我们演示如何创建可以轻松扩展的图形元素。

在样式部分中，为SVG元素添加边框，以便您可以在页面中清楚地看到其边界：

svg {border：1px solid＃999999;}

定义

SVG 的defs部分允许您定义可重用的元素，例如渐变填充。在SVG元素中添加一个defs元素：

<defs></defs>

让我们在defs部分添加一些渐变：我们需要一个用于背景，一个用于开始和停止按钮，一个用于拨号区域。从背景开始：

<linearGradient id="backGrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#ffff33;" /> <stop offset="50%" style="stop-color:#ff9900;" /> <stop offset="100%" style="stop-color:#ffff33;" /> </linearGradient>

这是线性渐变。该ID将允许我们在创建它时将其应用于背景形状。X1，X2，Y1和Y2的属性指示开始和结束坐标的梯度。在这种情况下，它将从左上角到右下角。渐变有三个颜色停止，在开始，结束和中途。

现在为表盘添加渐变：

<radialGradient id="dialGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="50%" style="stop-color:#000033;" /><stop offset="100%" style="stop-color:#000099;" /></radialGradient>

这次梯度是径向的。唯一的区别是渐变属性指示渐变将延伸的中心圆（fx和fy中心点）和外圆（cx和具有r半径的cy中心点）。在这种情况下，渐变将简单地从圆的中心延伸到其外边缘，第一个颜色停止沿着填充渐变的任何形状中途开始。

为开始和停止按钮添加另外两个渐变：

<radialGradient id="startGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="30%" style="stop-color:#00cc00;" /> <stop offset="100%" style="stop-color:#003300;" /> </radialGradient> <radialGradient id="stopGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="30%" style="stop-color:#cc0000;" /> <stop offset="100%" style="stop-color:#330000;" /> </radialGradient>

除了颜色之外，它们与表盘渐变相似，但第一个颜色停止从30％开始，因此第一种颜色以固体形式表示。

创建形状

在SVG中创建形状。

背景

使用矩形形状来表示图形的背景。在SVG元素内部，在defs部分之后：

<rect x="0" y="0" width="100%" height="100%" style="fill:url(#backGrad);" />

矩形从SVG元素的左上角开始，并扩展其整个宽度和高度。通过使用相对百分比值，我们可以创建一个形状，无论我们设置SVG的整体尺寸，都可以按比例放大和缩小。我们通过包含其ID属性来指定我们在定义部分中列出的背景渐变。

秒表拨号

在背景矩形之后添加秒表表盘，使表盘显示在它上面：

<ellipse cx="50%" cy="50%" rx="40%" ry="40%" style="fill:url(#dialGrad); stroke:#ffffff; stroke-width:1;" />

这次形状是椭圆形，在这种情况下是圆形，因为rx和ry（X和Y半径属性）相等。在CX和CY的属性指示所述椭圆形状的中心点，在这种情况下，SVG的中心。我们应用我们创建的填充，这次也使用颜色和宽度指定笔划。

秒表手

使用矩形在表盘形状后添加秒表指针：

<rect x="49%" y="15%" width="2%" height="40%" style="fill:#ffffff;" rx="1%" ry="1%" > </rect>

矩形水平放置在中央，在表盘的边界内，从中心垂直向上延伸到表盘边缘附近。该RX和RY属性指定圆角。稍后我们将在此矩形形状元素中添加代码以对其进行动画处理。

启动和停止按钮

添加开始和停止按钮：

<ellipse cx="90%" cy="10%" rx="5%" ry="5%" style="fill:url(#startGrad);" id="startBtn" /> <ellipse cx="90%" cy="90%" rx="5%" ry="5%" style="fill:url(#stopGrad);" id="stopBtn" />

按钮设置为显示在表盘右侧，靠近顶部和底部。我们对这些形状使用ID值，以便在用户点击它们时指示浏览器启动和停止动画时引用它们。

动画

为表盘设置动画，在我们定义手形的矩形元素内：

<animateTransform id="rotateStopWatch" attributeType="xml" attributeName="transform" type="rotate" begin="startBtn.click" end="stopBtn.click" dur="60s" fill="freeze" repeatCount="indefinite" />

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优化

相关文章推荐