正文

SVG基础用法

譬如朝露 V管理员/ / 0 评论/ 820阅读
07 25

SVG 形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

  • 矩形 <rect>

  • 圆形 <circle>

  • 椭圆 <ellipse>

  • 线 <line>

  • 折线 <polyline>

  • 多边形 <polygon>

  • 路径 <path>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="1920" height="1000">

        <!-- 分组 -->
        <g stroke="red" id="shape">
            <!-- 矩形 -->
            <rect x='10' y='10' rx='5' ry="5" width="150" height="100" fill="none"></rect>
            <!-- 园 -->
            <circle cx="250" cy='60' r='50' fill='none'></circle>
            <!-- 椭圆 -->
            <ellipse cx="400" cy="60" rx="70" ry="50" fill='none'></ellipse>
            <!-- 直线 -->
            <line x1="10" y1="120" x2="160" y2="220"></line>
            <!-- 折线 -->
            <polyline points="250 120 300 220 200 220" fill='none'></polyline>
            <!-- 多边形 -->
            <polygon points="250 120 300 220 200 220" stroke-width="8" fill='yellow' transform="translate(150,0)">
            </polygon>

        </g>


        <!-- 重复使用分组中的图形 -->
        <use x="50" y="50" xlink:href="#shape"></use>
    </svg>
</body>

</html>

SVG实现loading动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="200" height="200">
        <!-- troke-dasharray=2pr/4 -->
        <circle cx="25" cy="25" r="22" fill="none" stroke="#3be6cb" stroke-dasharray="34" stroke-width="5"
            stroke-linecap='round'>
           
            <animateTransform attributeName='transform' type="rotate" from="0 25 25" to="360 25 25" dur="2"
                repeatCount="indefinite" />
        </circle>
        <circle cx="25" cy="25" r="12" fill="none" stroke="#02bcfe" stroke-width="3" stroke-dasharray="19"
            stroke-linecap='round'>
            <animateTransform attributeName='transform' type="rotate" from="360 25 25" to="0 25 25" dur="2"
                repeatCount="indefinite" />
        </circle>
    </svg>
</body>

</html>

参考文章:https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/

文章版权声明：除非注明，否则均为 譬如朝露_策温技术开发工作室博客原创文章，转载或复制请以超链接形式并注明出处。