SVG
SVG
沿著path移動
使用inkscape畫一條線，存成SVG 類似如下
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 744.09448819 1052.3622047"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="drawing.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-66.428571"
inkscape:cy="520"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="693"
inkscape:window-x="-9"
inkscape:window-y="-9"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 171.42857,212.3622 c 21.70287,0 2.88866,-1.89005 31.42857,11.42858 47.45522,22.14576 -2.89719,-11.87107 54.28572,37.14285 7.16004,6.13718 13.86481,8.05645 22.85714,11.42857 2.81994,1.05748 5.98892,1.30764 8.57143,2.85715 2.30986,1.38592 3.55929,4.09804 5.71428,5.71428 1.90477,0.95238 3.80953,1.90477 5.71429,2.85715 0.95238,0 2.00531,-0.42592 2.85714,0 1.20468,0.60233 1.90476,1.90476 2.85715,2.85714 0.95238,0.95238 1.90476,1.90476 2.85714,2.85714 4.7619,4.76191 10.0788,9.02707 14.28571,14.28572 1.33035,1.66293 1.3513,4.20844 2.85715,5.71428 1.50584,1.50585 3.80952,1.90476 5.71428,2.85714 3.80953,1.90477 7.77636,3.52296 11.42857,5.71429 1.15493,0.69296 1.90476,1.90476 2.85715,2.85714 1.90476,1.90477 3.80952,3.80953 5.71428,5.71429 1.90476,1.90476 3.5593,4.09804 5.71429,5.71428 1.70367,1.27776 4.20844,1.3513 5.71428,2.85715 11.15067,11.15067 -0.66136,1.53442 2.85715,8.57143 0.76297,1.52595 7.06724,7.06724 8.57142,8.57142"
id="path4136"
inkscape:connector-curvature="0" />
</g>
</svg>刪除不必要的東西後簡化如下
<svg
width="210mm"
height="297mm"
>
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 171.42857,212.3622 c 21.70287,0 2.88866,-1.89005 31.42857,11.42858 47.45522,22.14576 -2.89719,-11.87107 54.28572,37.14285 7.16004,6.13718 13.86481,8.05645 22.85714,11.42857 2.81994,1.05748 5.98892,1.30764 8.57143,2.85715 2.30986,1.38592 3.55929,4.09804 5.71428,5.71428 1.90477,0.95238 3.80953,1.90477 5.71429,2.85715 0.95238,0 2.00531,-0.42592 2.85714,0 1.20468,0.60233 1.90476,1.90476 2.85715,2.85714 0.95238,0.95238 1.90476,1.90476 2.85714,2.85714 4.7619,4.76191 10.0788,9.02707 14.28571,14.28572 1.33035,1.66293 1.3513,4.20844 2.85715,5.71428 1.50584,1.50585 3.80952,1.90476 5.71428,2.85714 3.80953,1.90477 7.77636,3.52296 11.42857,5.71429 1.15493,0.69296 1.90476,1.90476 2.85715,2.85714 1.90476,1.90477 3.80952,3.80953 5.71428,5.71429 1.90476,1.90476 3.5593,4.09804 5.71429,5.71428 1.70367,1.27776 4.20844,1.3513 5.71428,2.85715 11.15067,11.15067 -0.66136,1.53442 2.85715,8.57143 0.76297,1.52595 7.06724,7.06724 8.57142,8.57142"
id="path4136"
/>
</svg>之後直接貼到HTML的BODY內會產生你剛畫的線
再使用MOTIONPATH，並加入一個藍色方塊
<html>
<head>
<script type="application/javascript">
</script>
</head>
<body >
<svg
width="210mm"
height="297mm"
>
<path
style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 171.42857,212.3622 c 21.70287,0 2.88866,-1.89005 31.42857,11.42858 47.45522,22.14576 -2.89719,-11.87107 54.28572,37.14285 7.16004,6.13718 13.86481,8.05645 22.85714,11.42857 2.81994,1.05748 5.98892,1.30764 8.57143,2.85715 2.30986,1.38592 3.55929,4.09804 5.71428,5.71428 1.90477,0.95238 3.80953,1.90477 5.71429,2.85715 0.95238,0 2.00531,-0.42592 2.85714,0 1.20468,0.60233 1.90476,1.90476 2.85715,2.85714 0.95238,0.95238 1.90476,1.90476 2.85714,2.85714 4.7619,4.76191 10.0788,9.02707 14.28571,14.28572 1.33035,1.66293 1.3513,4.20844 2.85715,5.71428 1.50584,1.50585 3.80952,1.90476 5.71428,2.85714 3.80953,1.90477 7.77636,3.52296 11.42857,5.71429 1.15493,0.69296 1.90476,1.90476 2.85715,2.85714 1.90476,1.90477 3.80952,3.80953 5.71428,5.71429 1.90476,1.90476 3.5593,4.09804 5.71429,5.71428 1.70367,1.27776 4.20844,1.3513 5.71428,2.85715 11.15067,11.15067 -0.66136,1.53442 2.85715,8.57143 0.76297,1.52595 7.06724,7.06724 8.57142,8.57142"
id="path4136"
/>
<rect width="20" height="10" x="0" y="-10" fill="#09c">
<animateMotion dur="5s" path="m 171.42857,212.3622 c 21.70287,0 2.88866,-1.89005 31.42857,11.42858 47.45522,22.14576 -2.89719,-11.87107 54.28572,37.14285 7.16004,6.13718 13.86481,8.05645 22.85714,11.42857 2.81994,1.05748 5.98892,1.30764 8.57143,2.85715 2.30986,1.38592 3.55929,4.09804 5.71428,5.71428 1.90477,0.95238 3.80953,1.90477 5.71429,2.85715 0.95238,0 2.00531,-0.42592 2.85714,0 1.20468,0.60233 1.90476,1.90476 2.85715,2.85714 0.95238,0.95238 1.90476,1.90476 2.85714,2.85714 4.7619,4.76191 10.0788,9.02707 14.28571,14.28572 1.33035,1.66293 1.3513,4.20844 2.85715,5.71428 1.50584,1.50585 3.80952,1.90476 5.71428,2.85714 3.80953,1.90477 7.77636,3.52296 11.42857,5.71429 1.15493,0.69296 1.90476,1.90476 2.85715,2.85714 1.90476,1.90477 3.80952,3.80953 5.71428,5.71429 1.90476,1.90476 3.5593,4.09804 5.71429,5.71428 1.70367,1.27776 4.20844,1.3513 5.71428,2.85715 11.15067,11.15067 -0.66136,1.53442 2.85715,8.57143 0.76297,1.52595 7.06724,7.06724 8.57142,8.57142" repeatCount="indefinite" rotate="auto" />
</rect>
</svg>
</body>
</html>移動SVG位置
加入g元素，然後使用translate(x, y)
<g transform="translate(20,2.5) rotate(10)">
<rect x="0" y="0" width="60" height="10"/>
</g>SVG動畫
SVG上的屬性可以直接當作css的屬性控制
css
@keyframes example {
from {r: 40}
to {r: 140}
}
#circle1 {
animation-name: example;
animation-duration: 2s;
animation-fill-mode: forwards;
}html
<svg height="500" width="500">
<g transform="translate(120, 120) rotate(10)">
<circle id="circle1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="white" />
</g>
</svg>Last updated
Was this helpful?