SVG在HTML5中的使用

SVG（Scalable Vector Graphics）是可伸缩矢量图形的缩写。它是一种图形（图片）格式，其中以XML指定形状。大多数Web浏览器都可以显示SVG；SVG 图片可以使用文本编辑器创建和编辑。SVG 是由万维网联盟（W3C）自 1999 年开始开发的开放标准。

SVG是一种用于描述二维的矢量图形，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS，DOM，JavaScript和SMIL等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

SVG | MDN

SVG在线编辑器-- 可在线编辑SVG，SVG可转为SVG源代码，推荐如下：

https://svg.wxeditor.com/

SVG-edit

SVG里一些形状元素，程序员可以使用这些元素来绘制图形：

矩形 <rect>

圆形 <circle>

椭圆 <ellipse>

直线 <line>

折线 <polyline>

多边形 <polygon>

路径 <path>

HTML 文档使用SVG的方式：

☆直接在HTML嵌入SVG代码，如下例

例1、使用<circle>元素的作用是绘制圆形，，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG示例</title>
</head>
<body>

<h1>我的第一个SVG程序</h1>

  <svg width="100" height="100">
  <circle cx="50" cy="50" r="40" 
  stroke="green" stroke-width="4" fill="yellow" 
  />
</svg>

</body>
</html>

保存文件名为：SVG示例1.html，用浏览器打开效果如下：

代码说明：

SVG图片用<svg>标记定义

<circle>元素的功能是画出一个圆

cx和cy两个属性分别定义了圆心的x坐标和y坐标。如果没有提供cx和cy的值，那么，缺省圆心是(0, 0)

r属性定义了圆的半径长度

stroke和stroke-width两个属性用来定义图像的边框样子。上面例子中定义圆的边框颜色为green，边框粗细为4px

fill属性定义了圆内部填充的颜色。我们可以看出，例子中填充了黄色。

☆SVG 文件可通过<iframe标签嵌入 HTML 文档

使用 <iframe> 标签语法： <iframe src="circle1.svg"></iframe>

例2、使用 <iframe> 标签SVG 文件嵌入HTML 文档

先用SVG 在线编辑器SVG 在线编辑器 | 菜鸟工具建立一个名为的文件：circle1.svg

HTML 文档源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG示例2</title>
</head>
<body>
    <iframe src="circle1.svg" width="420" height="420"></iframe>
</body>
</html>

保存文件名为：SVG示例2.html，用浏览器打开效果如下：

SVG 动画元素用于为SVG图形制作动画。在动画中，可以指定属性，运动，颜色，动画的开始时间和动画的持续时间的开始和结束值。SVG动画元素有：

及<set>

使用 SMIL 的 SVG 动画 - SVG | MDN

例3、SVG动画示例，源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG动画示例</title>
</head>
<body>
    <svg width="500" height="150">
    <path d="M10,50 q60,50 100,0 q60,-50 100,0"
          style="stroke: #000000; fill: none;"
            ></path>

    <rect x="0" y="0" width="30" height="15"
          style="stroke: #ff0000; fill: none;">
        <animateMotion
                path="M10,50 q60,50 100,0 q60,-50 100,0"
                begin="0s" dur="10s" repeatCount="indefinite"
                ></animateMotion>
    </rect>
</svg>
</body>
</html>

保存文件名为：SVG示例3(动画).html，用浏览器打开效果如下：

下面介绍SVG结合JavaScript的例子

例4、SVG结合JavaScript的例子，源码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG结合JavaScript的示例</title>
</head>
<body>
<svg width="500" height="100">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: #ff0000;"/>
</svg>

<script>
    var timerFunction = null;

    function startAnimation() {
        if(timerFunction == null) {
            timerFunction = setInterval(animate, 20);
        }
    }

    function stopAnimation() {
        if(timerFunction != null){
            clearInterval(timerFunction);
            timerFunction = null;
        }
    }

    function animate() {
        var circle = document.getElementById("circle1");
        var x = circle.getAttribute("cx");
        var newX = 2 + parseInt(x);
        if(newX > 500) {
            newX = 20;
        }
        circle.setAttribute("cx", newX);
    }
</script>
<br/>
<input type="button" value="开始运动" onclick="startAnimation();">
<input type="button" value="停止运动" onclick="stopAnimation();">
</body>
</html>

保存文件名为：SVG示例4.html，用浏览器打开效果如下：

页面上的两个按钮，可以让红色的圆形运动、停止。

进一步学习资料

SVG 教程

SVG简介 | WEB知识

SVG在HTML5中的使用

SVG在HTML5中的使用

猜你喜欢