码迷,mamicode.com
首页 > 其他好文 > 详细

文字环绕模式

时间:2016-03-29 19:13:47      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

<!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组成的坐标点
    = moveto 移动到某一点(开始点)
    = lineto 画线到某一点
    = horizontal lineto 水平 画线到某一点
    = vertical lineto 垂直 画线到某一点
    C = curveto 曲线点
    S = smooth curveto 平滑的曲线点
    = quadratic Bezier curve 二次贝塞尔曲线
    T = smooth quadratic Bezier curveto 平滑二次贝塞尔曲线
    A = elliptical Arc 椭圆 弧形
    Z = closepath 关闭路径

文字环绕模式

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!