太空人表盘-SVG制作
最近太空人表盘刷爆社交网络，正好最近看到一篇关于SVG的文章，借此机会练练手。
👀 预览
🖥 开发工具
vsCode+vsCode插件（SVG）
📝 实现表盘样式
-
表盘布局设计：
- 表盘圆环
- 布局画线
- 天气模块
- 时间模块
- 运动模块
- 健康模块
-
预览效果：
-
代码如下：
<svg width="1024" height="1024" xmlns="http://www.w3.org/2000/svg" class="icon">
<g>
<title>Human</title>
<!-- 背景 -->
<path id="svg_1" fill="#dfe6f0" d="m63.499993,514.18182a448,448 0 1 0 896,0a448,448 0 1 0 -896,0z"/>
<!-- 上半部分横线 -->
<line id="svg_2" stroke-width="5" stroke="black" y2="250" x2="880" y1="250" x1="140"/>
<!-- 上半部分竖线 -->
<line id="svg_3" stroke-width="5" stroke="black" y2="250" x2="430" y1="70" x1="430"/>
<!-- 下半部分第一根横线 -->
<line id="svg_4" stroke-width="5" stroke="black" y2="774" x2="880" y1="774" x1="140"/>
<!-- 下半部分第二根横线 -->
<line id="svg_5" stroke-width="5" stroke="black" y2="860" x2="640" y1="860" x1="380"/>
<!-- 下半部分第二根竖线 -->
<line id="svg_6" stroke-width="5" stroke="black" y2="862" x2="640" y1="774" x1="640"/>
<!-- 下半部分第一根竖线 -->
<line id="svg_7" stroke-width="5" stroke="black" y2="940" x2="380" y1="858" x1="380"/>
<!-- 表环 -->
<path id="svg_8" fill="#444444" d="m512,950.85714c241.37143,0 438.85714,-197.48571 438.85714,-438.85714s-197.48571,-438.85714 -438.85714,-438.85714s-438.85714,197.48571 -438.85714,438.85714s197.48571,438.85714 438.85714,438.85714zm0,73.14286c-285.25714,0 -512,-226.74286 -512,-512s226.74286,-512 512,-512s512,226.74286 512,512s-226.74286,512 -512,512z"/>
<defs>
<style type="text/css"/>
</defs>
/* 小火箭 */
<g stroke="null" id="svg_14">
<path stroke="null" id="svg_12" fill="#000000" d="m347.762225,123.968403c0.184241,6.388593 1.535339,12.52542 3.776935,18.473421c2.671491,7.112424 6.632668,13.375134 12.129184,18.567834a-1.566047,1.605016 0 0 0 0.522015,1.479132c-0.184241,1.919726 -0.337774,3.83945 -0.522015,5.759176c-0.460602,4.468869 1.074738,8.119493 4.606019,10.700107c3.776936,2.76944 7.676699,5.350054 11.576462,7.962139a-3.638755,3.729302 0 0 1 5.742171,-2.832381c0.307068,-3.430329 0.583429,-6.860657 0.798376,-10.290986c0.092121,-1.7309 0.061414,-1.7309 1.688874,-1.951196c4.298951,-0.597947 7.676699,-2.675026 9.979709,-6.483006a-14.4629,14.822796 0 0 1 1.995941,-6.388593c0.061414,-0.69236 0.337775,-0.849715 0.951911,-0.881185c3.469868,-0.188826 6.970443,-0.409122 10.44031,-0.69236c2.886438,-0.220296 4.360365,-3.335916 2.794318,-5.948001c-1.074738,-1.825313 -2.241596,-3.619154 -3.377748,-5.444467c-1.197565,-1.951196 -2.425837,-3.902392 -3.623401,-5.853588c-2.21089,-3.556212 -5.435103,-5.475938 -9.519106,-5.53888c-2.333717,0 -4.69814,0.409122 -7.031856,0.660889c-0.460602,0.031471 -0.76767,0 -1.074738,-0.377651c-5.435103,-6.231239 -12.190598,-10.44834 -19.83659,-13.280721c-4.329658,-1.605016 -8.751436,-2.643556 -13.296042,-3.11562c-2.303009,-0.251767 -4.60602,-0.314709 -6.909029,0.094413c-1.258978,0.251767 -1.320392,0.283238 -1.504632,1.542074c-0.184241,1.290307 -0.368482,2.549143 -0.307068,3.83945zm13.142508,15.735452c-0.061414,-4.217101 3.347041,-7.836255 7.400337,-7.899197c4.206831,-0.062942 7.830233,3.052678 7.95306,7.962138c0.092121,4.059747 -3.531281,7.773314 -7.553871,7.804784c-4.268244,0.031471 -7.738112,-3.461799 -7.799526,-7.867726z"/>
<path stroke="null" id="svg_13" fill="#000000" d="m406.105134,163.747626c-1.044031,0 -1.596753,0.472064 -1.965235,1.542074c-1.443219,4.217102 -4.084004,7.427134 -7.891646,9.630097c-0.85979,0.472063 -1.71958,0.881186 -2.640784,1.195894c-1.658166,0.566476 -2.026648,2.234434 -0.798376,3.49327c1.811701,1.888254 3.654108,3.745037 5.46581,5.601821c0.614136,0.629418 1.258978,0.912656 2.088062,0.597947c0.85979,-0.314709 1.258978,-0.975598 1.320392,-1.888254c0.030707,-0.566476 0,-1.164423 0.030707,-1.7309c0.030707,-1.070011 0.030707,-1.070011 0.982618,-0.755302l6.110652,2.07708c0.614136,0.220296 1.197565,0.283238 1.780994,-0.062942c0.85979,-0.503535 1.197565,-1.38472 0.829083,-2.486201c-0.675549,-2.140022 -1.381805,-4.280043 -2.088062,-6.420065c-0.307068,-0.912656 -0.276361,-0.944128 0.706257,-0.975598c0.583429,0 1.166858,0 1.780994,-0.031471c0.798376,0 1.535339,-0.503535 1.780994,-1.290307c0.307068,-0.818244 0.122828,-1.510604 -0.460602,-2.108551c-1.903821,-1.951196 -3.807642,-3.902392 -5.680757,-5.853588a-1.873115,1.919726 0 0 1 -1.3511,-0.535006z"/>
</g>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_15" y="211.395539" x="263" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">21%</text>
<text transform="matrix(1.2948342177212435,0,0,1.3332130651474745,-138.27142061027277,-41.04880516566502) " stroke="null" xml:space="preserve" text-anchor="start" font-family="Junction, sans-serif" font-size="24" id="svg_16" y="126.996859" x="465.532257" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">空气良</text>
<text transform="matrix(1.4865108220925503,0,0,1.3332130651474743,-226.26098624292973,-39.71547179259525) " stroke="null" xml:space="preserve" text-anchor="start" font-family="Junction, sans-serif" font-size="24" id="svg_19" y="163.000108" x="464.51661" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">晴天</text>
<text stroke="null" transform="matrix(1.4865108220925503,0,0,1.3332130651474743,-226.26098624292973,-39.71547179259525) " xml:space="preserve" text-anchor="start" font-family="Oswald, sans-serif" font-size="24" id="svg_21" y="200.003447" x="465.269762" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">15°C</text>
<text stroke="null" transform="matrix(1.4865108220925503,0,0,1.3332130651474743,-226.26098624292973,-39.71547179259525) " xml:space="preserve" text-anchor="start" font-family="'League Gothic', sans-serif" font-size="24" id="svg_22" y="163.00011" x="540" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">18°</text>
<text stroke="null" transform="matrix(1.4865108220925503,0,0,1.3332130651474743,-226.26098624292973,-39.71547179259525) " xml:space="preserve" text-anchor="start" font-family="'League Gothic', sans-serif" font-size="24" id="svg_23" y="201.003539" x="540" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">7°</text>
<defs>
<style type="text/css"/>
</defs>
/* 下三角形 */
<g stroke="null" id="svg_28">
<path stroke="#000000" id="svg_27" fill="#000000" d="m661.66546,209.135799l0.500002,-0.800002l-22.500086,0l1.250005,2.000005l9.125035,14.600038l0.875003,1.400004l0.875003,-1.400004l9.875038,-15.800041zm-2.50001,1.200003l-8.250031,13.200035l-8.250031,-13.200035l16.500063,0z"/>
</g>
/* 上三角形 */
<g transform="rotate(180 650.9154663085938,165.6694641113281) " stroke="null" id="svg_30">
<path stroke="#000000" id="svg_29" fill="#000000" d="m661.66546,157.46957l0.500002,-0.800002l-22.500085,0l1.250004,2.000005l9.125035,14.600038l0.875003,1.400004l0.875004,-1.400004l9.875037,-15.800041zm-2.500009,1.200003l-8.250032,13.200034l-8.250031,-13.200034l16.500063,0z"/>
</g>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="'Helvetica', Arial, sans-serif" font-size="60" id="svg_75" y="310" x="240" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">13:14</text>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="'Helvetica', Arial, sans-serif" font-size="30" id="svg_75" y="310" x="400" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">21</text>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="'Helvetica', Arial, sans-serif" font-size="18" id="svg_75" y="350" x="370" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">二月十二</text>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="'Helvetica', Arial, sans-serif" font-size="18" id="svg_75" y="380" x="370" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">周三 3-24</text>
/* 太空人 */
<image width="200" height="200" x=400 y=500 stroke="black" href="https://blog-static.cnblogs.com/files/zhlii/human.gif"></image>
<defs>
<style type="text/css"/>
</defs>
/* 太阳 */
<g stroke="null" id="svg_48">
<path stroke="null" id="svg_39" fill="#000000" d="m720.268248,193.650137m-20.448711,0a20.448711,20.448711 0 1 0 40.897422,0a20.448711,20.448711 0 1 0 -40.897422,0z"/>
<path stroke="null" id="svg_40" fill="#000000" d="m718.402206,159.439366m2.591725,0l0,0q2.591725,0 2.591725,2.591725l0,4.89836q0,2.591725 -2.591725,2.591725l0,0q-2.591725,0 -2.591725,-2.591725l0,-4.89836q0,-2.591725 2.591725,-2.591725z"/>
<path stroke="null" id="svg_41" fill="#000000" d="m742.732057,167.767038m1.861186,1.803615l0,0q1.861186,1.803615 0.057571,3.664801l-3.408832,3.517641q-1.803615,1.861186 -3.664801,0.057571l0,0q-1.861186,-1.803615 -0.057571,-3.664801l3.408832,-3.517641q1.803615,-1.861186 3.664801,-0.057571z"/>
<path stroke="null" id="svg_42" fill="#000000" d="m754.416573,190.704757m0.080956,2.59046l0,0q0.080956,2.59046 -2.509504,2.671416l-4.89597,0.153007q-2.59046,0.080956 -2.671416,-2.509504l0,0q-0.080956,-2.59046 2.509504,-2.671416l4.89597,-0.153007q2.59046,-0.080956 2.671416,2.509504z"/>
<path stroke="null" id="svg_43" fill="#000000" d="m746.827724,215.255745m-1.744598,1.916616l0,0q-1.744598,1.916616 -3.661214,0.172018l-3.622404,-3.29729q-1.916616,-1.744598 -0.172018,-3.661214l0,0q1.744598,-1.916616 3.661214,-0.172018l3.622404,3.29729q1.916616,1.744598 0.172018,3.661214z"/>
<path stroke="null" id="svg_44" fill="#000000" d="m724.326562,227.666695m-2.586639,0.162284l0,0q-2.586639,0.162284 -2.748924,-2.424355l-0.306717,-4.888748q-0.162284,-2.586639 2.424355,-2.748924l0,0q2.586639,-0.162284 2.748924,2.424355l0.306717,4.888748q0.162284,2.586639 -2.424355,2.748924z"/>
<path stroke="null" id="svg_45" fill="#000000" d="m699.491263,220.868566m-1.970469,-1.683535l0,0q-1.970469,-1.683535 -0.286935,-3.654004l3.181881,-3.724187q1.683535,-1.970469 3.654004,-0.286935l0,0q1.970469,1.683535 0.286935,3.654004l-3.181881,3.724187q-1.683535,1.970469 -3.654004,0.286935z"/>
<path stroke="null" id="svg_46" fill="#000000" d="m686.427061,198.73966m-0.243002,-2.580308l0,0q-0.243002,-2.580308 2.337306,-2.82331l4.876782,-0.459274q2.580308,-0.243002 2.82331,2.337306l0,0q0.243002,2.580308 -2.337306,2.82331l-4.876782,0.459274q-2.580308,0.243002 -2.82331,-2.337306z"/>
<path stroke="null" id="svg_47" fill="#000000" d="m692.423414,173.707046m1.621163,-2.022095l0,0q1.621163,-2.022095 3.643258,-0.400932l3.82176,3.063998q2.022095,1.621163 0.400932,3.643258l0,0q-1.621163,2.022095 -3.643258,0.400932l-3.82176,-3.063998q-2.022095,-1.621163 -0.400932,-3.643258z"/>
</g>
<defs>
<style type="text/css"/>
</defs>
<g stroke="null" id="svg_53">
<path stroke="null" id="svg_52" d="m221.305074,700.061466c-6.114532,0 -11.428702,3.864579 -14.12404,9.538815c-2.695338,-5.674236 -8.009508,-9.538815 -14.12404,-9.538815c-8.839295,0 -16.007245,8.073854 -16.007245,18.030282c0,0.715908 0.029425,1.418559 0.088275,2.12121c0.123585,1.438445 0.364871,2.857004 0.717972,4.242419c4.790404,19.064372 29.325038,32.87875 29.325038,32.87875s24.534635,-13.814378 29.325038,-32.87875c0.347216,-1.385415 0.594387,-2.803974 0.717972,-4.242419c0.05885,-0.702651 0.088275,-1.41193 0.088275,-2.12121c0,-9.956428 -7.16795,-18.030282 -16.007245,-18.030282zm9.869173,24.393911l-7.891807,0l-7.738797,13.688431l-4.796289,-9.724421l-9.798553,15.451687l-7.368041,-23.85698l-2.253961,4.441283l-8.138978,0c-0.853327,0 -1.59484,-0.64962 -1.8067,-1.57765c-0.005885,-0.013258 -0.005885,-0.026515 -0.01177,-0.039773c-0.306021,-1.325756 0.588502,-2.618368 1.8067,-2.618368l5.961522,0l5.27886,-10.407185l7.697602,24.924214l9.033501,-14.245249l4.619738,9.366466l5.44364,-9.644875l9.975103,0c1.218198,0 2.112721,1.292612 1.8067,2.618368c-0.005885,0.013258 -0.005885,0.026515 -0.01177,0.039773c-0.211861,0.934658 -0.953373,1.584278 -1.8067,1.584278z"/>
</g>
<text stroke="null" transform="matrix(1.634850922826632,0,0,1.7660549036073723,-115.21762819937389,-480.97612930064446) " font-weight="normal" xml:space="preserve" text-anchor="start" font-family="Oswald, sans-serif" font-size="24" id="svg_54" y="660" x="160" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">75-130</text>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="'Helvetica', Arial, sans-serif" font-size="18" id="svg_55" y="442" x="268" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">95</text>
<defs>
<style type="text/css"/>
</defs>
<defs>
<style type="text/css"/>
</defs>
/* 鞋子 */
<g stroke="null" id="svg_74">
<path stroke="null" id="svg_73" fill="#2c2c2c" d="m692.158279,742.023076l-10.568392,-21.90502a3.417272,4.509184 0 0 0 -4.484086,-1.556469a2.892539,3.816784 0 0 0 -1.066813,5.447643l8.872765,18.013846l-11.813007,0l-7.172802,-14.134117a3.495332,4.612185 0 0 0 -4.540462,-1.510691a2.901212,3.828228 0 0 0 -1.075487,5.459088l4.978463,10.18572l-22.338032,0c-3.000955,0 -5.43381,-3.210218 -5.43381,-7.17006c0,0 0,-7.822404 7.805952,-12.383088c7.805952,-4.560685 36.2413,-21.504458 37.355817,-21.504458c0.559427,-0.652344 5.576919,-2.609375 8.365378,2.609375c2.78846,5.207306 6.132009,7.816682 11.149501,7.816681c1.300992,0 2.771113,-0.457785 4.423373,-1.361911a6.470267,8.537693 0 0 1 8.959498,7.879627l0,12.388811a8.885775,11.725022 0 0 1 -8.885775,11.725022l-14.527744,0l-0.004337,0zm20.772505,3.490612l-72.764482,0a2.649687,3.496334 0 1 0 0,6.99839l72.760145,0a2.649687,3.496334 0 1 0 0,-6.992668l0.004337,-0.005722z"/>
</g>
<text stroke="null" transform="matrix(3.7239038944244385,0,0,2.2058207988739014,-749.9673519320786,-231.30630335211754) " xml:space="preserve" text-anchor="start" font-family="'Helvetica', Arial, sans-serif" font-size="18" id="svg_75" y="442" x="395" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">2727</text>
<text stroke="null" transform="matrix(2.4970326925934194,0,0,2.4970326925934194,-484.85180817358344,-1218.0713407564097) " xml:space="preserve" text-anchor="start" font-family="Junction, sans-serif" font-size="20" id="svg_76" y="822" x="292.289798" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">睡眠</text>
<text stroke="null" transform="matrix(2.4970326925934194,0,0,2.4970326925934194,-484.85180817358344,-1218.0713407564097) " xml:space="preserve" text-anchor="start" font-family="Junction, sans-serif" font-size="20" id="svg_77" y="822" x="460.838749" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">运动</text>
<text transform="matrix(2.4970326925934194,0,0,2.4970326925934194,-484.85180817358344,-1218.0713407564097) " font-weight="bold" stroke="null" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_78" y="821.618948" x="349.35563" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">10h30m</text>
<text transform="matrix(2.4970326925934194,0,0,2.4970326925934194,-484.85180817358344,-1218.0713407564097) " font-weight="bold" stroke="null" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_79" y="855.398387" x="366.767712" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#000000">5.21km</text>
</g>
</svg>
🔧 时间模块数字文字改为电子表形式
- 数字0-9
<!-- 数字系列组件 -->
<defs>
<g id="number0">
<path d="M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 336v-308L364.9 580v254.6L311.2 888l-53.7-53.4z m70.6-715.5l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-468.6V190.3l53.7-53.5 53.7 53.5v308.6l-107.4-62.2z m0 397.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z" p-id="2530"></path>
</g>
<g id="number1">
<path id="svg_1" d="m256.5,61.2zm0,28l0,744.4l0,-744.4zm70.6,-407.5l54.8,-54.9l260.1,0l55.1,54.9l-55.1,52.4l-260.2,0l-54.7,-52.4zm0,786.2l0,0m332.2,-468.6l0,190l53.7,-53.5l53.7,53.5l0,308.6l-107.4,-62.2l0,-436.4zm0,397.8l0,181.3l107.3,-53.5l0,308.6l-53.6,53.5l-53.7,-53.5l0,-436.4z"/>
</g>
<g id="number2">
<path d="M257.7 171.6L383 64.2h260.1l54.8 54.9-54.8 52.4H257.7z m0 662.8V525.8L365 579.4v255.1L311.3 888l-53.6-53.6z m24.5-323.2l100.8-58h260.1l101.2 58-101.2 49.4H383l-100.8-49.4z m46 394.1l54.8-52.4h282.5l102.4 107.3H383l-54.8-54.9z m332.3-469V190l53.7-53.5 53.7 53.5v308.6l-107.4-62.3z" p-id="1226"></path>
</g>
<g id="number3">
<path d="M268.5 64.2h363.1l54.8 54.9-54.8 52.4H371.5l-103-107.3z m0 896l103-107.3h260.1l54.8 52.4-54.8 54.9H268.5z m2.2-448l100.8-59h260.1l101.1 58-101.1 49.4H371.5l-100.8-48.4zM649 436.3V190l53.7-53.5 53.7 53.5v308.6L649 436.3z m0 398.1v-255l107.3-53.5v308.6L702.6 888 649 834.4z" p-id="1389"></path>
</g>
<g id="number4">
<path d="M257.7 498.6V64.2l107.3 107v265.1l-107.3 62.3z m24.5 13.6l100.7-59h259.9l101.1 58-101.1 49.3H382.9l-100.7-48.3z m378-75.8V171.5l107.3-107v434l-107.3-62.1z m0 416.9V579.7l107.3-53.5v434L660.2 853.3z" p-id="1552"></path>
</g>
<g id="number5">
<path d="M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 461.6l102.9-107.3h282.5l54.8 52.4-54.8 54.9H257.5z m24.5-449l100.8-58h260.1l101.2 58-101.2 49.4H382.8L282 511.2z m46.1-392.1l54.8-54.9h362.5L642.9 171.6H382.8l-54.7-52.5z m332.2 715.3v-255l107.3-53.5v308.6L714 887.9l-53.7-53.5z" p-id="1715"></path>
</g>
<g id="number6">
<path d="M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 335.8V525.8l107.3 53.5v255.1l-53.7 53.5-53.6-53.5zM282 512.2l100.8-59h260.1l101.2 58-101.2 49.4H382.8L282 512.2z m46.1-393.1l54.8-54.9h362.5L642.9 171.6H382.8l-54.7-52.5z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-70.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z" p-id="1878"></path>
</g>
<g id="number7">
<path d="M265.7 63.9h476.1L632.4 171.2H372.6L265.7 63.9zM651.6 436V189.6L759 81.3v416.9L651.6 436z m0 417.2V579.4L759 525.9v434.3l-107.4-107z" p-id="2041"></path>
</g>
<g id="number8">
<path d="M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 336v-308L364.9 580v254.6L311.2 888l-53.7-53.4z m24.5-322l100.8-59.3h260.1l101.2 58-101.2 49.4H382.8L282 512.6z m46.1-393.5l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-468.6V190.3l53.7-53.5 53.7 53.5v308.6l-107.4-62.2z m0 397.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z" p-id="2204"></path>
</g>
<g id="number9">
<path d="M257.5 498.6V190l53.7-53.5 53.7 53.5v255l-107.4 53.6z m22.4 461.6l102.9-107.3h260.1l54.8 52.4-54.8 54.9h-363z m2.1-448l100.8-59h260.1l101.2 58-101.2 49.4H382.8L282 512.2z m46.1-393.1l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4zM660.3 445V190l53.7-53.5 53.7 53.5v308.6L660.3 445z m0 389.4V588.1l107.3-62.2v308.6L714 887.9l-53.7-53.5z"
p-id="2367"></path>
</g>
<g id="dot">
<rect width="300" height="100" style="fill:black;"/>
</g>
</defs>
- 点号及上述数字系列引用
/* 时间模块 */
<use xlink:href="#number2" x="500" y="1500" transform="scale(0.2)" />
<use xlink:href="#number3" x="1200" y="1500" transform="scale(0.2)" />
<rect width="30" height="30" x="420" y="350" style="fill:black;"/>
<rect width="30" height="30" x="420" y="430" style="fill:black;"/>
<use xlink:href="#number4" x="2100" y="1500" transform="scale(0.2)" />
<use xlink:href="#number8" x="2800" y="1500" transform="scale(0.2)" />
<use xlink:href="#number5" x="7300" y="4000" transform="scale(0.1)" />
<use xlink:href="#number6" x="8000" y="4000" transform="scale(0.1)" />
- 预览
⏰ 动态加载时间
🌤 动态加载天气
📜 常见问题
- 📍 如何引入图片
<image width="200" height="200" x=400 y=500 stroke="black" href="https://blog-static.cnblogs.com/files/zhlii/human.gif"></image>
- 📍 如何注册并加载组件
/** 注册 */
<defs>
<g id="number0">
<path d="M257.5 498.6V190l53.7-53.5 53.7 53.5v246.4l-107.4 62.2z m0 336v-308L364.9 580v254.6L311.2 888l-53.7-53.4z m70.6-715.5l54.8-54.9H643l55.1 54.9-55.1 52.4H382.8l-54.7-52.4z m0 786.2l54.8-52.4H643l55.1 52.4-55.1 54.9H382.8l-54.7-54.9z m332.2-468.6V190.3l53.7-53.5 53.7 53.5v308.6l-107.4-62.2z m0 397.8V579.4l107.3-53.5v308.6L714 888l-53.7-53.5z" p-id="2530"></path>
</g>
</defs>
/** 调用 */
<use xlink:href="#number0" x="500" y="1500" transform="scale(0.2)" />
- 📍 如何进行调用缩放
举例，SVG 视区为 800 x 600 像素，视区的中心位于 (400, 300)。
要将 parentGraphic 缩小 10%（即比例因子为 0.9），可以使用（在伪代码中）：transform="translate( -400(0.9-1), -300(0.9-1) ) scale(0.9)"
简化为下面的非伪代码：transform="translate(40, 30) scale(0.9)"
然后，应用于 use 元素来获得所需效果：<use href="#parentGraphic" transform="translate(40, 30) scale(0.9)"/>
- 📍 Namespace prefix xlink for href on use is not defined
加入以下：
xmlns:xlink="http://www.w3.org/1999/xlink
例如：
<svg width="1024" height="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon">
