| Warren's

svg 相关使用说明

svg

xmlns 该属性意味着这个 svg 标签和它的子节点都属于'http://www.w3.org/2000/svg' 这个SVG命名空间; 请注意，命名空间仅仅只是一些字符串，所以SVG上那些看起来像URI的命名空间并不重要。因为URIs的唯一性从而被广泛使用，它的本意并不是要“链接”到某个地址
fill stroke stroke-width stroke-dasharray 这些属性可以写到 style 中
fill：填充色
stroke：定义一条线、文本或元素的轮廓颜色
stroke-dasharray: 实现长度虚线是长度
设置颜色时可以直接设置为 currentColor 关键字这样就会继承父标签的颜色,以此来实现svg图标颜色修改

圆环进度示例

<svg viewBox="0 0 200 200" style="width:200px; height:200px;background-color: rgb(235, 25, 235);" version="1.0" xmlns="http://www.hew/circle/svg">
    <!-- 虚线 -->
    <path d="M0 100 H 300" stroke="blue" stroke-width="1" stroke-dasharray="10"></path>
    <path d="M100 0 V 300" stroke="blue" stroke-width="1" stroke-dasharray="10"></path>
    
    <!-- 填充透明色 -->
    <circle r="50px" cx="100px" cy="100px" style="fill:transparent;stroke:lightgrey;stroke-width: 10;"></circle>
    <circle r="50px" cx="100px" cy="100px" id="cPercent" style="fill:transparent;stroke-dasharray: 0 314;"></circle>
    <g style="fill: rgb(4, 209, 209);"> 
        <text x="100" y="100" id="pText" style="text-anchor: middle;dominant-baseline: middle;">0%</text>
    </g>
</svg>
<script>
function setPercent(percent = 20) {
    percent = percent
    /* 这里严格意义上当求出来的 dash 值 为304的时候圆环就已经合上了 因为 linecap是round 会以 stroke width 值的一半为半径在两端添加半圆
        所以这里乘以的314可以根据实际的stroke width 调整
    */
    const dash = percent/100*314
    /* 314 = 2 * PI * r 这里的r就按照内圈算刚好 */
    /* 设置旋转中心，-90deg  */
    const stylePercent= `transform-origin: 100px 100px; transform: rotate(-90deg); fill:transparent; stroke:yellow;
    stroke-width:10; stroke-linecap:${ percent > 0 ? 'round' : 'butt' }; stroke-dasharray: ${dash} 314; transition: stroke-dasharray 2s;`
    document.querySelector('#cPercent').setAttribute('style', stylePercent);
    document.querySelector('#pText').innerHTML= `${percent}%`
}

</script>

相关参数说明

<!-- 
    viewBox 属性的值是一个包含4个参数的列表 viewBox="min-x min-y width height" 如果设置小了就只会显示内部图形一部分,设置大了内部图形就会按比例缩小
    所以 viewBox 的宽高设置要对应内部图形的宽高
 -->
<!-- 半圆弧进度 -->
<svg width="900" height="600" version="1.0" xmlns="http://www.hew/percent/svg" style="background-color: rgb(5, 216, 216);">
    <!-- stroke-dasharray 就是控制画笔的虚实，通过实线和虚线的来控制画； 如果参数是一个 那虚线和实线一样长， -->
    <!-- 可以在shape(形状)和text content elements(字体元素)上起作用 -->

    <!-- stroke-linecap="round" 设置两边为圆弧  -->
    <!-- 圆 边线 起始位置以右边顶点为 0度 开始 -->
    <circle cx="200" cy="160" r="130" stroke="red" fill="transparent" stroke-width="20" stroke-dasharray="310" stroke-dashoffset="0" stroke-linecap="round"/>
    <circle cx="200" cy="160" r="130" stroke="green" fill="transparent" stroke-width="20" stroke-dasharray="10 410" stroke-dashoffset="-410"/>
</svg>

