svg上實現圖形移動

轉載自 https://www.cnblogs.com/FlyerBird/p/13266287.html

在svg上實現一個漸變多邊形(內嵌圓形)先向右再向下,然后回到原位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #path1{
            fill :green;
            fill-rule: evenodd;
            margin: 40px 40px 40px 40px;
            border: 4px solid black;
            padding:10px;
            transition: 2s; 
            animation:moveto 5s 1;
        }
        @keyframes  moveto{
            0%{
                fill: green;
                transform:translate(0);
            }
            25%{
                fill: red;
                transform:translate(100px,0);
            }
            75%{
                fill:yellow;
                transform:translate(100px,100px);
            }
            100%{
                fill:green;
                transform:translate(0,0);
            }
        }
    </style>
</head>
<body>
<div>
    <svg width=1000 height=1000>
            <path id="path1" stroke-width=3 stroke="black" fill="black"
            d="M100 100 
            L300 100 
            L350 200 
            L300 300 
            L100 300 
            L50 200 Z

            M150 200 
            A 50 50 0 1 1 250 200
            A 50 50 0 1 1 150 200"
        ></path>
    </svg>
</div>
</body>
</html>

效果如下:

image

注意弧形命令A和a的區別,前者使用絕對坐標,后者時候相對坐標。

 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

前兩個參數分別是x軸半徑和y軸半徑,x-axis-rotation是繞x軸旋轉角度,large-arc-flag(角度大小) 和sweep-flag(弧線方向),large-arc-flag決定弧線是大于還是小于180度,0表示小角度弧,1表示大角度弧。sweep-flag表示弧線的方向,0表示從起點到終點沿逆時針畫弧,1表示從起點到終點沿順時針畫弧。

具體如下(圖源:https://developer.mozilla.org/@api/deki/files/345/=SVGArcs_Flags.png)

其他介紹:Path以及填充規則fiil-rule

image

(。???)ノ

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容