深入浅出svg

作者: chenjundi | 来源:发表于2019-05-16 17:01 被阅读0次

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG的代码可以直接嵌入到HTML页面中，也可以通过<img>、<object>、<embed>、<iframe>等标签插入网页。

网格

对于所有元素，SVG使用的坐标系统或者说网格系统，和Canvas用的差不多（所有计算机绘图都差不多）。这种坐标系统是：以页面的左上角为(0,0)坐标点，坐标以像素为单位，x轴正方向是向右，y轴正方向是向下。注意，这和你小时候所教的绘图方式是相反的。但是在HTML文档中，元素都是用这种方式定位的。

Canvas_default_grid.png

语法

SVG 的 CSS 属性

fill: 填充色
stroke: 描边
stroke-width: 描边宽度
stroke-linecap: 描边终点形状
stroke-dasharray: 描边虚线类型
stroke-dashoffset: 描边偏移距离

width属性和height属性，指定了 SVG 图像在 HTML 元素中所占据的宽度和高度。
viewBox属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。

<svg width="200" height="200" viewBox="0 0 100 100">

这里定义的画布尺寸是200*200px。但是，viewBox属性定义了画布上可以显示的区域：从(0,0)点开始，100宽*100高的区域。这个100*100的区域，会放到200*200的画布上显示。于是就形成了放大两倍的效果。

<path>标签绘制路径的信息，大写表示绝对定位，小写表示相对定位。

M: 移动到
L: 画直线到
A: 椭圆弧
Z: 闭合路径

<defs>标签预定义一个元素使其能够在SVG图像中重复使用。在<defs>中定义的图形不会直接显示在SVG图像上，要显示它们需要使用<use>来引入它们。
<g>标签将多个形状组成一个组。要引用<g>必须为其设置一个ID，通过ID来引用它。
<use>标签可以在SVG图像中多次重用一个预定义的SVG图形。<use>通过xlink:href属性来引入元素。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">  
  <defs>
    <g id="a">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>
  <use xlink:href="#a" x="0" y="0" />
  <use xlink:href="#a" x="100" y="0" /> 
</svg>

示例

Google logo（直接在html中使用）

<svg xmlns="http://www.w3.org/2000/svg" width="74" height="24" viewBox="0 0 74 24">
    <path fill="#4285F4"
          d="M9.24 8.19v2.46h5.88c-.18 1.38-.64 2.39-1.34 3.1-.86.86-2.2 1.8-4.54 1.8-3.62 0-6.45-2.92-6.45-6.54s2.83-6.54 6.45-6.54c1.95 0 3.38.77 4.43 1.76L15.4 2.5C13.94 1.08 11.98 0 9.24 0 4.28 0 .11 4.04.11 9s4.17 9 9.13 9c2.68 0 4.7-.88 6.28-2.52 1.62-1.62 2.13-3.91 2.13-5.75 0-.57-.04-1.1-.13-1.54H9.24z"/>
    <path fill="#EA4335"
          d="M25 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52z"/>
    <path fill="#4285F4"
          d="M53.58 7.49h-.09c-.57-.68-1.67-1.3-3.06-1.3C47.53 6.19 45 8.72 45 12c0 3.26 2.53 5.81 5.43 5.81 1.39 0 2.49-.62 3.06-1.32h.09v.81c0 2.22-1.19 3.41-3.1 3.41-1.56 0-2.53-1.12-2.93-2.07l-2.22.92c.64 1.54 2.33 3.43 5.15 3.43 2.99 0 5.52-1.76 5.52-6.05V6.49h-2.42v1zm-2.93 8.03c-1.76 0-3.1-1.5-3.1-3.52 0-2.05 1.34-3.52 3.1-3.52 1.74 0 3.1 1.5 3.1 3.54.01 2.03-1.36 3.5-3.1 3.5z"/>
    <path fill="#FBBC05"
          d="M38 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52z"/>
    <path fill="#34A853" d="M58 .24h2.51v17.57H58z"/>
    <path fill="#EA4335"
          d="M68.26 15.52c-1.3 0-2.22-.59-2.82-1.76l7.77-3.21-.26-.66c-.48-1.3-1.96-3.7-4.97-3.7-2.99 0-5.48 2.35-5.48 5.81 0 3.26 2.46 5.81 5.76 5.81 2.66 0 4.2-1.63 4.84-2.57l-1.98-1.32c-.66.96-1.56 1.6-2.86 1.6zm-.18-7.15c1.03 0 1.91.53 2.2 1.28l-5.25 2.17c0-2.44 1.73-3.45 3.05-3.45z"/>