<svg width="900" height="600" version="1.0" xmlns="http://www.hew/1/svg" style="background-color: rgb(5, 216, 216);">
    <!-- x:矩形左上角的x位置 y:矩形左上角的y位置 rx:圆角的x方位的半径 ry:圆角的y方位的半径 -->
    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="2"/>
    
    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="2"/>
    <ellipse cx="75" cy="75" rx="20" ry="2" stroke="red" fill="transparent" stroke-width="2"/>
    
    <!-- 标注起点，终点的坐标 -->
    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="2"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145, 300 300" stroke="orange" fill="transparent" stroke-width="2"/>
    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="2"/>
    
    <text x="0" y="15" fill="red">文本</text>

    <!-- stroke 表示画线的颜色 fill 是连线区域间填充的颜色 -->

    <!-- 
        M = moveto 在什么位置开始 (必须要设置)
        L = lineto 画线到
        H = horizontal lineto 水平线到
        V = vertical lineto 垂直线到
        C = curveto 三次贝塞尔曲线到
        S = smooth curveto  光滑三次贝塞尔曲线到
        Q = quadratic Bézier curve 二次贝塞尔曲线
        T = smooth quadratic Bézier curveto 光滑二次贝塞尔曲线到
        A = elliptical Arc
        Z = closepath  关闭路径
    -->
    <!-- 大写表示绝对位置，小写表示相对位置（相对的是上一个绘画结束点） -->
    <path d="M20,230 Q40,205 50,230 T90,230" fill="red" stroke="blue" stroke-width="2"/>

    <!-- H V 表示在上一个绘制结束点，向水平或垂直方向延伸到指定x位置或y位置 -->
    <path d="M110 20, L 120 40, H 200, V 200" fill="none" stroke="white" stroke-width="2"/>

    <!-- Z 表示连接起点与终点 -->
    <path d="M 120 60, L 120 100, L 160 100, Z" fill="pink" stroke="pink" stroke-width="2"/>

    <!-- 
        A 参数：elliptical Arc 弧线 画弧线
        1. 水平方向半径(椭圆的其中一个半径)，会根据终点位置进行自动比例换算 
        2. 垂直方向半径 
        3. 顺时针角度 针对椭圆弧使用，如果 rx ry 相等，没有意义 默认0
        4. 1 画大角度弧线 0 画小角度弧线 
        5. 1 从起点到终点顺时针画弧线 0表示逆时针 
        6. 终点x 
        7. 终点y 
    -->
    <path d="M 310 100, L 310 5, A 700 700 0 0 0 580 100" fill="green" stroke="pink" stroke-width="2"/>

    <!-- C 三次贝塞尔曲线: 贝塞尔第一个控制点xy坐标 贝塞尔第二个控制点xy坐标 终点xy坐标 -->
    <path d="M 300 220, L 300 150, C 310 190 390 210 450 220" fill="orange" stroke="pink" stroke-width="2"/>

    <!-- S 在上一个贝塞尔曲线后连接贝塞尔曲线构成完整光滑曲线: 贝塞尔第二个控制点xy坐标 终点xy坐标  这里的第一个控制点自动为上一个贝塞尔曲线的第二个控制点的对称点-->
    <path d="M 0 310 ,C 25 360 75 360 100 310 ,S 175 260 200 310" fill="orange" stroke="pink" stroke-width="2"/>
    
    <!-- Q 二次贝塞尔曲线: 控制点xy坐标 终点xy坐标 -->
    <path d="M 0 380 ,Q 60 450 120 380" fill="orange" stroke="pink" stroke-width="2"/>

    <!-- T 在前一个二次贝塞尔曲线后追加一个二次贝塞尔曲线，构成完整光滑曲线: 追击的终点xy坐标 -->
    <path d="M 0 500 ,Q 60 530 120 500 T 240 500" fill="orange" stroke="pink" stroke-width="2"/>
</svg>

复用

<svg width="600" height="600" version="1.0" xmlns="http://www.hew/circle/svg" style="background-color: rgb(235, 235, 235);">
    <symbol id="s1" viewBox="0 0 50 50">
        <!-- viewBox 和 svg的用法一致 -->
        <circle cx="25" cy="25" r="24" stroke-width="1" stroke="red" fill="red"/>
    </symbol>
    <!-- 可以控制引用图形大小位置 -->
    <use xlink:href="#s1" x="50" y="50" width="100" height="100"/>

    <!-- https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/defs -->
    <!-- 常见用法如下 -->
    <defs>
        <g id="g">
            <rect id="rect" width="100" height="50" x="10" y="10" fill="pink"/>
            <circle id="circle" cx="30" cy="30" r="10" fill="green"/>
        </g>
        <linearGradient id="gradient">
            <stop offset="5%" stop-color="#F00" />
            <stop offset="95%" stop-color="#ff0" />
        </linearGradient>
        <path id="p" d="M0 50 C150 150 100 -50 300 50" stroke="#000" fill="none"/>
    </defs>

    <use xlink:href="#g"/>
    <rect x="10" y="10" width="60" height="10" fill="url(#gradient)"  />
    <use xlink:href="#p"/>
    <use xlink:href="#rect" x="110"/>
    <use xlink:href="#circle" x="210"/>
</svg>

旋转加载和动画

<svg xmlns="http://www.animate.com/q" viewBox="0 0 300 300" width="300" height="300">
    <!-- 参考 https://segmentfault.com/a/1190000009371194 -->
    <circle cx="175" cy="75" r="20" fill="red">
        <animate attributeName="r" attributeType="XML" values="20;50;20" keyTimes="0;.15;1" calcMode="spline"
            keySplines=".5 0 .5 1;.5 0 .5 1" begin="0" dur="1" repeatCount="indefinite" fill="freeze"></animate>
    </circle>
</svg>
<svg xmlns="http://www.animate.com/b" viewBox="0 0 100 100" width="100" height="100" style="background-color: red;">
    <!-- 这里M定义的起点和A的终点相照应 -->
    <!-- 注意内圆是重新启用起点，顺时针画弧 -->
    <path d="M50 0 A50 50 0 0 0 50 100 A50 50 0 0 0 50 0 M50 4 A46 46 0 0 1 50 96 A46 46 0 0 1 50 4 z" fill="#fff" />

    <!-- 注意内圆不用启用新起点 -->
    <path d="M50 0 A50 50 0 1 0 100 50 L96 50 A46 46 0 1 1 50 4z" fill="#B4B4B4">
        <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite" />
    </path>
</svg>

# svg 相关使用说明

# svg

# 圆环进度示例

# 相关参数说明

# 复用

# 旋转加载和动画

svg 相关使用说明

svg

圆环进度示例

相关参数说明

复用

旋转加载和动画