文字环绕模式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .circular path { fill: none;}
            .circular {
                width:250px;
                height:250px;
                border:1px solid #ff0000;
                font-size: 25px;
                padding:10px;            }
        </style>
    </head>
    <body>
        <div class="circular">
            <svg>
                <path d="M20 150  C20 0 220 0 220 150 " id="circle"  style="fill: #3283D4;"/>
                <text>
                    <textPath xlink:href="#circle">
                    circular reasoning works because
                    </textPath>
                </text>
            </svg>
        </div>
    </body>
</html>

path:画路径标签
d：path组成的坐标点
    M = moveto 移动到某一点（开始点）
    L = lineto 画线到某一点
    H = horizontal lineto 水平画线到某一点
    V = vertical lineto 垂直画线到某一点
    C = curveto 曲线点
    S = smooth curveto 平滑的曲线点
    Q = quadratic Bezier curve 二次贝塞尔曲线
    T = smooth quadratic Bezier curveto 平滑二次贝塞尔曲线
    A = elliptical Arc 椭圆弧形
    Z = closepath 关闭路径

相关阅读:
form表单的应用
HTML列表及表格的基本应用
Linux上安装Jdk
docker+jenkins自动发布步骤及命令
redis集群部署实战
mySQL中连接字符串
mysql触发器
sql 设置数字长度不足时补0
微服务架构特性
SQLServer2008 去除换行符

原文地址：https://www.cnblogs.com/binmengxue/p/5334041.html