54. svg {ignore}

[toc]

1. svg的概念

svg: scalable vector graphics，可缩放的矢量图。

  1. 该图片使用代码书写而成
  2. 缩放不会失真
  3. 内容轻量（文件很小）

svg使用 xml语言定义。

2. 怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件。

示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>直接将 svg 文件代码引入</title>
  7.     <style>
  8.         svg {
  9.             width: 100px;
  10.             height: 100px;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
  17.         class="icon" p-id="2056" style="" t="1558689414500" version="1.1" viewBox="0 0 1024 1024">
  18.         <defs>
  19.             <style type="text/css" />
  20.             </defs>
  21.             <path fill="#34950e" d="M236.24 323.769c0 24.005 19.32 43.325 43.325 43.325s43.326-19.32 43.326-43.325c0-24.005-19.321-43.325-43.326-43.325-24.004 0-43.325 19.32-43.325 43.325z m336.064 223.067c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958-33.958 15.223-33.958 33.958zM456.38 323.769c0 24.005 19.32 43.325 43.325 43.325 24.005 0 43.325-19.32 43.325-43.325 0-24.005-19.32-43.325-43.325-43.325-24.005 0-43.325 19.32-43.325 43.325z" p-id="2057"/>
  22.             <path fill="#34950e" d="M858.017 0H165.983C74.648 0 0.293 74.356 0.293 166.276v690.863c0 91.92 74.355 166.276 165.69 166.276h692.034c91.335 0 165.69-74.356 165.69-166.276V166.276C1023.707 74.94 949.352 0 858.017 0zM384.366 686.18c-38.642 0-69.672-8.197-108.899-15.808L167.154 724.82l31.03-93.09C120.316 577.28 74.063 507.022 74.063 422.128c0-147.54 139.929-264.05 310.303-264.05 152.81 0 286.298 93.09 313.23 217.798a255.341 255.341 0 0 0-29.859-1.757c-147.54 0-264.05 110.07-264.05 245.315 0 22.834 3.513 44.496 9.367 64.988-9.367 1.171-18.735 1.757-28.688 1.757z m457.843 108.313l23.42 77.283-84.895-46.838c-31.03 7.61-62.06 15.808-93.09 15.808-147.541 0-264.051-100.703-264.051-225.41 0-124.12 116.51-225.408 264.05-225.408 139.344 0 263.465 101.288 263.465 225.409-0.585 70.843-46.838 132.903-108.899 179.156z" p-id="2058"/>
  23.             <path fill="#34950e" d="M741.507 546.836c0 18.735 15.223 33.958 33.958 33.958s33.958-15.223 33.958-33.958-15.223-33.958-33.958-33.958c-19.32 0-33.958 15.223-33.958 33.958z" p-id="2059"/>
  24.         </svg>
  25. </body>
  26. </html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>将其视作为一个文件来引入</title>
    <style>
        img,
        embed,
        object,
        iframe {
            width: 100px;
            height: 100px;
        }

        p {
            width: 100px;
            height: 100px;
            background: url("imgs/weixin.svg") no-repeat center/cover;
        }
    </style>
</head>

<body>
    <img src="imgs/weixin.svg" alt="">
    <p></p>
    <embed src="imgs/weixin.svg" type="image/svg+xml">
    <object data="imgs/weixin.svg" type="image/svg+xml"></object>
    <iframe src="imgs/weixin.svg"></iframe>
</body>

</html>

54. [扩展]svg - 图1

3. 书写svg代码

在 vscode 中，先安装一个名为 svg 的插件。

54. [扩展]svg - 图2

头两行内容：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

这两行可有可无。

输入左尖括号<，快速生成 svg 元素，即：下面这段代码。

<svg xmlns="http://www.w3.org/2000/svg">

</svg>

  • width、height

    • 在这个元素身上，我们可以设置 height 和 width；如果不设置的话，默认 width 是 300px；height 是 150px。

  • style

    • 也可以像是普通元素那样，直接在 svg 元素身上写样式。
<svg style="background: #666;" width="200" height="100" xmlns="http://www.w3.org/2000/svg">

</svg>

效果：

54. [扩展]svg - 图3

矩形:rect

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" y="100" x="100" fill="#008c8c" stroke="red" stroke-width="10" />
</svg>

54. [扩展]svg - 图4

相关属性解释：

  • width=”100”

    • 矩形的宽度设置为 100px

  • height=”100”

    • 矩形的高度设置为 100px

  • y=”100”

    • 纵向上，矩形的左上角，距离 svg 的左上角为 100px

  • x=”100”

    • 横向上，矩形的左上角，距离 svg 的左上角为 100px

  • fill=”#008c8c”

    • 矩形的背景色填充为马尔斯绿 #008c8c

  • stroke=”red”

    • 矩形的描边颜色设置为 red

  • stroke-width=”10”

    • 矩形的描边粗细设置为 10px

PS：这里介绍的属性仅是一小部分，还有很多其他属性可以设置。

圆形：circle

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="transparent" stroke="#000" stroke-width="5" />
</svg>

效果：

54. [扩展]svg - 图5

相关属性解释：

  • cx=”100”

    • 圆心的横坐标

  • cy=”100”

    • 圆心的纵坐标

  • r=”50”

    • 圆的半径

椭圆：ellipse

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <ellipse rx="100" ry="50" cx="200" cy="100" fill="red" stroke="#000" stroke-width="5" />
</svg>

效果：

54. [扩展]svg - 图6

线条：line

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <line x1="10" y1="10" x2="300" y2="30" stroke="#008c8c" stroke-width="3" />
</svg>

效果：

54. [扩展]svg - 图7

x1="10" y1="10" x2="300" y2="30" 分别表示起点坐标和终点坐标。

折线：polyline

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <polyline points="300,100,350,100,350,150,400,150,400,200" fill="red" stroke="#000" stroke-width="3" />
</svg>

效果：

54. [扩展]svg - 图8

属性解释：

points="300,100,350,100,350,150,400,150,400,200" 每两个值为一组，描述折线经过的点的坐标。

填充范围：第一个点和最后一个点相连，填充封闭区域。

多边形：polygon

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <polygon points="200,200, 300, 300, 200, 400" fill="#008c8c" stroke="#000" stroke-width="3" />
</svg>

效果：

54. [扩展]svg - 图9

路径：path

SVG W3School

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <path d="M150 200 L300 200 L100 300 L150 300 Z" fill="red" style="stroke:#000; stroke-width:5" />
</svg>

效果：

54. [扩展]svg - 图10

示例：

<svg style="background: #666;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <path d="M300 300 A150 150 0 0 0 450 150" fill="none" style="stroke:#000; stroke-width:3" />
</svg>

效果：

54. [扩展]svg - 图11

A

  • 半径1
  • 半径2
  • 顺时针旋转角度
  • 小弧（0）或大弧（1）
  • 顺时针（1）逆时针（0）
  • 结束点的坐标

补充：如果绘制出来的图形和我们预期的不符，或者没有绘制出来，那么有可能是出现的错误。查看错误信息，可以双击打开svg文件，在浏览器中查看。

例子

画太极图

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background:#ccc">
    <path fill="#000" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" />
    <path fill="#fff" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" />
    <circle cx="250" cy="150" r="30" fill="#fff" />
    <circle cx="250" cy="350" r="30" fill="#000" />
</svg>

效果：

54. [扩展]svg - 图12

小结

svg 在工作中用到的情况很少，几乎不会用。所以，这节课也只是对 svg 做一个简单的介绍，具体的用法，可以上网找相关资料自学。（袁老说这个很简单）