我正在制作SVG动画，并且我试图在打印机前面添加一个红圈和一个绿圈。
当您检查我的代码时，您可以看到＃red-light和＃green-light显示在DOM中，但它不可见。
有人知道为什么他们都没有表现出可见性吗？
https://codepen.io/stinkytofu3311/pen/VbYjNK
<div class="svg-wrapper">
<div class="svg-container">
<svg viewBox="0 0 356 356" style="border:solid 0px black" preserveAspectRatio="xMinYMin meet" class="svg-content">
<defs>
<path d="M3.26 0.75C2 0.75 0.98 1.78 0.98 3.04L0.98 5.32 114.7 5.32 114.7 3.04C114.7 1.77 113.68 0.75 112.42 0.75L3.26 0.75Z" id="path-1"/>
<path d="M65.84 0.05L0.53 0.05C0.53 0.05 29.77 15.29 65.84 15.29 101.91 15.29 131.76 0.05 131.76 0.05L65.84 0.05Z" id="path-3"/>
</defs>
<!-- Background Circle -->
<g id="background">
<g id="bg-circle" transform="translate(-47.000000, -145.000000)">
<path class="bg-circle-color" d="M225,500.6c98.3,0,178-79.4,178-177.3S323.2,146,225,146S47,225.4,47,323.3S126.7,500.6,225,500.6z"/>
</g>
</g>
<!-- Printer Front-Bottom -->
<g id="front-bottom" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 222.000000)">
<path d="M203.21 1.36C203.21 1.36 203.21 7.23 203.21 7.23 203.21 10.57 200.49 13.27 197.17 13.27L6.45 13.27C3.11 13.27 0.41 10.57 0.41 7.22L0.41 1.3C0.41 0.58 203.21 3.39 203.21 1.36Z" id="Front-Panel-Bottom" fill="#E7E7E7"/>
<path d="M158.7 0.32L158.7 2.61C158.7 3.87 157.69 4.89 156.42 4.89L47.26 4.89C46 4.89 44.98 3.88 44.98 2.61L44.98 0.32 158.7 0.32Z" id="Front-Hole-Bottom" fill="#8F8E8E"/>
</g>
<!-- Printer Top-Panel -->
<g id="top-panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(85.000000, 114.000000)">
<polygon fill="#F9F9F9" points="0.33 18 0.33 17.91 6.85 0.31 179.92 0.01 186.15 17.91 186.15 18"/>
<path d="M45.19 14.89C45.44 14.4 46.1 14 46.64 14L137.48 14C138.03 14 138.68 14.41 138.92 14.89L140.54 18.11 44.65 17.86C44.1 17.86 43.86 17.46 44.12 16.96L45.19 14.89Z" id="Top-Feed-1" fill="#B9B9B9"/>
</g>
<!-- File -->
<g id="filewrapper">
<g id="file" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(133.000000, 55.000000)">
<polyline id="Paper-Body" fill="#F6A623" points="0.12 0 72.17 0 86.12 14.41 86.12 92.54 0.24 92.54"/>
<polygon id="Paper-Top-Right-Fold" fill="#AA7216" points="70.88 0 70.88 15.83 86.84 15.83"/>
<text id="AI-Text" font-family="MyriadPro-Bold, Myriad Pro" font-size="49.52" font-weight="bold" letter-spacing="-1.57" fill="#FFFFFF">
<tspan x="20.82" y="63.66">
Ai
</tspan>
</text>
</g>
<!-- File- Tag -->
<g id="file-tag-group" transform="translate(70.000000, 40.000000)">
<g id="background-color">
<defs><rect id="SVGID_1_" x="-80" y="-35.9" width="496" height="363"/></defs><defs>
<path id="SVGID_2_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/>
</defs>
<defs>
<path id="SVGID_3_" d="M8.5 0h89.4v68.9H8.5V0zM30.5 27c0-2.8 2.2-5 5-5h35.4c2.8 0 5 2.2 5 5v14.9c0 2.8-2.2 5-5 5H35.5c-2.8 0-5-2.2-5-5V27L30.5 27zM28.5 27v14.9c0 3.9 3.1 7 7 7h35.4c3.9 0 7-3.1 7-7V27c0-3.9-3.1-7-7-7H35.5C31.6 20 28.5 23.1 28.5 27L28.5 27z"/>
</defs>
<clipPath id="SVGID_4_"><use xlink:href="#SVGID_1_"/></clipPath>
<clipPath id="SVGID_5_" class="sta"><use xlink:href="#SVGID_2_"/></clipPath>
<clipPath id="SVGID_6_" class="stb"><use xlink:href="#SVGID_3_"/></clipPath>
<path class="stc" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g><g id="stroke">
<defs>
<rect id="SVGID_7_" x="-80" y="-35.9" width="496" height="363"/></defs>
<defs>
<path id="SVGID_8_" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/>
</defs>
<clipPath id="SVGID_9_"><use xlink:href="#SVGID_7_"/></clipPath>
<clipPath id="SVGID_10_" class="std"><use xlink:href="#SVGID_8_"/></clipPath>
<path class="ste" d="M29.5 27c0-3.3 2.7-6 6-6h35.4c3.3 0 6 2.7 6 6v14.9c0 3.3-2.7 6-6 6H35.5c-3.3 0-6-2.7-6-6V27L29.5 27z"/></g>
<path id="file-text" class="stf" d="M41.6 33.9h1.3v7h2.3v-7H47v-1.8h-1.7v-0.6c0-0.4 0.1-0.7 0.2-0.9 0.1-0.2 0.4-0.2 0.7-0.2 0.3 0 0.7 0 1.1 0.1l0.3-1.6c-0.6-0.2-1.3-0.3-1.9-0.3 -0.6 0-1.2 0.1-1.6 0.3 -0.4 0.2-0.7 0.5-0.9 0.9s-0.2 0.9-0.2 1.7v0.7h-1.3V33.9L41.6 33.9zM50.5 30.9v-2.2h-2.3v2.2H50.5L50.5 30.9zM50.5 40.9v-8.8h-2.3v8.8H50.5L50.5 40.9zM55 40.9V28.8h-2.3v12.1H55L55 40.9zM61.8 39.1c-0.2 0.2-0.6 0.3-0.9 0.3 -0.5 0-1-0.2-1.3-0.6 -0.4-0.4-0.5-0.9-0.6-1.6h5.8c0-1.8-0.3-3.1-1.1-4 -0.8-0.9-1.8-1.3-3.1-1.3 -1.2 0-2.1 0.4-2.9 1.2 -0.8 0.8-1.1 2-1.1 3.4 0 1.2 0.3 2.2 0.9 3 0.7 1 1.9 1.5 3.4 1.5 1 0 1.8-0.2 2.4-0.7 0.6-0.4 1.1-1.1 1.4-1.9l-2.3-0.4C62.2 38.5 62.1 38.9 61.8 39.1L61.8 39.1zM59 35.8c0-0.6 0.2-1.1 0.5-1.5 0.3-0.4 0.8-0.6 1.3-0.6 0.5 0 0.9 0.2 1.2 0.5 0.3 0.4 0.5 0.9 0.5 1.5H59L59 35.8z"/>
</g>
</g>
<!-- Printer Paper -->
<g id="printer-paper" transform="translate(100.000000, 115.000000)">
<g id="end_3_">
<g id="end"> <!-- Printer Paper End Graphic -->
<polygon id="paper-base_1_" class="st0 start1" points="147.8,107.5 7.8,107.5 29.3,25.5 126.3,25.5 "/>
<polygon class="st1 start2" points="139.5,103.2 16,103.2 19.8,87.1 135.7,87.1 "/>
<polygon class="st1 start3" points="74.8,82.9 20.8,82.9 24,69.1 75,69.1 "/>
<polygon class="st1 start4" points="134.7,82.9 80.7,82.9 80.6,77.8 133.5,77.8 "/>
<polygon class="st1 start5" points="75.1,65.1 25,65.1 27.7,53.3 75.2,53.3 "/>
<polygon class="st1 start6" points="124.6,39.8 30.9,39.8 33.5,28.7 122,28.7 "/>
<polygon class="st1 start7" points="132.8,73.9 80.7,73.9 80.7,69.1 131.7,69.1 "/>
<polygon class="st1 start8" points="130.6,65.4 80.4,65.4 80.4,61 129.6,61 "/>
<polygon class="st1 start9" points="128.7,57.1 80.3,57.1 80.3,53 127.7,53 "/>
<polygon class="st1 start10" points="127,49.8 80.3,49.8 80.2,46 126.1,46 "/>
</g>
</g>
<g id="start"> <!-- Printer Paper Start Graphic -->
<g id="start_1_">
<rect id="paper-base" x="29.3" y="25.4" class="st0 end1" width="97" height="82"/>
<rect x="34.3" y="92.1" class="st1 end2" width="86.9" height="12.3"/>
<rect x="34.3" y="76.4" class="st1 end3" width="41.3" height="12.3"/>
<rect x="80" y="84.2" class="st1 end4" width="41.3" height="4.4"/>
<rect x="34.3" y="60.3" class="st1 end5" width="41.3" height="12.3"/>
<rect x="34.3" y="29.9" class="st1 end6" width="86.9" height="14.6"/>
<rect x="80.1" y="76.4" class="st1 end7" width="41.3" height="4.4"/>
<rect x="80" y="68.4" class="st1 end8" width="41.3" height="4.4"/>
<rect x="80" y="60" class="st1 end9" width="41.3" height="4.4"/>
<rect x="80" y="52.1" class="st1 end10" width="41.3" height="4.4"/>
</g>
</g>
</g>
<!-- Printer Body -->
<g id="Printer-Body" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(76.000000, 130.000000)">
<polygon id="Front-Fill" fill="#E7E7E7" points="0.41 24.29 0.41 83.57 0.41 94 203.21 94 203.21 83.62 203.21 24.29"/>
<g id="Bottom-Feed" transform="translate(44.000000, 89.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"/>
</mask>
<polygon id="Fill-2" fill="#8E8E8E" mask="url(#mask-2)" points="-4.02 10.32 119.7 10.32 119.7 -4.25 -4.02 -4.25"/>
</g>
<g id="Fronot-Decor" transform="translate(36.000000, 24.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"/>
</mask>
<g id="Front-Decor"/>
<polygon id="Fill-5" fill="#A7A6A6" mask="url(#mask-4)" points="-4.47 20.29 136.76 20.29 136.76 -4.95 -4.47 -4.95"/>
</g>
<polygon id="Top" fill="#F9F9F9" points="9.33 0.91 0.67 24.3 203.47 24.8 195.16 0.91"/>
<polygon id="Vent-3" fill="#FFFFFF" points="7.29 37.24 29.47 37.24 29.47 31.91 7.29 31.91"/>
<polygon id="Vent-2" fill="#FFFFFF" points="7.29 44.09 29.47 44.09 29.47 38.76 7.29 38.76"/>
<polygon id="Vent-1" fill="#FFFFFF" points="7.29 50.95 29.47 50.95 29.47 45.62 7.29 45.62"/>
</g>
<!-- Red Light -->
<g id="red-light" transform="translate(90.000000, 70.000000)">
<defs>
<rect id="SVGID_1_" x="-247.7" y="-163.5" width="496" height="363"/></defs>
<defs>
<path id="SVGID_2_" d="M18.6 22.1c1.4 0 2.5-1.2 2.5-2.6 0-1.5-1.1-2.6-2.5-2.6 -1.4 0-2.5 1.2-2.5 2.6C16 20.9 17.2 22.1 18.6 22.1L18.6 22.1z"/>
</defs>
<clipPath id="SVGID_3_"><use xlink:href="#SVGID_1_"/></clipPath>
<clipPath id="SVGID_4_" class="sth"><use xlink:href="#SVGID_2_"/></clipPath>
<rect x="11" y="11.8" class="sti" width="15.1" height="15.3"/>
</g>
<!-- Green Light -->
<g id="green-light">
<defs>
<rect id="SVGID_1_" x="-248" y="-152.4" width="496" height="363"/>
</defs>
<defs>
<path id="SVGID_2_" d="M18.7,25.6c2,0,3.7-1.7,3.7-3.8c0-2.1-1.6-3.8-3.7-3.8c-2,0-3.7,1.7-3.7,3.8C15,23.9,16.6,25.6,18.7,25.6
L18.7,25.6z"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_1_" style="display:none;overflow:visible;"/>
</clipPath>
<clipPath id="SVGID_4_" class="stk">
<use xlink:href="#SVGID_2_" style="overflow:visible;"/>
</clipPath>
<rect x="10" y="13" class="stl" width="17.3" height="17.6"/>
</g>
<!-- Tap Panel that covers paper -->
<g id="Top-Panel-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(128.000000, 130.000000)">
<path d="M1.53 0.89C1.79 0.4 2.45 0 2.99 0L93.82 0C94.37 0 95.02 0.41 95.26 0.89L96.88 4.11 0.99 3.86C0.44 3.86 0.21 3.46 0.46 2.96L1.53 0.89Z" id="Top-Feed-1" fill="#B9B9B9" transform="translate(48.440524, 2.053393) scale(1, -1) translate(-48.440524, -2.053393) "/>
</g>
</svg>
</svg>