svg 画圆

作者: jeneen1129 | 来源:发表于2022-06-01 10:10 被阅读0次

svg 画圆
使用SVG画圆弧
使用SVG实现圆环loading动画
Android图片之svg
SVG的使用
资源
(第六天)HTML5之SVG的了解与使用&Web数据存储
svg standalone
SVG学习笔记
SVG

样式如下

分析

两个 svg ，利用相对 box 的定位来定位 svg , 根据x, y 来确定圆的位置

代码

<div style="position:absolute;background: linear-gradient(90deg, #419488 0%, #4EB1D2 100%);min-height: 174px;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="110" height="50"
            style="position:absolute;left:120px;top:0;">
        <circle cx="10" cy="10" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cx="40" cy="10" r="10" fill="rgba(255, 255, 255, 0.4)" stroke-width="0"></circle>
        <circle cx="70" cy="10" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cx="100" cy="10" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cx="10" cy="40" r="10" fill="rgba(255, 255, 255, 0.4)" stroke-width="0"></circle>
        <circle cx="40" cy="40" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cx="70" cy="40" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cx="100" cy="40" r="10" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
    </svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="165" height="150"
            style="position:absolute;right:-10px;bottom:-15px;">
        <circle cy="15" cx="15" r="15" fill="rgba(255, 255, 255, 0.4)" stroke-width="0"></circle>
        <circle cy="15" cx="60" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="15" cx="105" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="15" cx="150" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>

        <circle cy="55" cx="15" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="55" cx="60" r="15" fill="rgba(255, 255, 255, 0.4)" stroke-width="0"></circle>
        <circle cy="55" cx="105" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="55" cx="150" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>

        <circle cy="95" cx="15" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="95" cx="60" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="95" cx="105" r="15" fill="rgba(255, 255, 255, 0.4)" stroke-width="0"></circle>
        <circle cy="95" cx="150" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>

        <circle cy="135" cx="15" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="135" cx="60" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="135" cx="105" r="15" fill="rgba(255, 255, 255, 0.1)" stroke-width="0"></circle>
        <circle cy="135" cx="150" r="15" fill="rgba(255, 255, 255, 0.4)" stroke-width="0"></circle>
    </svg>
</div>