【SVG学习笔记】通过案例学知识！

案例：

如何用代码​做出以上效果？​

<section data-id="undefined" class="_135editor">
<section data-tools="135编辑器" data-id="109457" data-width="97%" style="max-width: 97% !important;box-sizing:border-box;margin-left: auto; margin-right: auto; width: 97%; flex: 0 0 97%;">
<section style="text-align: center;margin: 10px auto;">
<section style="box-sizing:border-box;max-width: 100% !important;width: 100%;line-height: 0;" data-width="100%">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 516 55.69" style="enable-background: new 0 0 516 55.69;" xml:space="default">
<g>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="46.66" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="107.39" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="167.65" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="228.02" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="288.43" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="348.86" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="409.03" cy="20" rx="6.5" ry="19"></ellipse>
<ellipse class="st0" style="fill: none;stroke: #93b5b3;stroke-width: 2;stroke-miterlimit: 10;" cx="469.4" cy="20" rx="6.5" ry="19"></ellipse>
<path class="st1" style="fill: #93b5b3;" d="M496,15.69H20c-11.05,0-20,8.95-20,20v20h516v-20C516,24.64,507.05,15.69,496,15.69z M46.68,45.69
    c-5.52,0-10-4.48-10-10c0-5.52,4.48-10,10-10c5.52,0,10,4.48,10,10C56.68,41.21,52.2,45.69,46.68,45.69z M107.06,45.69
    c-5.52,0-10-4.48-10-10c0-5.52,4.48-10,10-10s10,4.48,10,10C117.06,41.21,112.58,45.69,107.06,45.69z M167.43,45.69
    c-5.52,0-10-4.48-10-10c0-5.52,4.48-10,10-10s10,4.48,10,10C177.43,41.21,172.96,45.69,167.43,45.69z M227.81,45.69
    c-5.52,0-10-4.48-10-10c0-5.52,4.48-10,10-10s10,4.48,10,10C237.81,41.21,233.33,45.69,227.81,45.69z M288.19,45.69
    c-5.52,0-10-4.48-10-10c0-5.52,4.48-10,10-10s10,4.48,10,10C298.19,41.21,293.71,45.69,288.19,45.69z M348.57,45.69
    c-5.52,0-10-4.48-10-10c0-5.52,4.48-10,10-10s10,4.48,10,10C358.57,41.21,354.09,45.69,