<style> #g7201 { animation: wheel-left 2s linear infinite; transform-origin:center center; transform-box:fill-box; } @keyframes wheel-left{ from {transform:translateX(17px) translateY(9px) rotateZ(0deg) ;} to {transform:translateX(17px) translateY(9px) rotateZ(360deg) ;} } #g7231 { animation: wheel-right 2s linear infinite; transform-origin:center center; transform-box:fill-box; } @keyframes wheel-right{ from {transform:translateX(101px) translateY(9px) rotateZ(0deg) ;} to {transform:translateX(101px) translateY(9px) rotateZ(360deg) ;} } </style> <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 210 297" version="1.1" id="svg1576" inkscape:version="1.0 (4035a4fb49, 2020-05-01)" sodipodi:docname="drawing_bike2.svg"> <title id="title898">drawing bike_finished</title> <defs id="defs1570" /> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.5" inkscape:cx="473.08886" inkscape:cy="491.34568" inkscape:document-units="mm" inkscape:current-layer="layer1" inkscape:document-rotation="0" showgrid="false" inkscape:lockguides="true" inkscape:snap-object-midpoints="true" inkscape:window-width="1920" inkscape:window-height="1017" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" /> <metadata id="metadata1573"> <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>drawing bike_finished</dc:title> </cc:Work> </rdf:RDF> </metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <path id="path7134" style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.53776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 60.491036,69.777192 a 22.296072,22.29607 0 0 0 -22.29603,22.296033 22.296072,22.29607 0 0 0 22.29603,22.296025 22.296072,22.29607 0 0 0 22.29603,-22.296025 22.296072,22.29607 0 0 0 -22.29603,-22.296033 z m -0.0925,3.344658 a 18.951661,18.951659 0 0 1 0.0925,0 18.951661,18.951659 0 0 1 18.95183,18.951375 A 18.951661,18.951659 0 0 1 60.491036,111.02506 18.951661,18.951659 0 0 1 41.539202,92.073225 18.951661,18.951659 0 0 1 60.398526,73.12185 Z" /> <path id="path7154" style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.1561;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 34.89806,88.739584 A 25.809174,25.809174 0 0 1 60.491034,66.264053 25.809174,25.809174 0 0 1 86.112238,88.964014" /> <path d="m 144.73834,69.623077 a 22.296072,22.29607 0 0 0 -22.29603,22.296033 22.296072,22.29607 0 0 0 22.29603,22.29603 22.296072,22.29607 0 0 0 22.29603,-22.29603 22.296072,22.29607 0 0 0 -22.29603,-22.296033 z m -0.0925,3.344658 a 18.951661,18.951659 0 0 1 0.0925,0 18.951661,18.951659 0 0 1 18.95183,18.951375 18.951661,18.951659 0 0 1 -18.95183,18.95184 18.951661,18.951659 0 0 1 -18.95184,-18.95184 18.951661,18.951659 0 0 1 18.85933,-18.951375 z" style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.53776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path7146" /> <path id="path7159" style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.1561;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 118.92916,91.91911 A 25.809174,25.809174 0 0 1 144.73834,66.109937" /> <g id="g7201" transform="translate(16.928291,9.27467)" style="fill:#ffffff;fill-opacity:1"> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7164" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7166" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7168" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7170" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7172" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7174" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 43.827825,64.569224 -0.53016,36.458656" id="path7176" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 52.906975,67.144031 34.218515,98.453073" id="path7178" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 59.482346,73.913454 27.643144,91.68365" id="path7180" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 61.792073,83.063632 25.333417,82.533472" id="path7182" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 59.217266,92.142782 27.908224,73.454322" id="path7184" /> <path style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 52.447843,98.718153 34.677647,66.878951" id="path7186" /> <path id="path7162" d="M 52.447843,98.718153 34.677647,66.878951" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> </g> <path d="m 144.73834,69.623078 a 22.296072,22.29607 0 0 0 -22.29603,22.296034 22.296072,22.29607 0 0 0 22.29603,22.296028 22.296072,22.29607 0 0 0 22.29603,-22.296028 22.296072,22.29607 0 0 0 -22.29603,-22.296034 z m -0.0925,3.344658 a 18.951661,18.951659 0 0 1 0.0925,0 18.951661,18.951659 0 0 1 18.95183,18.951375 18.951661,18.951659 0 0 1 -18.95183,18.951839 18.951661,18.951659 0 0 1 -18.95183,-18.951838 18.951661,18.951659 0 0 1 18.85932,-18.951375 z" style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.53776;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path7203" /> <g transform="translate(101.1756,9.1205555)" id="g7231"> <path id="path7205" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7207" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7209" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7211" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7213" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7215" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7217" d="m 43.827825,64.569224 -0.53016,36.458656" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7219" d="M 52.906975,67.144031 34.218515,98.453073" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7221" d="M 59.482346,73.913454 27.643144,91.68365" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7223" d="M 61.792073,83.063632 25.333417,82.533472" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7225" d="M 59.217266,92.142782 27.908224,73.454322" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path7227" d="M 52.447843,98.718153 34.677647,66.878951" style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path style="fill:none;stroke:#000000;stroke-width:2.64583;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 52.447843,98.718153 34.677647,66.878951" id="path7229" /> </g> <path id="rect7241" style="opacity:0.993548;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="M 124.91871,64.930587 107.53047,92.073222 H 60.491034 l 21.916101,-34.2105 v 0 h 37.321175" /> <circle style="opacity:0.993548;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.7452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="path7235" cx="60.491035" cy="92.073219" r="3.2261367" /> <path sodipodi:nodetypes="cc" id="path7246" d="m 112.55118,48.089777 32.18716,43.82933" style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <circle r="3.2261367" cy="91.919106" cx="144.73836" id="circle7237" style="opacity:0.993548;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:0.7452;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path style="fill:none;stroke:#000000;stroke-width:1.852;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 75.133446,48.089777 32.187164,43.82933" id="path7244" sodipodi:nodetypes="cc" /> <path id="path868" d="m 66.462541,48.089777 c 17.34181,0 17.34181,0 17.34181,0" style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path id="path870" d="M 291.85833,165.7071 Z" style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> <path sodipodi:nodetypes="ccc" id="path874" d="m 112.55118,48.089777 c 22.15266,0 22.15266,1.087816 22.15266,1.087816 9.79151,1.877112 14.2621,4.380214 0,9.087162" style="fill:none;stroke:#000000;stroke-width:1.85208333;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" /> <g transform="matrix(1,0,0,-1,0,183.83821)" id="g890"> <path id="path886" d="m 107.32061,91.919106 c 0,13.536254 0,13.536254 0,13.536254" style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 106 92" to="0 106 92" dur="3s" repeatCount="indefinite"/></path> <path style="fill:none;stroke:#000000;stroke-width:1.41346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 111.26262,105.45536 c -7.88402,0 -7.88402,0 -7.88402,0" id="path888" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="360 106 92" to="0 106 92" dur="3s" repeatCount="indefinite"/></path> </g> <circle r="6.1013055" cy="92.073219" cx="106.99593" id="circle876" style="opacity:0.993548;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.40933;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <g id="g884"> <path style="fill:none;stroke:#000000;stroke-width:1.85208333;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" d="m 107.32061,91.919106 c 0,13.536254 0,13.536254 0,13.536254" id="path878" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 106 92" to="360 106 92" dur="3s" repeatCount="indefinite"/> </path> <path id="path880" d="m 111.26262,105.45536 c -7.88402,0 -7.88402,0 -7.88402,0" style="fill:none;stroke:#000000;stroke-width:1.41346;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" > <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 106 92" to="360 106 92" dur="3s" repeatCount="indefinite"/></path> </g> <path id="path892" d="m 21.733631,116.79464 c 77.863094,-0.37797 77.863094,-0.37797 77.863094,-0.37797" style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> <path style="fill:none;stroke:#000000;stroke-width:1.85208;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 130.59077,116.79464 c 77.8631,-0.37797 77.8631,-0.37797 77.8631,-0.37797" id="path894" /> <path id="path896" d="m 110.717,116.63424 c 11.7773,-0.0572 11.7773,-0.0572 11.7773,-0.0572" style="fill:none;stroke:#000000;stroke-width:1.85208333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /> </g> </svg>
반응형
'svg' 카테고리의 다른 글
svg clipPath basic examples (0) | 2023.09.03 |
---|---|
svg simple logo (0) | 2023.09.02 |
svg clipPath animation (0) | 2023.09.02 |
svg textPath animation (0) | 2023.09.01 |
svg animateTransform example (0) | 2023.09.01 |