1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Title</title>
    7.     <style>
    9.     </style>
    10.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    11.     <style>
    12.         .star-path {
    14.             fill: none;
    16.             stroke-width: 10;
    18.             stroke: #d3dce6;
    20.             stroke-linejoin: round;
    22.             stroke-linecap: round;
    24.         }
    26.         .star-fill {
    28.             fill: none;
    30.             stroke-width: 10;
    32.             stroke: #ff7700;
    34.             stroke-linejoin: round;
    36.             stroke-linecap: round;
    38.             stroke-dasharray: 800;
    40.             stroke-dashoffset: 0;
    42.             animation: starFill 2s infinite;
    44.         }
    46.         .star-fill2 {
    47.             fill: none;
    49.             stroke-width: 10;
    51.             stroke: #ff7700;
    53.             stroke-linejoin: round;
    55.             stroke-linecap: round;
    57.             stroke-dasharray: 20, 20;
    59.             stroke-dashoffset: 0;
    61.             animation: starFill 10s infinite linear;
    62.         }
    64.         .star-fill3 {
    65.             stroke: #5eff00;
    66.             stroke-dasharray: 20, 780;
    67.             animation: starFill 2s infinite linear;
    68.         }
    70.         @keyframes starFill {
    71.             0% {
    73.                 stroke-dashoffset: 0;
    75.             }
    77.             100% {
    79.                 stroke-dashoffset: 800;
    81.             }
    83.         }
    84.     </style>
    85. </head>
    87. <body>
    89.     <div id="car" style="position: absolute; width: 20px; height: 10px; background: red; display: block;"></div>
    90.     <div>
    91.         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="-500 -500 2500 2500">
    93.             <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-path"></polygon>
    95.             <polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" class="star-fill"></polygon>
    97.         </svg>
    98.     </div>
    99.     <div>
    100.         <svg width="500" height="500">
    102.             <path d="M100 150 L200 50 L300 150 L400 50 Z"
    104.                   stroke="#ccc" stroke-width="2"
    106.                   fill="none"
    108.             />
    110.             <circle r="20" x="150" y="0" style="fill:#336622;">
    112.               <animateMotion
    114.                 dur="3s"
    116.                 repeatCount="indefinite"
    118.                 rotate="auto"
    120.                 path="M100 150 L200 50 L300 150 L400 50 Z" />
    122.             </circle>
    124.            </svg>
    125.     </div>
    126.     <div>
    127.         <?xml version="1.0" standalone="no"?>
    128.         <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    129.             <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" class="star-path" />
    130.             <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" class="star-fill2" />
    131.             <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" class="star-fill2 star-fill3" />
    132.         </svg>
    133.     </div>
    134.     <div>
    135.         <?xml version="1.0"?>
    136.         <svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    138.             <line stroke-dasharray="5, 5" x1="10" y1="10" x2="190" y2="10" />
    139.             <line stroke-dasharray="5, 10" x1="10" y1="30" x2="190" y2="30" />
    140.             <line stroke-dasharray="10, 5" x1="10" y1="50" x2="190" y2="50" />
    141.             <line stroke-dasharray="5, 1" x1="10" y1="70" x2="190" y2="70" />
    142.             <line stroke-dasharray="1, 5" x1="10" y1="90" x2="190" y2="90" />
    143.             <line stroke-dasharray="0.9" x1="10" y1="110" x2="190" y2="110" />
    144.             <line stroke-dasharray="15, 10, 5" x1="10" y1="130" x2="190" y2="130" />
    145.             <line stroke-dasharray="15, 10, 5, 10" x1="10" y1="150" x2="190" y2="150" />
    146.             <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    147.             <line stroke-dasharray="5, 5, 1, 5" x1="10" y1="190" x2="190" y2="190" />
    149.             <style>
    150.                 line {
    151.                     stroke: black;
    152.                     stroke-width: 2;
    153.                 }
    154.             </style>
    155.         </svg>
    156.     </div>
    157.     <script>
    158.         var path = "m168.5,30c0,-1 0.96384,-1.11587 4,-2c3.95868,-1.15277 9.04495,-0.2669 15,-1c4.09221,-0.50377 9.01257,-0.64556 14,-1c7.05328,-0.50126 15,-1 23,-1c6,0 13,0 21,0c9,0 16,0 17,0c1,0 6.41422,2.58579 5,4c-0.70709,0.70711 -4.13043,1.48757 -9,3c-7.27304,2.25893 -13.07278,6.8819 -18,10c-6.09346,3.85613 -13.97354,9.06009 -23,13c-13.95969,6.09319 -31.09531,13.79768 -44,20c-10.07687,4.8432 -18.25406,7.35724 -24,10c-5.2975,2.4365 -12,6 -18,9c-4,2 -8.94341,3.14773 -14,5c-5.93867,2.17538 -10.07844,2.78985 -13,4c-2.06586,0.85571 -3.18734,1.79319 -1,0c5.57665,-4.57176 14.78916,-10.40383 26,-16c10.81097,-5.39656 19.94585,-10.14858 28,-13c8.94293,-3.16607 18.93364,-5.36646 29,-7c7.95816,-1.29143 16.01761,-2.50378 23,-3c7.05328,-0.50126 15,-1 25,-1c10,0 19,0 26,0c9,0 17,0 26,0c4,0 7,0 8,1c1,1 2,4 3,8c1,4 2.09964,8.06743 1,17c-1.00754,8.18443 -6,15 -9,21c-3,6 -4.56952,10.133 -6,14c-2.32739,6.29152 -3.0979,8.82443 -5,10c-0.85065,0.52573 -1.91754,-0.05664 -4,-3c-2.88785,-4.0817 -7.86548,-9.26365 -12,-15c-3.92236,-5.44198 -12.08847,-17.93415 -21,-30c-8.08066,-10.94089 -13.69594,-19.1594 -18,-27c-2.80591,-5.11145 -4.29289,-6.29289 -5,-7c-1.41422,-1.41422 -2.14774,-4.94341 -4,-10c-2.17538,-5.93866 -1,-13 -3,-13c-2,0 -1,7 -1,14c0,16 0.16263,32.0242 -2,46c-1.86035,12.02244 -3.87253,27.03259 -7,39c-2.88283,11.03128 -3.58578,17.58578 -5,19c-0.70711,0.70711 -2,-2 -2,-7c0,-7 2.98692,-15.75711 4,-22c0.96109,-5.92252 3.17293,-11.44966 6,-19c1.78799,-4.77525 2.41589,-6.76108 4,-10c1.38936,-2.84072 1,-4 2,-5c1,-1 2,-1 4,0c4,2 9.04735,5.93789 13,9c5.06187,3.92142 8.87766,6.066 10,8c1.80972,3.11848 1.5405,5.0535 2,7c0.51375,2.17625 1,3 1,4c0,1 -2,1 -4,1c-2,0 -5.132,-1.75532 -9,-4c-3.11848,-1.80972 -3,-4 -4,-4c-1,0 1.42215,4.19075 3,8c2.23141,5.3871 3.84723,9.04132 5,13c0.88414,3.03616 1,5 1,7c0,3 -1.69255,5.186 -3,7c-0.8269,1.14726 -2.48825,1.58672 -5,-1c-6.57204,-6.76817 -10.51442,-16.46185 -21,-27c-9.48933,-9.5369 -16.87856,-14.49346 -20,-15c-3.94835,-0.64073 -9,0 -16,0c-5,0 -9,0 -10,0c-1,0 -1,-1 0,-1c4,0 8.186,1.69255 10,3c2.29454,1.65381 1.85194,3.22836 3,6c0.5412,1.30656 1.4595,2.0535 1,4c-0.51375,2.17625 -3.87856,4.49346 -7,5c-4.93544,0.80091 -10,0 -13,0c-1,0 2.19801,0.63297 8,4c3.11848,1.80972 5,3 5,4c0,1 0.91948,2.48692 -1,5c-2.18855,2.86536 -8,4 -15,5c-7,1 -11,1 -13,1c-1,0 -1.1387,1.00966 -1,2c1.00977,7.20975 7.74022,14.24005 17,24c5.84019,6.15565 13.97252,9.64749 15,14c1.14876,4.86624 3.60582,11.14442 2,20c-1.52446,8.40691 -8.67679,19.18256 -15,30c-4.76083,8.14459 -8.38687,13.9176 -11,15c-0.92387,0.38269 -3,-2 -3,-9c0,-14 2,-24 6,-32c4,-8 8.25287,-17.83705 16,-24c7.38283,-5.87314 14.66708,-8.94373 22,-11c6.80844,-1.90919 15,-1 24,-1c12,0 24,0 34,0c9,0 16.87857,-0.49345 20,-1c0.98709,-0.16019 1.83981,0.01291 2,1c0.50653,3.12144 2.57974,8.8905 4,18c1.70151,10.91351 1,24 1,36c0,12 0.45557,26.1328 -5,44c-3.69391,12.09772 -7,23 -11,31c-2,4 -2.09789,6.82443 -4,8c-0.85065,0.52573 -1,2 -3,2c-3,0 -6.74066,-2.38458 -14,-7c-15.49161,-9.84937 -37.41005,-19.27457 -52,-28c-12.37761,-7.40234 -16.62532,-12.41362 -21,-16c-2.78833,-2.28587 -6.67261,-5.70848 -9,-12c-1.4305,-3.867 -2,-9 -2,-13c0,-1 -0.203,-3.2565 1,-4c2.68999,-1.66251 7.81602,-2.7007 18,-5c12.83,-2.89671 29,-3 44,-3c13,0 23.61731,1.92387 24,1c1.0824,-2.61313 -4.21005,-5.85075 -7,-10c-3.2536,-4.83881 -4.41156,-9.40401 -8,-14c-2.61098,-3.34407 -6.88152,-7.19028 -10,-9c-1.93399,-1.12234 -3,-2 -4,-3c0,0 0,5 0,10c0,10 0.56841,26.05223 -1,40c-1.46977,13.07057 -1.09271,23.03748 -2,34c-0.50171,6.06204 -1.29289,9.29291 -2,10c-0.70711,0.70709 -3.00388,0.76706 -10,1c-15.02496,0.50027 -32.53976,4.46872 -40,6c-0.97958,0.20108 -3,0 -4,0c-1,0 1,0 8,0c9,0 28,0 45,0c12,0 23,0 32,1l8,1l4,0l3,0";
    159.         var pathElement = document.createElementNS('http://www.w3.org/2000/svg', "path");
    160.         pathElement.setAttributeNS(null, 'd', path);
    161.         pathElement.style.setProperty("stroke", "black");
    163.         var STEP = 100;
    164.         var curStep = 0;
    166.         var $car = $('#car');
    168.         var timer = null;
    169.         var totalLength = pathElement.getTotalLength();
    170.         var initPosition = pathElement.getPointAtLength(0);
    171.         var prePosition = initPosition;
    172.         var curPosition = initPosition;
    175.         function getRotate(a, b) {
    176.             var k = (b.y - a.y) / (b.x - a.x);
    177.             var rotate = Math.atan(k) * 180 / Math.PI;
    178.             return k < 0 ? rotate + 90 : rotate - 90;
    179.         }
    181.         // 定位car
    182.         $car.css({
    183.             left: initPosition.x,
    184.             top: initPosition.y,
    185.             '-webkit-transform': 'translate(-2px, 0) rotate(' + getRotate(curPosition, pathElement.getPointAtLength(1)) + 'deg)'
    186.         }).show()
    188.         timer = setInterval(function () {
    190.             if (curStep != STEP) {
    191.                 curStep++;
    193.                 curPosition = pathElement.getPointAtLength(totalLength / STEP * curStep);
    196.                 $car.css({
    197.                     left: curPosition.x,
    198.                     top: curPosition.y,
    199.                     '-webkit-transform': 'translate(-2px, 0) rotate(' + getRotate(prePosition, curPosition) + 'deg)'
    200.                 }).show();
    201.                 prePosition = curPosition;
    202.             } else {
    203.                 clearInterval(timer);
    204.             }
    206.         }, 1000)
    208.     </script>
    209. </body>
    211. </html>