使用SVG的path画半圆

2022-03-25 18:04:15 阅读：232 来源： 互联网

<svg class="d3-demo3">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fff143;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#c3272b;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M 5 200 A 50 50 0 1 1 105 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>
            <path d="M 105 200 A 50 50 0 1 1 5 200" stroke="url(#grad2)" stroke-width="10" fill="none" class="tow-part"/>
        </svg>

成果：两个半圆连成的一个渐变色圆。

简介：

<path d="M 5 200 A 50 50 0 1 1 105 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>

A指令用来绘制一段弧线,且.允许弧线不闭合。可以把A命令绘制的弧线想象成是椭圆的某一段,A指令以下有七个参数。

A 50 50 0 1 1 105 200

A rx ry 顺时针角度 1大弧0小弧 1顺时针0逆时针终点x 终点y

第三个参数，顺时针角度，这个参数是针对椭圆弧使用的，如果 rx ry 相等（圆弧）的话，设置这个顺时针角度是没有意义的，默认为0就可以了

标准半圆：

 <svg class="d3-demo3">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fff143;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M 5 200 A 50 50 0 1 1 105 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>
        </svg>

注意：M为起点坐标，rx,ry为半径，通过这两数据计算出我们需要的终点位置。如果计算出的终点不是标准的位置，圆就出现和设置不一样的半径的情况

当起点终点间的距离大于直径时，画的永远是半圆，只有起点终点间距离小于半径才能画大半圆和小半圆。

<svg class="d3-demo3">
            <defs>
                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#fff143;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
                <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#c3272b;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c31;stop-opacity:1" />
                </linearGradient>
            </defs>
            <path d="M 5 200 A 50 50 0 1 1 185 200" stroke="url(#grad1)" stroke-width="10" fill="none" class="one-part"/>
            <path d="M 105 200 A 50 50 0 1 1 5 200" stroke="url(#grad2)" stroke-width="10" fill="none" class="tow-part"/>
        </svg>

乱计算终点的情况：

标签：终点,弧线,SVG,rx,ry,顺时针,path,半圆
来源： https://www.cnblogs.com/zigood/p/16055943.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

使用SVG的path画半圆