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>

https://stackoverflow.com/questions/479591/svg-positioning

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>
PreviousRegexpNextSublime快捷鍵

Last updated