SVG(可缩放矢量图形)知识 HTML5页面使用SVG元素

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将允许我们在创建它时将其应用于背景形状。X1X2Y1Y2的属性指示开始和结束坐标的梯度。在这种情况下,它将从左上角到右下角。渐变有三个颜色停止,在开始,结束和中途。

现在为表盘添加渐变:

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

这次梯度是径向的。唯一的区别是渐变属性指示渐变将延伸的中心圆(fxfy中心点)和外圆(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;" />

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

秒表手

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

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

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

启动和停止按钮

添加开始和停止按钮:

<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以便我们可以旋转形状。我们使用attributeNametype属性指定旋转变换。在开始结束的属性使用我们给的开始ID值和停止按钮的形状,以指定动画应该开始和点击这些形状结束。我们指示持续时间,在动画停止时冻结动画并将其设置为无限重复。我们可以选择包含以下属性,指示动画的开始和停止位置,包括度数,旋转中心X和Y点:

from="0 100 100" to="360 100 100"

但是,由于我们在代码的其余部分使用了相对百分比值,因此在设置SVG维度时,我们将在JavaScript中设置这些属性 – fromto属性不能占用百分比值。上面的固定值适用于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;

准备fromto属性:

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

转载请注明:今日资讯网 » SVG(可缩放矢量图形)知识 HTML5页面使用SVG元素

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址