Below is an image of the car in png format.
I want to animate the movement of the car along some path. It is desirable that the wheels of the car rotate. I understand that for this you need to transfer the image to the svg format.
How to do it?
Using a vector editor or manually, using svg formulas, or something else, for example: applying css3 transformations
The movement of the bus on a given trajectory:
* { margin: 0; padding: 0; } line { stroke-width: 3px; stroke: #bf0208; } <svg width="550" height="149" viewBox="0 0 550 149" style="background-color: #000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blur-filter-light" x="-1" y="-1" width="10" height="10"> <feGaussianBlur in="SourceGraphic" stdDeviation="18" /> </filter> <g transform="scale(0.90) translate(0 -120)" id="myCar"> <rect x="50" y="40" width="210" height="35" fill="rgba(255, 0, 0, 0.3)" stroke-width="5" stroke="#bf0208" rx="3" /> <g> <rect x="50" y="70" width="210" height="35" fill="#bf0208" stroke-width="5" stroke="#bf0208" rx="3" /> <rect x="259" y="70" width="5" height="15" fill="yellow" rx="5" /> <polygon points="450,90 267,80 450,60" fill="yellow" filter="url(#blur-filter-light)" /> <text x="125" y="82" fill="white" font-size="1.2em" font-family="Monospace">Lorem Bus</text> </g> <g> <line x1="80" x2="80" y1="40" y2="70" /> <line x1="110" x2="110" y1="40" y2="70" /> <line x1="140" x2="140" y1="40" y2="70" /> <line x1="170" x2="170" y1="40" y2="70" /> <line x1="200" x2="200" y1="40" y2="70" /> <line x1="230" x2="230" y1="40" y2="70" /> </g> <g> <circle cx="75" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" /> <rect width="10" height="4" x="70" y="104" rx="3" fill="white" /> <animateTransform attributeName="transform" type="rotate" values="0 75 105;360 75 105" dur="1s" repeatCount="7" /> </g> <g> <circle cx="110" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" /> <rect width="10" height="4" x="105" y="104" rx="3" fill="white" /> <animateTransform attributeName="transform" type="rotate" values="0 110 105;360 110 105" dur="1s" repeatCount="7" /> </g> <g> <circle cx="225" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" /> <rect width="10" height="4" x="220" y="104" rx="3" fill="white" /> <animateTransform attributeName="transform" type="rotate" values="0 225 105;360 225 105" dur="1s" repeatCount="7" /> </g> </g> <path id="carPath" style="fill:none; stroke:white; stroke-width:1px;" d="m 0,147.8636 612.74654,0.53454" /> <animateMotion xlink:href="#myCar" begin="0.3s" dur="7s" repeatCount="none"> <mpath xlink:href="#carPath" /> </animateMotion> <svg width="550" height="149" viewBox="0 0 550 149" style="border: 1px solid; background-color: #000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blur-filter-light" x="-1" y="-1" width="10" height="10"> <feGaussianBlur in="SourceGraphic" stdDeviation="18" /> </filter> <g transform="scale(0.90) translate(0 -120)" id="myCar"> <rect x="50" y="40" width="210" height="35" fill="rgba(255, 0, 0, 0.3)" stroke-width="5" stroke="#bf0208" rx="3" /> <g> <rect x="50" y="70" width="210" height="35" fill="#bf0208" stroke-width="5" stroke="#bf0208" rx="3" /> <rect x="259" y="70" width="5" height="15" fill="yellow" rx="5" /> <polygon points="450,90 267,80 450,60" fill="yellow" filter="url(#blur-filter-light)" /> <text x="125" y="82" fill="white" font-size="1.2em" font-family="Monospace">Lorem Bus</text> </g> <g> <line x1="80" x2="80" y1="40" y2="70" /> <line x1="110" x2="110" y1="40" y2="70" /> <line x1="140" x2="140" y1="40" y2="70" /> <line x1="170" x2="170" y1="40" y2="70" /> <line x1="200" x2="200" y1="40" y2="70" /> <line x1="230" x2="230" y1="40" y2="70" /> </g> <g> <circle cx="75" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" /> <rect width="12" height="4" x="70" y="104" rx="3" fill="white" /> <animateTransform attributeName="transform" type="rotate" values="0 75 105;360 75 105" dur="1s" repeatCount="7" /> </g> <g> <circle cx="110" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" /> <rect width="12" height="4" x="105" y="104" rx="3" fill="white" /> <animateTransform attributeName="transform" type="rotate" values="0 110 105;360 110 105" dur="1s" repeatCount="7" /> </g> <g> <circle cx="225" cy="105" r="15" fill="gray" stroke="black" stroke-width="3" /> <rect width="12" height="4" x="220" y="104" rx="3" fill="white" /> <animateTransform attributeName="transform" type="rotate" values="0 225 105;360 225 105" dur="1s" repeatCount="7" /> </g> </g> <path id="carPath" style="fill:none; stroke:white; stroke-width:1px;" d="m 0,147.8636 612.74654,0.53454" /> <animateMotion xlink:href="#myCar" begin="0.3s" dur="7s" repeatCount="none"> <mpath xlink:href="#carPath" /> </animateMotion> </svg> 
First we need to draw a trajectory. To do this, open the car svg file in the vector editor
Draw a path
Save the file
Copy paths from Path file
To animate movement along a given path, use the command:
<animateMotion xlink:href="#car-dodger" begin="0s" dur="12s" rotate="auto" repeatCount="1" fill="freeze" > <mpath xlink:href="#carPath" /> </animateMotion> , where
#car-dodger" - unique car identifier
#carPath" - the identifier of the path the #carPath" is traveling on
Below is the full code:
<svg width="580" height="400" viewBox="0 0 580 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> </defs> <g id="car-dodger" transform="scale(0.25) translate(0 -180)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Tail Lights red --> <circle r="10px" fill="crimson" cx="15" cy="90" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> <g> <!-- Left line --> <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/> <!-- Right line --> <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/> </g> <g> <!-- Left bumper --> <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" /> <!-- Right bumper --> <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" /> </g> <!-- Left wheel --> <g stroke-dasharray="6.28 6.28"> <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="90" cy="140"/> <circle r="22px" fill="#5C5C5C" cx="90" cy="140"/> <polyline points="90,140 97.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" /> <animateTransform attributeName="transform" type="rotate" values="0 90 140;360 90 140" dur="2s" repeatCount="indefinite" /> </g> <!-- Right wheel --> <g stroke-dasharray="6.28 6.28"> <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="270" cy="140"/> <circle r="22px" fill="#5C5C5C" cx="270" cy="140"/> <polyline points="270,140 277.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" /> <animateTransform attributeName="transform" type="rotate" values="0 270 140;360 270 140" dur="2s" repeatCount="indefinite" /> </g> <g> <!-- Gold light --> <circle r="15px" fill="gold" cx="340" cy="90"/> </g> </g> <path id="carPath" style="fill:none;stroke:grey;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;" d="m 7.00611,78.668024 c 135.65342,-0.380598 152.27447,-3.422932 228.39919,-5.604887 28.49512,-0.816753 57.35177,-7.465997 85.47454,-2.802445 80.78801,13.39694 153.5049,57.123848 229.8004,86.875768 23.91885,9.32731 71.46232,28.72505 71.46232,28.72505" /> <animateMotion xlink:href="#car-dodger" begin="0s" dur="12s" rotate="auto" repeatCount="1" fill="freeze" > <mpath xlink:href="#carPath" /> </animateMotion> </svg> This is a training example. Step by step, the details of the car will be drawn and as you go, it will be easy to understand how the basic svg commands are: line , rect , circle , path
Car svg code was taken from the site of Yulia Buhvalova (Yulya Buhvalova)
<rect> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="car-dodger" transform="scale(1.0)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> </g> </svg> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="car-dodger" transform="scale(1.0)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> </g> </svg> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="car-dodger" transform="scale(1.0)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> <g> <!-- Left line --> <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/> <!-- Right line --> <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/> </g> </g> </svg> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="car-dodger" transform="scale(1.0)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> <g> <!-- Left line --> <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/> <!-- Right line --> <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/> </g> <g> <!-- Left bumper --> <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" /> <!-- Right bumper --> <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" /> </g> </g> </svg> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="car-dodger" transform="scale(1.1)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> <g> <!-- Left line --> <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/> <!-- Right line --> <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/> </g> <g> <!-- Left bumper --> <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" /> <!-- Right bumper --> <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" /> </g> <!-- Left wheel --> <g> <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="90" cy="140"/> <circle r="15px" fill="#555" cx="90" cy="140"/> </g> <!-- Right wheel --> <g> <circle r="40px" fill="#222" stroke="white" stroke-width="7" cx="270" cy="140"/> <circle r="15px" fill="#555" cx="270" cy="140"/> </g> </g> </svg> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="car-dodger" transform="scale(1.0)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Tail Lights red --> <circle r="10px" fill="crimson" cx="15" cy="90" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> <g> <!-- Left line --> <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/> <!-- Right line --> <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/> </g> <g> <!-- Left bumper --> <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" /> <!-- Right bumper --> <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" /> </g> <!-- Left wheel --> <g> <circle r="40px" fill="#222" stroke="white" stroke-width="7" cx="90" cy="140"/> <circle r="15px" fill="#555" cx="90" cy="140"/> </g> <!-- Right wheel --> <g> <circle r="40px" fill="#222" stroke="white" stroke-width="7" cx="270" cy="140"/> <circle r="15px" fill="#555" cx="270" cy="140"/> </g> <g> <!-- Gold light --> <circle r="15px" fill="gold" cx="340" cy="90"/> </g> </g> </svg> The car is ready. Of course, you can continue on - to decorate, add new parts, but in principle it is enough, because the animation will use the small size of the car and the details will not be particularly visible.
But the tires are bald, add a tread with a stroke-dasharray and add a wheel spin:
<animateTransform attributeName="transform" type="rotate" values="0 90 140;360 90 140" dur="2s" repeatCount="3" /> <svg width="580" height="200" viewBox="0 0 580 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <g id="car-dodger" transform="scale(1)"> <!-- Top --> <rect x="70" y="10" width="220" height="130" fill="transparent" rx="150" stroke="dodgerblue" stroke-width="10" /> <!-- Tail Lights red --> <circle r="10px" fill="crimson" cx="15" cy="90" /> <!-- Body --> <rect x="10" y="70" width="340" height="80" fill="dodgerblue" rx="30" /> <g> <!-- Left line --> <line x1="145" y1="10" x2="145" y2="80" stroke="dodgerblue" stroke-width="10"/> <!-- Right line --> <line x1="215" y1="10" x2="215" y2="80" stroke="dodgerblue" stroke-width="10"/> </g> <g> <!-- Left bumper --> <rect x="0" y="110" width="40" height="20" fill="#999" rx="10" /> <!-- Right bumper --> <rect x="325" y="110" width="40" height="20" fill="#999" rx="10" /> </g> <!-- Left wheel --> <g stroke-dasharray="6.28 6.28"> <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="90" cy="140"/> <circle r="22px" fill="#5C5C5C" cx="90" cy="140"/> <polyline points="90,140 97.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" /> <animateTransform attributeName="transform" type="rotate" values="0 90 140;360 90 140" dur="2s" repeatCount="3" /> </g> <!-- Right wheel --> <g stroke-dasharray="6.28 6.28"> <circle r="40px" fill="#222" stroke="white" stroke-width="4" cx="270" cy="140"/> <circle r="22px" fill="#5C5C5C" cx="270" cy="140"/> <polyline points="270,140 277.5 147.5" stroke="white" stroke-width="6" stroke-linecap="round" /> <animateTransform attributeName="transform" type="rotate" values="0 270 140;360 270 140" dur="2s" repeatCount="3" /> </g> <g> <!-- Gold light --> <circle r="15px" fill="gold" cx="340" cy="90"/> </g> </g> </svg> Css example
*, :before, :after { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .car { position: relative; height: 200px; overflow: hidden; border-bottom: 7px solid #ccc; } .car__inner { padding-bottom: 30px; -webkit-animation: goToCar 5s linear infinite; animation: goToCar 5s linear infinite; } @-webkit-keyframes goToCar { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } @keyframes goToCar { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } } .car__contour { height: 130px; width: 220px; margin: 25px auto -70px auto; border: 10px solid #1E90FF; -webkit-border-radius: 220px / 130px; border-radius: 220px / 130px; position: relative; } .car__contour:before { content: ''; position: absolute; top: 0; left: 50%; margin-left: -40px; height: 100%; width: 80px; border: 10px solid #1E90FF; border-top: none; } .car__body { width: 340px; height: 80px; background: #1E90FF; -webkit-border-radius: 30px; border-radius: 30px; margin: 0 auto; position: relative; } .car__headlight { position: absolute; top: 10px; left: -5px; background: #DC143C; width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%; z-index: -1; } .car__headlight--front { top: 5px; left: auto; right: -10px; background: #FFD700; width: 30px; height: 30px; z-index: 1; } .car__bumper { position: absolute; bottom: 20px; left: -5px; width: 40px; height: 20px; background: #999; -webkit-border-radius: 10px; border-radius: 10px; } .car__bumper--front { left: auto; right: -20px; } .car__wheel { position: absolute; bottom: -35px; left: 45px; width: 90px; height: 90px; background: #fff; -webkit-border-radius: 50%; border-radius: 50%; } .car__wheel:before { content: ''; position: absolute; top: 50%; left: 50%; width: 76px; height: 76px; background: #222; -webkit-border-radius: 50%; border-radius: 50%; z-index: 1; margin: -38px 0 0 -38px; -webkit-animation: rotateWheel 2s linear infinite; animation: rotateWheel 2s linear infinite; border: 2px dashed #fff; } @-webkit-keyframes rotateWheel { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateWheel { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .car__wheel:after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; background: #555; -webkit-border-radius: 50%; border-radius: 50%; z-index: 1; margin: -15px 0 0 -15px } .car__wheel--front { left: auto; right: 45px; } <div class="car"> <div class="car__inner"> <div class="car__contour"></div> <div class="car__body"> <div class="car__headlight"></div> <div class="car__headlight car__headlight--front"></div> <div class="car__bumper"></div> <div class="car__bumper car__bumper--front"></div> <div class="car__wheel"></div> <div class="car__wheel car__wheel--front"></div> </div> </div> </div> 
Source: https://ru.stackoverflow.com/questions/787246/
All Articles