</svg>

G_logo.png

Google loading（引入svg文件）
html部分：

<div class="mspin-medium">
    <div>
        <div></div>
    </div>
</div>

css部分：

.mspin-medium {
    width: 36px;
    height: 36px;
    overflow: hidden;
    -webkit-animation: mspin-rotate 1568.63ms infinite linear;
    animation: mspin-rotate 1568.63ms infinite linear
}

.mspin-medium > div {
    -webkit-animation: mspin-revrot 5332ms infinite steps(4);
    -moz-animation: mspin-revrot 5332ms infinite steps(4);
    animation: mspin-revrot 5332ms infinite steps(4)
}

.mspin-medium > div > div {
    background-image: url("mspin_googcolor_medium.svg");
    background-size: 100%;
    width: 11664px;
    height: 36px;
    -webkit-animation: mspin-medium-film 5332ms infinite steps(324);
    animation: mspin-medium-film 5332ms infinite steps(324)
}

@-webkit-keyframes mspin-medium-film {
    from {
        -webkit-transform: translateX(0)
    }

    to {
        -webkit-transform: translateX(-11664px)
    }
}

@keyframes mspin-medium-film {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-11664px)
    }
}

@-webkit-keyframes mspin-rotate {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes mspin-rotate {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes mspin-revrot {
    from {
        -webkit-transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(-360deg)
    }
}

@keyframes mspin-revrot {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

svg文件：

<svg version="1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11664" height="36" viewBox="0 0 11664 36">
    <defs>
        <path id="a" fill="none" stroke-dasharray="58.9" d="M18 5.5A12.5 12.5 0 1 1 5.5 18" stroke-width="3"
              stroke-linecap="square"/>
        <g id="b">
            <use xlink:href="#a" stroke-dashoffset="176.66"/>
            <use xlink:href="#a" stroke-dashoffset="176.58" transform="translate(36)"/>
            <use xlink:href="#a" stroke-dashoffset="176.32" transform="translate(72)"/>
            <use xlink:href="#a" stroke-dashoffset="175.85" transform="translate(108)"/>
            <use xlink:href="#a" stroke-dashoffset="175.14" transform="translate(144)"/>
            <use xlink:href="#a" stroke-dashoffset="174.13" transform="translate(180)"/>
            <use xlink:href="#a" stroke-dashoffset="172.78" transform="translate(216)"/>
            <use xlink:href="#a" stroke-dashoffset="171.01" transform="translate(252)"/>
            <use xlink:href="#a" stroke-dashoffset="168.78" transform="translate(288)"/>
            <use xlink:href="#a" stroke-dashoffset="166.02" transform="translate(324)"/>
            <use xlink:href="#a" stroke-dashoffset="162.73" transform="translate(360)"/>
            <use xlink:href="#a" stroke-dashoffset="159.01" transform="translate(396)"/>
            <use xlink:href="#a" stroke-dashoffset="155.04" transform="translate(432)"/>
            <use xlink:href="#a" stroke-dashoffset="151.05" transform="translate(468)"/>
            <use xlink:href="#a" stroke-dashoffset="147.23" transform="translate(504)"/>
            <use xlink:href="#a" stroke-dashoffset="143.71" transform="translate(540)"/>
            <use xlink:href="#a" stroke-dashoffset="140.54" transform="translate(576)"/>
            <use xlink:href="#a" stroke-dashoffset="137.72" transform="translate(612)"/>
            <use xlink:href="#a" stroke-dashoffset="135.21" transform="translate(648)"/>
            <use xlink:href="#a" stroke-dashoffset="132.98" transform="translate(684)"/>
            <use xlink:href="#a" stroke-dashoffset="131.01" transform="translate(720)"/>
            <use xlink:href="#a" stroke-dashoffset="129.26" transform="translate(756)"/>
            <use xlink:href="#a" stroke-dashoffset="127.71" transform="translate(792)"/>
            <use xlink:href="#a" stroke-dashoffset="126.33" transform="translate(828)"/>
            <use xlink:href="#a" stroke-dashoffset="125.1" transform="translate(864)"/>
            <use xlink:href="#a" stroke-dashoffset="124.01" transform="translate(900)"/>
            <use xlink:href="#a" stroke-dashoffset="123.04" transform="translate(936)"/>
            <use xlink:href="#a" stroke-dashoffset="122.19" transform="translate(972)"/>
            <use xlink:href="#a" stroke-dashoffset="121.43" transform="translate(1008)"/>
            <use xlink:href="#a" stroke-dashoffset="120.77" transform="translate(1044)"/>
            <use xlink:href="#a" stroke-dashoffset="120.19" transform="translate(1080)"/>
            <use xlink:href="#a" stroke-dashoffset="119.69" transform="translate(1116)"/>
            <use xlink:href="#a" stroke-dashoffset="119.26" transform="translate(1152)"/>
            <use xlink:href="#a" stroke-dashoffset="118.89" transform="translate(1188)"/>
            <use xlink:href="#a" stroke-dashoffset="118.58" transform="translate(1224)"/>
            <use xlink:href="#a" stroke-dashoffset="118.33" transform="translate(1260)"/>
            <use xlink:href="#a" stroke-dashoffset="118.13" transform="translate(1296)"/>
            <use xlink:href="#a" stroke-dashoffset="117.98" transform="translate(1332)"/>
            <use xlink:href="#a" stroke-dashoffset="117.88" transform="translate(1368)"/>
            <use xlink:href="#a" stroke-dashoffset="117.82" transform="translate(1404)"/>
            <use xlink:href="#a" stroke-dashoffset="117.8" transform="translate(1440)"/>
            <use xlink:href="#a" stroke-dashoffset="117.72" transform="translate(1476)"/>
            <use xlink:href="#a" stroke-dashoffset="117.46" transform="translate(1512)"/>
            <use xlink:href="#a" stroke-dashoffset="117" transform="translate(1548)"/>
            <use xlink:href="#a" stroke-dashoffset="116.29" transform="translate(1584)"/>
            <use xlink:href="#a" stroke-dashoffset="115.29" transform="translate(1620)"/>
            <use xlink:href="#a" stroke-dashoffset="113.94" transform="translate(1656)"/>
            <use xlink:href="#a" stroke-dashoffset="112.19" transform="translate(1692)"/>
            <use xlink:href="#a" stroke-dashoffset="109.97" transform="translate(1728)"/>
            <use xlink:href="#a" stroke-dashoffset="107.23" transform="translate(1764)"/>
            <use xlink:href="#a" stroke-dashoffset="103.96" transform="translate(1800)"/>
            <use xlink:href="#a" stroke-dashoffset="100.27" transform="translate(1836)"/>
            <use xlink:href="#a" stroke-dashoffset="96.32" transform="translate(1872)"/>
            <use xlink:href="#a" stroke-dashoffset="92.35" transform="translate(1908)"/>
            <use xlink:href="#a" stroke-dashoffset="88.56" transform="translate(1944)"/>
            <use xlink:href="#a" stroke-dashoffset="85.07" transform="translate(1980)"/>
            <use xlink:href="#a" stroke-dashoffset="81.92" transform="translate(2016)"/>
            <use xlink:href="#a" stroke-dashoffset="79.11" transform="translate(2052)"/>
            <use xlink:href="#a" stroke-dashoffset="76.61" transform="translate(2088)"/>
            <use xlink:href="#a" stroke-dashoffset="74.4" transform="translate(2124)"/>
            <use xlink:href="#a" stroke-dashoffset="72.45" transform="translate(2160)"/>
            <use xlink:href="#a" stroke-dashoffset="70.71" transform="translate(2196)"/>
            <use xlink:href="#a" stroke-dashoffset="69.16" transform="translate(2232)"/>
            <use xlink:href="#a" stroke-dashoffset="67.79" transform="translate(2268)"/>
            <use xlink:href="#a" stroke-dashoffset="66.57" transform="translate(2304)"/>
            <use xlink:href="#a" stroke-dashoffset="65.49" transform="translate(2340)"/>
            <use xlink:href="#a" stroke-dashoffset="64.53" transform="translate(2376)"/>
            <use xlink:href="#a" stroke-dashoffset="63.68" transform="translate(2412)"/>
            <use xlink:href="#a" stroke-dashoffset="62.93" transform="translate(2448)"/>
            <use xlink:href="#a" stroke-dashoffset="62.27" transform="translate(2484)"/>
            <use xlink:href="#a" stroke-dashoffset="61.7" transform="translate(2520)"/>
            <use xlink:href="#a" stroke-dashoffset="61.2" transform="translate(2556)"/>
            <use xlink:href="#a" stroke-dashoffset="60.77" transform="translate(2592)"/>
            <use xlink:href="#a" stroke-dashoffset="60.4" transform="translate(2628)"/>
            <use xlink:href="#a" stroke-dashoffset="60.1" transform="translate(2664)"/>
            <use xlink:href="#a" stroke-dashoffset="59.85" transform="translate(2700)"/>
            <use xlink:href="#a" stroke-dashoffset="59.65" transform="translate(2736)"/>
            <use xlink:href="#a" stroke-dashoffset="59.5" transform="translate(2772)"/>
            <use xlink:href="#a" stroke-dashoffset="59.4" transform="translate(2808)"/>
            <use xlink:href="#a" stroke-dashoffset="59.34" transform="translate(2844)"/>
            <use xlink:href="#a" stroke-dashoffset="59.32" transform="translate(2880)"/>
        </g>
        <g id="c">
            <use xlink:href="#a" stroke-dashoffset="70.71" transform="translate(2196)" opacity=".05"/>
            <use xlink:href="#a" stroke-dashoffset="69.16" transform="translate(2232)" opacity=".1"/>
            <use xlink:href="#a" stroke-dashoffset="67.79" transform="translate(2268)" opacity=".15"/>
            <use xlink:href="#a" stroke-dashoffset="66.57" transform="translate(2304)" opacity=".2"/>
            <use xlink:href="#a" stroke-dashoffset="65.49" transform="translate(2340)" opacity=".25"/>
            <use xlink:href="#a" stroke-dashoffset="64.53" transform="translate(2376)" opacity=".3"/>
            <use xlink:href="#a" stroke-dashoffset="63.68" transform="translate(2412)" opacity=".35"/>
            <use xlink:href="#a" stroke-dashoffset="62.93" transform="translate(2448)" opacity=".4"/>
            <use xlink:href="#a" stroke-dashoffset="62.27" transform="translate(2484)" opacity=".45"/>
            <use xlink:href="#a" stroke-dashoffset="61.7" transform="translate(2520)" opacity=".5"/>
            <use xlink:href="#a" stroke-dashoffset="61.2" transform="translate(2556)" opacity=".55"/>
            <use xlink:href="#a" stroke-dashoffset="60.77" transform="translate(2592)" opacity=".6"/>
            <use xlink:href="#a" stroke-dashoffset="60.4" transform="translate(2628)" opacity=".65"/>
            <use xlink:href="#a" stroke-dashoffset="60.1" transform="translate(2664)" opacity=".7"/>
            <use xlink:href="#a" stroke-dashoffset="59.85" transform="translate(2700)" opacity=".75"/>
            <use xlink:href="#a" stroke-dashoffset="59.65" transform="translate(2736)" opacity=".8"/>
            <use xlink:href="#a" stroke-dashoffset="59.5" transform="translate(2772)" opacity=".85"/>
            <use xlink:href="#a" stroke-dashoffset="59.4" transform="translate(2808)" opacity=".9"/>
            <use xlink:href="#a" stroke-dashoffset="59.34" transform="translate(2844)" opacity=".95"/>
            <use xlink:href="#a" stroke-dashoffset="59.32" transform="translate(2880)"/>
        </g>
    </defs>
    <use xlink:href="#b" stroke="#4285f4"/>
    <use xlink:href="#c" stroke="#db4437"/>
    <use xlink:href="#b" stroke="#db4437" transform="translate(2916)"/>
    <use xlink:href="#c" stroke="#f4b400" transform="translate(2916)"/>
    <use xlink:href="#b" stroke="#f4b400" transform="translate(5832)"/>
    <use xlink:href="#c" stroke="#0f9d58" transform="translate(5832)"/>
    <use xlink:href="#b" stroke="#0f9d58" transform="translate(8748)"/>
    <use xlink:href="#c" stroke="#4285f4" transform="translate(8748)"/>
</svg>

G_loading.gif

深入浅出svg

什么是SVG？

网格

语法

示例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读