<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SVG自行车</title>
<style>
g {
transform-box: fill-box;
}
g * {
transform-box: border-box;
}
#bikechain {
stroke-dasharray: 5 2;
stroke-dashoffset: 300;
animation: moveChain 4s linear infinite;
}
@keyframes moveChain {
to {
stroke-dashoffset: 0;
}
}
#crank {
transform-origin: 50% 50% 0;
}
#left-arm {
transform-origin: 50% 97% 0;
}
#right-arm {
transform-origin: 50% 0% 0;
}
#left-arm, #right-arm, #crank {
-webkit-animation: rotate 4s linear infinite;
-moz-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
#rear_wheel, #front_wheel {
transform-origin: center;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#bike {
display: flex;
}
#Layer_1 {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 600px;
}</style>
</head>
<body>
<div id="bike">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1125.6 650.76">
<defs>
<style>
.cls-1 {
fill: url(#linear-gradient);
}
.cls-2 {
fill: url(#linear-gradient-2);
}
.cls-11, .cls-23, .cls-25, .cls-3, .cls-39, .cls-5, .cls-7, .cls-8 {
fill: none;
}
.cls-3 {
stroke: #ddb18d;
stroke-width: 5px;
}
.cls-11, .cls-17, .cls-23, .cls-25, .cls-27, .cls-3, .cls-32, .cls-38, .cls-39, .cls-42, .cls-5, .cls-7, .cls-8 {
stroke-miterlimit: 10;
}
.cls-4 {
fill: url(#radial-gradient);
}
.cls-17, .cls-27, .cls-5, .cls-8 {
stroke: #000;
}
.cls-6 {
fill: url(#radial-gradient-2);
}
.cls-11, .cls-7 {
stroke-width: 18px;
}
.cls-7 {
stroke: url(#radial-gradient-3);
}
.cls-8 {
stroke-width: 12px;
}
.cls-9 {
fill: url(#radial-gradient-4);
}
.cls-10 {
fill: url(#radial-gradient-5);
}
.cls-11 {
stroke: url(#radial-gradient-6);
}
.cls-12 {
fill: url(#linear-gradient-3);
}
.cls-13 {
fill: url(#linear-gradient-4);
}
.cls-14 {
fill: url(#linear-gradient-5);
}
.cls-15 {
fill: url(#linear-gradient-6);
}
.cls-16 {
fill: url(#linear-gradient-7);
}
.cls-17 {
fill: #999;
stroke-width: 0.5px;
}
.cls-18 {
fill: url(#linear-gradient-8);
}
.cls-19 {
fill: url(#linear-gradient-9);
}
.cls-20 {
fill: url(#linear-gradient-10);
}
.cls-21 {
fill: url(#linear-gradient-11);
}
.cls-22 {
fill: url(#linear-gradient-12);
}
.cls-23 {
stroke-width: 20px;
stroke: url(#linear-gradient-13);
}
.cls-24 {
fill: url(#linear-gradient-14);
}
.cls-25 {
stroke: #4d4d4d;
}
.cls-25, .cls-27, .cls-32 {
stroke-width: 0.25px;
}
.cls-26 {
fill: url(#linear-gradient-15);
}
.cls-27 {
fill: url(#linear-gradient-16);
}
.cls-28 {
fill: url(#linear-gradient-17);
}
.cls-29 {
fill: url(#linear-gradient-18);
}
.cls-30 {
fill: url(#linear-gradient-19);
}
.cls-31 {
fill: url(#radial-gradient-7);
}
.cls-32, .cls-39 {
stroke: #333;
}
.cls-32 {
fill: url(#linear-gradient-20);
}
.cls-33 {
fill: url(#linear-gradient-21);
}
.cls-34 {
fill: url(#linear-gradient-22);
}
.cls-35 {
fill: url(#radial-gradient-8);
}
.cls-36 {
fill: #232121;
}
.cls-37 {
fill: url(#radial-gradient-9);
}
.cls-38 {
fill: #666;
stroke: #1a1a1a;
}
.cls-39 {
stroke-width: 4px;
}
.cls-40 {
fill: url(#linear-gradient-23);
}
.cls-41 {
fill: url(#linear-gradient-24);
}
.cls-42 {
fill: url(#radial-gradient-10);
stroke: url(#radial-gradient-11);
}
</style>
<linearGradient id="linear-gradient" x1="2269.23" y1="148.43" x2="2286.23" y2="148.43" gradientTransform="matrix(-1, 0, 0, 1, 2782.43, 252.03)" gradientUnits="userSpaceOnUse">
<stop offset="0.02" stop-color="#434343"/>
<stop offset="0.04" stop-color="#454545"/>
<stop offset="0.51" stop-color="#7c7c7c"/>
<stop offset="0.6" stop-color="#6d6d6d"/>
<stop offset="0.86" stop-color="#454545"/>
<stop offset="1" stop-color="#363636"/>
</linearGradient>
<linearGradient id="linear-gradient-2" x1="2259.85" y1="95.53" x2="2295.72" y2="95.53" gradientTransform="matrix(-1, 0, 0, 1, 2811.43, 385.97)" gradientUnits="userSpaceOnUse">
<stop offset="0.02" stop-color="#222"/>
<stop offset="0.11" stop-color="#262626"/>
<stop offset="0.2" stop-color="#333"/>
<stop offset="0.29" stop-color="#484848"/>
<stop offset="0.39" stop-color="#666"/>
<stop offset="0.49" stop-color="#8c8c8c"/>
<stop offset="0.51" stop-color="#969696"/>
<stop offset="0.57" stop-color="#838383"/>
<stop offset="0.69" stop-color="#606060"/>
<stop offset="0.81" stop-color="#474747"/>
<stop offset="0.91" stop-color="#373737"/>
<stop offset="1" stop-color="#323232"/>
</linearGradient>
<radialGradient id="radial-gradient" cx="261.5" cy="544.9" r="24.43" gradientTransform="translate(0 8)" gradientUnits="userSpaceOnUse">
<stop offset="0.25" stop-color="gray"/>
<stop offset="0.26" stop-color="#838383"/>
<stop offset="0.43" stop-color="#ababab"/>
<stop offset="0.57" stop-color="#c3c3c3"/>
<stop offset="0.65" stop-color="#ccc"/>
<stop offset="0.73" stop-color="#c9c9c9"/>
<stop offset="0.79" stop-color="#bfbfbf"/>
<stop offset="0.84" stop-color="#aeaeae"/>
<stop offset="0.9" stop-color="#979797"/>
<stop offset="0.94" stop-color="#797979"/>
<stop offset="0.99" stop-color="#545454"/>
<stop offset="1" stop-color="#4d4d4d"/>
</radialGradient>
<radialGradient id="radial-gradient-2" cx="261.55" cy="552.46" r="33.24" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#969696"/>
<stop offset="0.12" stop-color="#8e8e8e"/>
<stop offset="0.31" stop-color="#777"/>
<stop offset="0.54" stop-color="#515151"/>
<stop offset="0.71" stop-color="#323232"/>
</radialGradient>
<radialGradient id="radial-gradient-3" cx="260.9" cy="544.9" r="215.1" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient"/>
<radialGradient id="radial-gradient-4" cx="922.9" cy="544.6" r="15.47" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient"/>
<radialGradient id="radial-gradient-5" cx="922.9" cy="544.6" r="24.43" xlink:href="#radial-gradient"/>
<radialGradient id="radial-gradient-6" cx="922.9" cy="544.6" r="215.1" gradientTransform="translate(-29 -125.94)" xlink:href="#radial-gradient"/>
<linearGradient
