HTML5学习笔记16-SVG_<svg width="16-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_19919127/article/details/54846896

本文介绍了SVG（可伸缩矢量图形）的基本概念及其在网页中的应用，包括如何使用SVG绘制矢量图形、动画效果及引入外部SVG文件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、SVG介绍

<!--SVG指可伸缩矢量图形（Scaleble Vector Graphics）-->
    <!--SVG用来定义用于网格的基于矢量的图形-->
    <!--SVG使用XML格式定义图形-->
    <!--SVG图像在放大或者改变尺寸的情况下其图形质量不会有损失-->
    <!--SVG是万维网联盟的标准-->

2、SVG绘制矢量图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绘制矢量图形</title>
</head>
<body>
    <svg width="120" height="120" viewBox="0 0 120 120"
         xmlns="http://www.w3.org/2000/svg">

        <ellipse cx="60" cy="60" rx="50" ry="25"/>
    </svg>

    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="feOffset" x="-40" y="-20" width="100" height="200">
                <feOffset in="SourceGraphic" dx="60" dy="60" />
            </filter>
        </defs>

        <rect x="40" y="40" width="100" height="100"
              style= "stroke : #000000; fill: green; filter: url(#feOffset);" />
        <rect x="40" y="40" width="100" height="100"
              style= "stroke : #000000; fill: green; " />
    </svg>

    <svg width="120" height="120" viewPort="0 0 120 120" version="1.1"
         xmlns="http://www.w3.org/2000/svg">

        <rect x="10" y="10" width="100" height="100">
            <animate attributeType="XML" attributeName="x" from="-100" to="120"
                     dur="10s" repeatCount="indefinite"/>
        </rect>
    </svg>
</body>
</html>

3、引入外部SVG图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <iframe src="svg.svg" frameborder="no" width="400" height="200"></iframe>
</body>
</html>

<?xml version="1.1"?>
<svg viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="MyPath"
              d="M 100 200
             C 200 100 300   0 400 100
             C 500 200 600 300 700 200
             C 800 100 900 100 900 100" />
    </defs>

    <use xlink:href="#MyPath" fill="none" stroke="red"  />

    <text font-family="Verdana" font-size="42.5">
        <textPath xlink:href="#MyPath">
            ELLOWORLD 20170203 ELLOWORLD HAHAHAHA
        </textPath>
    </text>

    <!-- Show outline of the viewport using 'rect' element -->
    <rect x="1" y="1" width="998" height="298"
          fill="none" stroke="black" stroke-width="2" />
</svg>