Why is SVGator's animated svg not displaying properly on Chrome? - css
enter image description hereI used SVGator to create a simple animation so I can use it on my website. The animation shows perfectly fine in the editor. However, when I export it and view it from my browser (Chrome 67 / Windows 10) or from my website, few elements skip their animation and weirdly jump straight to their end state.
Here's a link to the SVG: http://jmp.sh/2DOfAD2
P.S I am no expert at coding so I can't really figure out what's wrong with it by looking at the lines of code. But here is the link to the code for you
And an excerpt of the code:
</style>
<g id="B1xEEHH6bm" display="none">
</g>
<g id="S1-EErHpW7">
<g id="rkfVNrr6-m">
<g id="r17VVSS6bm">
<path d="M116.998,343.135" id="ByENEBBaZX"/>
<path d="M116.998,343.135" id="BkHNNBHpZQ"/>
</g>
</g>
<g id="Sk8VVrBTbm">
<g id="HJDV4rSpbQ">
<g id="H1dNESHa-m">
<polygon points="103.563,307.839 83.113,319.964 83.113,294.62 103.563,282.52 " id="SkKVEBBTbm"/>
<polygon points="83.113,319.964 43.361,307.29 43.361,281.939 83.113,294.62 " id="S1qNESr6WQ"/>
<polygon points="83.113,294.62 43.361,281.939 63.813,269.84 103.563,282.52 " id="r1o4VBBpbX"/>
</g>
<g id="SyhN4HH6WX">
<rect x="52.305" y="278.46" width="11.608" height="3.49" id="r1TV4SSpZm"/>
<g id="BJCN4rrabX">
<ellipse cx="58.109" cy="281.95" rx="5.804" ry="2.604" id="Hy1g44BHpZQ"/>
<ellipse cx="58.109" cy="278.46" rx="5.804" ry="2.604" id="S1ee4VBHTbm"/>
</g>
</g>
<g id="rJ-g4NSSa-m">
<rect x="62.747" y="271.93" width="11.608" height="3.49" id="r1MxNNBraW7"/>
<g id="B1XxNVHHTbm">
<ellipse cx="68.551" cy="275.42" rx="5.804" ry="2.605" id="S1NxVNrSp-7"/>
<ellipse cx="68.551" cy="271.93" rx="5.804" ry="2.606" id="SJHlV4BB6bQ"/>
</g>
</g>
<g id="BJUg4NHHT-Q">
<rect x="73.521" y="285.398" width="11.608" height="3.49" id="ryDgNErB6-m"/>
<g id="SkOgEVBrTWX">
<ellipse cx="79.325" cy="288.889" rx="5.804" ry="2.606" id="ByKe4VrH6-7"/>
<ellipse cx="79.325" cy="285.398" rx="5.804" ry="2.605" id="ryqlN4rHa-m"/>
</g>
</g>
<g id="r1sx44rHT-m">
<rect x="83.581" y="279.32" width="11.608" height="3.49" id="S1nl4NHHpZm"/>
<g id="ryTx4Nrr6WQ">
<ellipse cx="89.385" cy="282.811" rx="5.804" ry="2.606" id="r1CgENHBaWm"/>
<ellipse cx="89.385" cy="279.32" rx="5.804" ry="2.605" id="HJkZVNHBa-X"/>
</g>
</g>
</g>
<g id="r1gbN4SBa-7">
<g id="Bk-Z44SrTZm">
<polygon points="143.315,320.533 122.864,332.658 122.864,307.313 143.315,295.213 " id="Skzb4NBHaWX"/>
<polygon points="122.864,332.658 83.113,319.983 83.113,294.635 122.864,307.313 " id="BJQ-4NHS6-Q"/>
<polygon points="122.864,307.313 83.113,294.635 103.564,282.534 143.315,295.213 " id="HyE-V4HS6Wm"/>
</g>
<g id="ByrZE4SrpZX">
<rect x="92.056" y="291.152" width="11.608" height="3.49" id="rkIZNVBS6-X"/>
<g id="ryDW4EBrpZ7">
<ellipse cx="97.86" cy="294.644" rx="5.804" ry="2.606" id="S1_ZEEHSab7"/>
<ellipse cx="97.86" cy="291.153" rx="5.804" ry="2.606" id="BJK-N4SrTbQ"/>
</g>
</g>
<g id="Hy9-4NSr6bQ">
<rect x="102.499" y="284.624" width="11.608" height="3.489" id="HJjZNVBr6ZX"/>
<g id="Sy2WNESrpWX">
<ellipse cx="108.303" cy="288.114" rx="5.804" ry="2.605" id="SJaZNESHaZQ"/>
<ellipse cx="108.303" cy="284.624" rx="5.804" ry="2.604" id="HJ0ZVEHrTZX"/>
</g>
</g>
<g id="HkyfEVrBTZQ">
<rect x="113.272" y="298.092" width="11.608" height="3.491" id="HJezNNHHp-X"/>
<g id="H1ZGE4HSTZQ">
<ellipse cx="119.076" cy="301.583" rx="5.804" ry="2.604" id="SJzf4NBr6bX"/>
<ellipse cx="119.076" cy="298.092" rx="5.804" ry="2.606" id="S1mz4NSHaWX"/>
</g>
</g>
<g id="BkVf4Vrr6Wm">
<rect x="123.332" y="292.014" width="11.608" height="3.491" id="BySfV4rSTZQ"/>
<g id="B1IM44HS6-X">
<ellipse cx="129.136" cy="295.505" rx="5.804" ry="2.604" id="HkPG44BrTWm"/>
<ellipse cx="129.136" cy="292.014" rx="5.804" ry="2.606" id="S1OGENBSpWX"/>
</g>
</g>
</g>
<g id="BJKfVErSaZ7_B1XM8SpZm" data-animator-group="true" data-animator-type="0">
<g id="BJKfVErSaZ7">
<g id="HkcGNEHBTb7">
<polygon points="123.024,288.641 102.574,300.766 102.574,275.42 123.024,263.318 " id="BJjf4ESrT-X"/>
<polygon points="102.574,300.766 62.822,288.09 62.822,262.741 102.574,275.42 " id="B12MNVHB6b7"/>
<polygon points="102.574,275.42 62.822,262.741 83.274,250.641 123.024,263.318 " id="rkpfNNrHT-Q"/>
</g>
<g id="ByRzE4SH6bm">
<rect x="71.766" y="259.26" width="11.608" height="3.49" id="BkyXVVrr6WQ"/>
<g id="BJlmNEHSa-X">
<ellipse cx="77.57" cy="262.75" rx="5.804" ry="2.605" id="SkZQEEHHa-7"/>
<ellipse cx="77.57" cy="259.26" rx="5.804" ry="2.605" id="BJfQ4NBSa-m"/>
</g>
</g>
<g id="By7XE4SH6-7">
<rect x="82.208" y="252.73" width="11.608" height="3.49" id="ByNm4VBS6WX"/>
<g id="SkBmVESH6-7">
<ellipse cx="88.012" cy="256.221" rx="5.804" ry="2.605" id="r1IXENrSaZm"/>
<ellipse cx="88.012" cy="252.73" rx="5.804" ry="2.605" id="S1v744HHTWX"/>
</g>
</g>
<g id="SydXE4BSa-7">
<rect x="92.981" y="266.198" width="11.608" height="3.491" id="r1Km44rS6Zm"/>
<g id="Sk97VVHHa-X">
<ellipse cx="98.786" cy="269.689" rx="5.804" ry="2.605" id="SyjQ4NrHTb7"/>
<ellipse cx="98.786" cy="266.198" rx="5.804" ry="2.606" id="S13XN4BHab7"/>
</g>
</g>
<g id="B1a74EBB6bm">
<rect x="103.042" y="260.12" width="11.608" height="3.491" id="BJR7V4rr6WX"/>
<g id="rk1VVEBrpbQ">
<ellipse cx="108.846" cy="263.611" rx="5.804" ry="2.605" id="rkeN44HrTWQ"/>
<ellipse cx="108.846" cy="260.12" rx="5.804" ry="2.606" id="r1ZE4NHH6W7"/>
</g>
</g>
</g>
</g>
<g id="BkGVNVSB6-Q_rJYXOUH6-X" data-animator-group="true" data-animator-type="0">
<g id="BkGVNVSB6-Q">
<g id="HJQNV4Hra-7">
<polygon points="123.024,263.714 102.574,275.839 102.574,250.495 123.024,238.394 " id="B1VNN4rH6-Q"/>
<polygon points="102.574,275.839 62.822,263.164 62.822,237.815 102.574,250.495 " id="HJBNE4SrpZm"/>
<polygon points="102.574,250.495 62.822,237.815 83.274,225.715 123.024,238.394 " id="SJLEV4BBaZ7"/>
</g>
<g id="ByDVVEBHTWX">
<rect x="71.766" y="234.334" width="11.608" height="3.491" id="HJ_N4VSHpWX"/>
<g id="BJKNNVrrT-m">
<ellipse cx="77.57" cy="237.825" rx="5.804" ry="2.606" id="BJ5ENEHrT-X"/>
<ellipse cx="77.57" cy="234.334" rx="5.804" ry="2.606" id="SkjNNESSab7"/>
</g>
</g>
<g id="SJhE4NSS6bQ">
<rect x="82.208" y="227.805" width="11.608" height="3.49" id="r1T44VHS6bm"/>
<g id="SyRN44HHTWQ">
<ellipse cx="88.012" cy="231.295" rx="5.804" ry="2.606" id="BJkrNVSHT-m"/>
<ellipse cx="88.012" cy="227.805" rx="5.804" ry="2.606" id="S1eBEVSS6bX"/>
</g>
</g>
<g id="rkbrNVHr6b7">
<rect x="92.981" y="241.273" width="11.608" height="3.491" id="SJGrVVSH6-X"/>
<g id="BJXrNVrHpbQ">
<ellipse cx="98.786" cy="244.764" rx="5.804" ry="2.606" id="r1VHVVrSabX"/>
<ellipse cx="98.786" cy="241.273" rx="5.804" ry="2.606" id="HkrrENBrpbm"/>
</g>
</g>
<g id="ByIHE4HS6-7">
<rect x="103.042" y="235.195" width="11.608" height="3.491" id="BJPHV4rHTbX"/>
<g id="BJ_BEErrT-X">
<ellipse cx="108.846" cy="238.686" rx="5.804" ry="2.606" id="r1YHENrBpbQ"/>
<ellipse cx="108.846" cy="235.195" rx="5.804" ry="2.606" id="SJ9SN4Sr6Wm"/>
</g>
</g>
</g>
</g>
<g id="SysBVNBBTZm_SJpBwST-X" data-animator-group="true" data-animator-type="0">
<g id="SysBVNBBTZm">
<g id="HknB44HSaWX">
<polygon points="123.054,238.428 102.603,250.553 102.603,225.208 123.054,213.108 " id="SkTrEVSHTWm"/>
<polygon points="102.603,250.553 62.852,237.878 62.852,212.529 102.603,225.208 " id="SJCSVEBrp-Q"/>
<polygon points="102.603,225.208 62.852,212.529 83.303,200.429 123.054,213.108 " id="r11LVESHpb7"/>
</g>
<g id="ryeINNHrTZm">
<rect x="71.795" y="209.048" width="11.608" height="3.491" id="Bkb8EVrSpb7"/>
<g id="Byz8N4SHpZm">
<ellipse cx="77.599" cy="212.539" rx="5.804" ry="2.606" id="SkXLVNHHTWX"/>
<ellipse cx="77.599" cy="209.048" rx="5.804" ry="2.606" id="BkEL44BraWX"/>
</g>
</g>
<g id="rkHLEVSSa-7">
<rect x="82.237" y="202.519" width="11.608" height="3.49" id="BkIUN4BH6Z7"/>
<g id="BJPLV4rST-m">
<ellipse cx="88.042" cy="206.009" rx="5.804" ry="2.606" id="r1dIVEBr6ZX"/>
<ellipse cx="88.042" cy="202.519" rx="5.804" ry="2.606" id="ryt8V4Br6WX"/>
</g>
</g>
<g id="rJ9UE4HH6-7">
<rect x="93.011" y="215.987" width="11.608" height="3.491" id="BkiIVNBSaZQ"/>
<g id="Sy2UVVBHTZQ">
<ellipse cx="98.815" cy="219.478" rx="5.804" ry="2.606" id="rk6LNVBBaW7"/>
<ellipse cx="98.815" cy="215.987" rx="5.804" ry="2.606" id="r1RLVVrBT-m"/>
</g>
</g>
<g id="HJyvVNBH6ZQ">
<rect x="103.071" y="209.909" width="11.608" height="3.491" id="rklvNEBSab7"/>
<g id="By-P44rH6-m">
<ellipse cx="108.875" cy="213.399" rx="5.804" ry="2.606" id="HyGvEESBT-7"/>
<ellipse cx="108.875" cy="209.909" rx="5.804" ry="2.606" id="r17vEVrSTbX"/>
</g>
</g>
</g>
</g>
<g id="H1Ew4NBra-m_HJ8twBa-X" data-animator-group="true" data-animator-type="0">
<g id="H1Ew4NBra-m">
<g id="B1HwNVSrp-Q">
<polygon points="123.112,213.108 102.661,225.232 102.661,199.889 123.112,187.788 " id="HyIDE4HBaZQ"/>
<polygon points="102.661,225.232 62.91,212.558 62.91,187.209 102.661,199.889 " id="SywD4NHHT-m"/>
<polygon points="102.661,199.889 62.91,187.209 83.361,175.108 123.112,187.788 " id="B1uvNNHHaZX"/>
</g>
<g id="r1KPV4rB6bX">
<rect x="71.854" y="183.728" width="11.608" height="3.491" id="SycDE4rB6ZX"/>
<g id="HyoDENSrT-Q">
<ellipse cx="77.658" cy="187.219" rx="5.804" ry="2.606" id="Synv4VrBTb7"/>
<ellipse cx="77.658" cy="183.728" rx="5.804" ry="2.606" id="r1aDVEBr6bm"/>
</g>
</g>
<g id="rkRPE4SH6WX">
<rect x="82.296" y="177.199" width="11.608" height="3.49" id="H1k_N4SrpWm"/>
<g id="Hyg_E4HraZ7">
<ellipse cx="88.1" cy="180.689" rx="5.804" ry="2.606" id="BJbOE4SB6-Q"/>
<ellipse cx="88.1" cy="177.199" rx="5.804" ry="2.605" id="S1GuENrST-7"/>
</g>
</g>
<g id="S1XuNEHra-7">
<rect x="93.069" y="190.667" width="11.608" height="3.491" id="HJ4_4VSraZQ"/>
<g id="HySdNErHTb7">
<ellipse cx="98.874" cy="194.158" rx="5.804" ry="2.605" id="BJIuN4Hrp-Q"/>
<ellipse cx="98.874" cy="190.667" rx="5.804" ry="2.606" id="H1DuNErH6bQ"/>
</g>
</g>
<g id="Hy__44rHaWm">
<rect x="103.129" y="184.589" width="11.608" height="3.49" id="SyYO4EHSTbX"/>
<g id="Hy5d4NHBT-Q">
<ellipse cx="108.933" cy="188.079" rx="5.804" ry="2.606" id="HkidEEHSaWQ"/>
<ellipse cx="108.933" cy="184.589" rx="5.804" ry="2.606" id="BJ2dN4HSa-7"/>
</g>
</g>
</g>
</g>
<g id="BJpuNEBHpZQ_SJ43PH6W7" data-animator-group="true" data-animator-type="0">
<g id="BJpuNEBHpZQ">
<g id="BJRuV4BH6b7">
<polygon points="123.112,187.754 102.661,199.879 102.661,174.535 123.112,162.434 " id="ByJKENBST-X"/>
<polygon points="102.661,199.879 62.91,187.204 62.91,161.855 102.661,174.535 " id="BJeYVVSHa-Q"/>
<polygon points="102.661,174.535 62.91,161.855 83.361,149.755 123.112,162.434 " id="BkWtVVHBTbQ"/>
</g>
<g id="B1Mt4VHra-7">
<rect x="71.854" y="158.374" width="11.608" height="3.491" id="r17K4VrS6-7"/>
<g id="B1EKEVBBTbX">
<ellipse cx="77.658" cy="161.865" rx="5.804" ry="2.606" id="ryrFNNSr6Z7"/>
<ellipse cx="77.658" cy="158.374" rx="5.804" ry="2.606" id="HJItV4Hra-X"/>
</g>
</g>
<g id="HywFV4BBTZX">
<rect x="82.296" y="151.845" width="11.608" height="3.49" id="SkutENSS6Z7"/>
<g id="HyFt4VBBpZ7">
<ellipse cx="88.1" cy="155.335" rx="5.804" ry="2.606" id="BycFV4BHaZ7"/>
<ellipse cx="88.1" cy="151.845" rx="5.804" ry="2.606" id="HyitN4rHpZQ"/>
</g>
</g>
<g id="S1ntN4HSpZ7">
<rect x="93.069" y="165.313" width="11.608" height="3.491" id="BJTKVVrHTZQ"/>
<g id="BJ0tEErSpbX">
<ellipse cx="98.874" cy="168.804" rx="5.804" ry="2.606" id="Hkyq44BSabm"/>
<ellipse cx="98.874" cy="165.313" rx="5.804" ry="2.606" id="H1gqNNBS6W7"/>
</g>
</g>
<g id="Sk-qN4SHab7">
<rect x="103.129" y="159.235" width="11.608" height="3.491" id="HkzcENSSp-Q"/>
<g id="HkQc4VSr6-Q">
<ellipse cx="108.933" cy="162.726" rx="5.804" ry="2.606" id="BJV5VNHBp-7"/>
<ellipse cx="108.933" cy="159.235" rx="5.804" ry="2.606" id="HJH5EEBST-Q"/>
</g>
</g>
</g>
</g>
<g id="ByUcENHSpZ7_SkYkdHT-7" data-animator-group="true" data-animator-type="0">
<g id="ByUcENHSpZ7">
<g id="rJDqVNHr6WX">
<polygon points="123.112,162.434 102.661,174.559 102.661,149.215 123.112,137.114 " id="ryu5VEHSTbX"/>
<polygon points="102.661,174.559 62.91,161.884 62.91,136.536 102.661,149.215 " id="BkF9V4BHabm"/>
<polygon points="102.661,149.215 62.91,136.536 83.361,124.435 123.112,137.114 " id="ry594VBBpWX"/>
</g>
<g id="B1sqN4rHTWX">
<rect x="71.854" y="133.054" width="11.608" height="3.491" id="B12q44BraZX"/>
<g id="SJTqVVHHTbX">
<ellipse cx="77.658" cy="136.545" rx="5.804" ry="2.606" id="BkRcNVrBTbm"/>
<ellipse cx="77.658" cy="133.054" rx="5.804" ry="2.606" id="ryyiVErrpbQ"/>
</g>
</g>
<g id="SklsVNSHTb7">
<rect x="82.296" y="126.524" width="11.608" height="3.491" id="r1-s44rrT-X"/>
<g id="Syfj44SHT-Q">
<ellipse cx="88.1" cy="130.015" rx="5.804" ry="2.606" id="r1XsENHHp-m"/>
<ellipse cx="88.1" cy="126.524" rx="5.804" ry="2.606" id="Hy4oE4BHT-7"/>
</g>
</g>
<g id="H1BoN4HB6W7">
<rect x="93.069" y="139.993" width="11.608" height="3.49" id="rk8oENrST-m"/>
<g id="SyDsV4rrpW7">
<ellipse cx="98.874" cy="143.483" rx="5.804" ry="2.606" id="r1_jV4rSpZ7"/>
<ellipse cx="98.874" cy="139.993" rx="5.804" ry="2.606" id="SJKoEESr6b7"/>
</g>
</g>
<g id="Skci4EHBp-m">
<rect x="103.129" y="133.915" width="11.608" height="3.49" id="rkoi44HBTZm"/>
<g id="rynsV4HSTZ7">
<ellipse cx="108.933" cy="137.405" rx="5.804" ry="2.606" id="Byps4VrSaZ7"/>
<ellipse cx="108.933" cy="133.915" rx="5.804" ry="2.606" id="SkCjNEBST-7"/>
</g>
</g>
</g>
</g>
<g id="HkJ3NVrB6-m_Hy4fuHTb7" data-animator-group="true" data-animator-type="0">
<g id="HkJ3NVrB6-m">
<g id="SJg244BraW7">
<polygon points="105,131.264 84.549,143.389 84.549,118.044 105,105.944 " id="B1WhE4rSaW7"/>
<polygon points="84.549,143.389 44.797,130.714 44.797,105.366 84.549,118.044 " id="BJzn4VHrp-7"/>
<polygon points="84.549,118.044 44.797,105.366 65.249,93.265 105,105.944 " id="BJX2V4HBTbQ"/>
</g>
<g id="SyN3NESrabX">
<rect x="53.741" y="101.884" width="11.608" height="3.49" id="SkrhVNBraZQ"/>
<g id="Bk824NSS6b7">
<ellipse cx="59.545" cy="105.375" rx="5.804" ry="2.606" id="S1wnNVrrT-X"/>
<ellipse cx="59.545" cy="101.884" rx="5.804" ry="2.606" id="r1u3NVSHTZX"/>
</g>
</g>
<g id="ryY3NESHpWm">
<rect x="64.183" y="95.354" width="11.608" height="3.491" id="H1c3VVBSaZX"/>
<g id="HJihNEBBT-X">
<ellipse cx="69.987" cy="98.845" rx="5.804" ry="2.606" id="rJn24VSSTb7"/>
<ellipse cx="69.987" cy="95.354" rx="5.804" ry="2.606" id="Hka3EEBrpWm"/>
</g>
</g>
<g id="rJR3VESB6Z7">
<rect x="74.957" y="108.823" width="11.608" height="3.49" id="BJyaVNrSaW7"/>
<g id="SkgTNNrB6WX">
<ellipse cx="80.761" cy="112.313" rx="5.804" ry="2.606" id="Sy-aNNHH6-Q"/>
<ellipse cx="80.761" cy="108.823" rx="5.804" ry="2.605" id="SkzpNNSH6ZX"/>
</g>
</g>
<g id="S1mp4NHHTbX">
<rect x="85.017" y="102.745" width="11.608" height="3.491" id="HyEa44Hr6ZX"/>
<g id="SJr6ENrSabX">
<ellipse cx="90.821" cy="106.235" rx="5.804" ry="2.606" id="S1UaNNBSp-X"/>
<ellipse cx="90.821" cy="102.745" rx="5.804" ry="2.606" id="HJv6N4BH6WX"/>
</g>
</g>
</g>
</g>
<g id="Hy_6VVSBaZX_SJWHuHaW7" data-animator-group="true" data-animator-type="0">
<g id="Hy_6VVSBaZX">
<g id="ByK6VNrSTWm">
<polygon points="144.897,143.981 124.446,156.106 124.446,130.762 144.897,118.662 " id="S1564ErSpb7"/>
<polygon points="124.446,156.106 84.695,143.432 84.695,118.083 124.446,130.762 " id="Skj6NVrBTbm"/>
<polygon points="124.446,130.762 84.695,118.083 105.146,105.982 144.897,118.662 " id="Bk36ENSrpWX"/>
</g>
<g id="Skp6NVBBaW7">
<rect x="93.639" y="114.602" width="11.608" height="3.49" id="SkRaVNHSabQ"/>
<g id="SJk04VSSaZX">
<ellipse cx="99.443" cy="118.092" rx="5.804" ry="2.606" id="SklR4NHBTZm"/>
<ellipse cx="99.443" cy="114.602" rx="5.804" ry="2.606" id="H1WAE4SHp-X"/>
</g>
</g>
<g id="BkzA44BBTZX">
<rect x="104.081" y="108.072" width="11.608" height="3.491" id="ry7R4ESrTWm"/>
<g id="SyN0EEHrT-m">
<ellipse cx="109.885" cy="111.563" rx="5.804" ry="2.606" id="B1HC4NHB6Zm"/>
<ellipse cx="109.885" cy="108.072" rx="5.804" ry="2.606" id="r1LC4VSrabX"/>
</g>
</g>
<g id="H1vRVNSHa-7">
<rect x="114.854" y="121.541" width="11.608" height="3.49" id="rkuAV4SH6Zm"/>
<g id="S1YRVNHrpbQ">
<ellipse cx="120.658" cy="125.031" rx="5.804" ry="2.606" id="Sy5CNVrSaZ7"/>
<ellipse cx="120.658" cy="121.541" rx="5.804" ry="2.605" id="BkiCVVSrpZQ"/>
</g>
</g>
<g id="rk3RNVBr6WX">
<rect x="124.914" y="115.462" width="11.608" height="3.491" id="Bkp0VVSBTW7"/>
<g id="S10RV4rHab7">
<ellipse cx="130.718" cy="118.953" rx="5.804" ry="2.606" id="SJyyxE4rSTW7"/>
<ellipse cx="130.718" cy="115.462" rx="5.804" ry="2.606" id="B1gJxEESSabX"/>
</g>
</g>
</g>
</g>
<g id="SJ-1g44SrTZ7">
<g id="SyMyxVErrpWQ">
<polygon points="183.066,333.159 162.616,345.284 162.616,319.94 183.066,307.839 " id="ryQkl4VHSpWQ"/>
<polygon points="162.616,345.284 122.864,332.609 122.864,307.261 162.616,319.94 " id="ryNyl44Hr6bm"/>
<polygon points="162.616,319.94 122.864,307.261 143.316,295.16 183.066,307.839 " id="rJS1eV4Br6ZX"/>
</g>
<g id="rk81eNNHrpWX">
<rect x="131.808" y="303.779" width="11.608" height="3.489" id="ByvJx4ESS6WX"/>
<g id="H1dJe4ESr6ZX">
<ellipse cx="137.612" cy="307.27" rx="5.804" ry="2.606" id="HJFJeN4HHpZQ"/>
<ellipse cx="137.612" cy="303.779" rx="5.804" ry="2.606" id="ryqyxNNBrTW7"/>
</g>
</g>
<g id="BksJeN4BS6bQ">
<rect x="142.25" y="297.25" width="11.608" height="3.49" id="S131eNVHSTbm"/>
<g id="Ska1gVErH6Zm">
<ellipse cx="148.054" cy="300.74" rx="5.804" ry="2.606" id="SyRkgEEHBa-m"/>
<ellipse cx="148.054" cy="297.25" rx="5.804" ry="2.605" id="S1kxx4NBBp-7"/>
</g>
</g>
<g id="HkeeeN4HHpZm">
<rect x="153.024" y="310.719" width="11.608" height="3.49" id="r1ZlgV4HSp-X"/>
<g id="SyMgeENrBp-m">
<ellipse cx="158.828" cy="314.209" rx="5.804" ry="2.605" id="r1QllEEHBp-m"/>
<ellipse cx="158.828" cy="310.719" rx="5.804" ry="2.605" id="rkVxeVErr6bQ"/>
</g>
</g>
<g id="ByrleVEBHTZQ">
<rect x="163.083" y="304.641" width="11.608" height="3.49" id="S1UxgNNBHaWm"/>
<g id="BkwleNNBBpb7">
<ellipse cx="168.888" cy="308.131" rx="5.804" ry="2.605" id="r1_egEEBrp-m"/>
<ellipse cx="168.888" cy="304.641" rx="5.804" ry="2.605" id="BkFlgENHS6b7"/>
</g>
</g>
</g>
<g id="Hy5glNNBBTb7_rJ-jdSaZm" data-animator-group="true" data-animator-type="0">
<g id="Hy5glNNBBTb7">
<g id="H1sexEVSrT-7">
<polygon points="166.624,126.052 146.173,138.177 146.173,112.833 166.624,100.732 " id="BynleNESHa-X"/>
<polygon points="146.173,138.177 106.421,125.502 106.421,100.154 146.173,112.833 " id="rypxe4NSBaWm"/>
<polygon points="146.173,112.833 106.421,100.154 126.873,88.053 166.624,100.732 " id="HkRxgNErHa-X"/>
</g>
<g id="H1JZg4NHH6bQ">
<rect x="115.365" y="96.672" width="11.608" height="3.49" id="rJgWlEVHrTb7"/>
<g id="SkbWlEEHBp-Q">
<ellipse cx="121.169" cy="100.163" rx="5.804" ry="2.606" id="ryz-xEEHBa-7"/>
<ellipse cx="121.169" cy="96.672" rx="5.804" ry="2.606" id="BJXZxEVBBpZm"/>
</g>
</g>
<g id="B14bgEEHSTbm">
<rect x="125.807" y="90.143" width="11.608" height="3.491" id="SkB-xEESSTW7"/>
<g id="By8blNVrBT-Q">
<ellipse cx="131.611" cy="93.633" rx="5.804" ry="2.606" id="HJPZxEESraZ7"/>
<ellipse cx="131.611" cy="90.143" rx="5.804" ry="2.606" id="r1_bgEVrH6WQ"/>
</g>
</g>
<g id="HJtZg4Erra-7">
<rect x="136.581" y="103.611" width="11.608" height="3.49" id="rJ5WxNESrTbX"/>
Related
identify selector by index
I want to use the robot framework to automate the user action to hover on bar chart. Is there a way to identify the bar chart by index? or what should be the selector for me to use the robot framework to hover on the first bar chart? I could not find a unique element when inspecting the chart. outerHTML <div class="recharts-responsive-container" width="1557" height="150" style="outline: green dotted 2px !important;"> <div class="recharts-wrapper" style="position: relative; cursor: default; width: 1557px; height: 150px;"> <svg class="recharts-surface" width="1557" height="150" viewBox="0 0 1557 150" version="1.1" style=""> <defs> <clipPath id="recharts3-clip" style=""> <rect x="80" y="0" height="100" width="1457"></rect> </clipPath> </defs> <g class="recharts-layer recharts-bar"> <g class="recharts-layer recharts-bar-rectangles"> <g class="recharts-layer"> <g class="recharts-layer recharts-bar-rectangle" style=""> <path width="233" height="5" x="109.14" y="95" cursor="pointer" fill="rgba(191, 60, 175, 0.7)" stroke="rgba(191, 60, 175, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 109.14,95 h 233 v 5 h -233 Z" style=""></path> </g> <g class="recharts-layer recharts-bar-rectangle" style=""> <path width="233" height="6.818181818181813" x="400.53999999999996" y="93.18181818181819" cursor="pointer" fill="rgba(254, 75, 131, 0.7)" stroke="rgba(254, 75, 131, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 400.53999999999996,93.18181818181819 h 233 v 6.818181818181813 h -233 Z"></path> </g> <g class="recharts-layer recharts-bar-rectangle"> <path width="233" height="19.545454545454547" x="691.9399999999999" y="80.45454545454545" cursor="pointer" fill="rgba(255, 120, 71, 0.7)" stroke="rgba(255, 120, 71, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 691.9399999999999,80.45454545454545 h 233 v 19.545454545454547 h -233 Z"></path> </g> <g class="recharts-layer recharts-bar-rectangle"> <path width="233" height="17.72727272727272" x="983.3399999999999" y="82.27272727272728" cursor="pointer" fill="rgba(226, 183, 47, 0.7)" stroke="rgba(226, 183, 47, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 983.3399999999999,82.27272727272728 h 233 v 17.72727272727272 h -233 Z"></path> </g> <g class="recharts-layer recharts-bar-rectangle"> <path width="233" height="92.27272727272728" x="1274.74" y="7.7272727272727195" cursor="pointer" fill="rgba(175, 240, 91, 0.7)" stroke="rgba(175, 240, 91, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 1274.74,7.7272727272727195 h 233 v 92.27272727272728 h -233 Z"></path> </g> </g> </g> </g> <g class="recharts-cartesian-grid"> <g class="recharts-cartesian-grid-horizontal"> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="100" x2="1537" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="50" x2="1537" y2="50"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="1537" y2="0"></line> </g> <g class="recharts-cartesian-grid-vertical"> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="225.7" y1="0" x2="225.7" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="517.0999999999999" y1="0" x2="517.0999999999999" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="808.5" y1="0" x2="808.5" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1099.8999999999999" y1="0" x2="1099.8999999999999" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1391.3" y1="0" x2="1391.3" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="80" y2="100"></line> <line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1537" y1="0" x2="1537" y2="100"></line> </g> </g> <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis"> <line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="100" x2="1537" y2="100" style=""></line> <g class="recharts-cartesian-axis-ticks"> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="225.7" y1="106" x2="225.7" y2="100"></line> <text orientation="bottom" width="1457" height="30" type="category" x="225.7" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle"> <tspan x="225.7" dy="0.71em">0.00-0.20</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="517.0999999999999" y1="106" x2="517.0999999999999" y2="100"></line> <text orientation="bottom" width="1457" height="30" type="category" x="517.0999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle"> <tspan x="517.0999999999999" dy="0.71em">0.20-0.40</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="808.5" y1="106" x2="808.5" y2="100"></line> <text orientation="bottom" width="1457" height="30" type="category" x="808.5" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle"> <tspan x="808.5" dy="0.71em">0.40-0.60</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1099.8999999999999" y1="106" x2="1099.8999999999999" y2="100"></line> <text orientation="bottom" width="1457" height="30" type="category" x="1099.8999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle"> <tspan x="1099.8999999999999" dy="0.71em">0.60-0.80</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1391.3" y1="106" x2="1391.3" y2="100"></line> <text orientation="bottom" width="1457" height="30" type="category" x="1391.3" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle"> <tspan x="1391.3" dy="0.71em">0.80-1.00</tspan> </text> </g> </g> <text offset="5" x="808.5" y="135" class="recharts-text recharts-label" text-anchor="middle"> <tspan x="808.5" dy="0.71em">Range of Word Confidence Scores</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis" style=""> <line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="0" x2="80" y2="100"></line> <g class="recharts-cartesian-axis-ticks"> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="100" x2="80" y2="100"></line> <text orientation="left" width="60" height="100" type="number" x="72" y="100" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end"> <tspan x="72" dy="0.355em">0</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="50" x2="80" y2="50"></line> <text orientation="left" width="60" height="100" type="number" x="72" y="50" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end"> <tspan x="72" dy="0.355em">110</tspan> </text> </g> <g class="recharts-layer recharts-cartesian-axis-tick"> <line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="0" x2="80" y2="0"></line> <text orientation="left" width="60" height="100" type="number" x="72" y="11" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end"> <tspan x="72" dy="0.355em">220</tspan> </text> </g> </g> <text x="-100" y="40" width="100" transform="rotate(-90)" class="recharts-text" text-anchor="start"> <tspan x="-100" dy="-2em">Count of Word</tspan> <tspan x="-100" dy="1em">Confidence</tspan> <tspan x="-100" dy="1em">Scores</tspan> </text> </g> </svg> <div class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-top" style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; left: 0px; transform: translate(235.7px, 32px);"> <div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;"> <p class="recharts-tooltip-label" style="">0.00-0.20</p> </div> </div> </div> </div>
The first bar of the five can be selected in CSS by:
.recharts-layer.recharts-bar-rectangle:first-child:hover
To demonstrate this, this snippet changes the path's fill color to blue on hover of the bar.
.recharts-layer.recharts-bar-rectangle:first-child:hover path {
fill: blue;
}
<div class="recharts-responsive-container" width="1557" height="150" style="outline: green dotted 2px !important;">
<div class="recharts-wrapper" style="position: relative; cursor: default; width: 1557px; height: 150px;">
<svg class="recharts-surface" width="1557" height="150" viewBox="0 0 1557 150" version="1.1" style="">
<defs>
<clipPath id="recharts3-clip" style="">
<rect x="80" y="0" height="100" width="1457"></rect>
</clipPath>
</defs>
<g class="recharts-layer recharts-bar">
<g class="recharts-layer recharts-bar-rectangles">
<g class="recharts-layer">
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="5" x="109.14" y="95" cursor="pointer" fill="rgba(191, 60, 175, 0.7)" stroke="rgba(191, 60, 175, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 109.14,95 h 233 v 5 h -233 Z" style=""></path>
</g>
<g class="recharts-layer recharts-bar-rectangle" style="">
<path width="233" height="6.818181818181813" x="400.53999999999996" y="93.18181818181819" cursor="pointer" fill="rgba(254, 75, 131, 0.7)" stroke="rgba(254, 75, 131, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 400.53999999999996,93.18181818181819 h 233 v 6.818181818181813 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="19.545454545454547" x="691.9399999999999" y="80.45454545454545" cursor="pointer" fill="rgba(255, 120, 71, 0.7)" stroke="rgba(255, 120, 71, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 691.9399999999999,80.45454545454545 h 233 v 19.545454545454547 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="17.72727272727272" x="983.3399999999999" y="82.27272727272728" cursor="pointer" fill="rgba(226, 183, 47, 0.7)" stroke="rgba(226, 183, 47, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 983.3399999999999,82.27272727272728 h 233 v 17.72727272727272 h -233 Z"></path>
</g>
<g class="recharts-layer recharts-bar-rectangle">
<path width="233" height="92.27272727272728" x="1274.74" y="7.7272727272727195" cursor="pointer" fill="rgba(175, 240, 91, 0.7)" stroke="rgba(175, 240, 91, 0.7)" stroke-width="2" radius="0" class="recharts-rectangle" d="M 1274.74,7.7272727272727195 h 233 v 92.27272727272728 h -233 Z"></path>
</g>
</g>
</g>
</g>
<g class="recharts-cartesian-grid">
<g class="recharts-cartesian-grid-horizontal">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="100" x2="1537" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="50" x2="1537" y2="50"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="1537" y2="0"></line>
</g>
<g class="recharts-cartesian-grid-vertical">
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="225.7" y1="0" x2="225.7" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="517.0999999999999" y1="0" x2="517.0999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="808.5" y1="0" x2="808.5" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1099.8999999999999" y1="0" x2="1099.8999999999999" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1391.3" y1="0" x2="1391.3" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="80" y1="0" x2="80" y2="100"></line>
<line stroke="#ccc" stroke-dasharray="3 3" fill="none" x="80" y="0" width="1457" height="100" offset="[object Object]" x1="1537" y1="0" x2="1537" y2="100"></line>
</g>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="100" x2="1537" y2="100" style=""></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="225.7" y1="106" x2="225.7" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="225.7" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="225.7" dy="0.71em">0.00-0.20</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="517.0999999999999" y1="106" x2="517.0999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="517.0999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="517.0999999999999" dy="0.71em">0.20-0.40</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="808.5" y1="106" x2="808.5" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="808.5" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="808.5" dy="0.71em">0.40-0.60</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1099.8999999999999" y1="106" x2="1099.8999999999999" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1099.8999999999999" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1099.8999999999999" dy="0.71em">0.60-0.80</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="bottom" width="1457" height="30" type="category" x="80" y="100" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="1391.3" y1="106" x2="1391.3" y2="100"></line>
<text orientation="bottom" width="1457" height="30" type="category" x="1391.3" y="108" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle">
<tspan x="1391.3" dy="0.71em">0.80-1.00</tspan>
</text>
</g>
</g>
<text offset="5" x="808.5" y="135" class="recharts-text recharts-label" text-anchor="middle">
<tspan x="808.5" dy="0.71em">Range of Word Confidence Scores</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis" style="">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="80" y1="0" x2="80" y2="100"></line>
<g class="recharts-cartesian-axis-ticks">
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="100" x2="80" y2="100"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="100" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">0</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="50" x2="80" y2="50"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="50" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">110</tspan>
</text>
</g>
<g class="recharts-layer recharts-cartesian-axis-tick">
<line orientation="left" width="60" height="100" type="number" x="20" y="0" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74" y1="0" x2="80" y2="0"></line>
<text orientation="left" width="60" height="100" type="number" x="72" y="11" stroke="none" fill="#666" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end">
<tspan x="72" dy="0.355em">220</tspan>
</text>
</g>
</g>
<text x="-100" y="40" width="100" transform="rotate(-90)" class="recharts-text" text-anchor="start">
<tspan x="-100" dy="-2em">Count of Word</tspan>
<tspan x="-100" dy="1em">Confidence</tspan>
<tspan x="-100" dy="1em">Scores</tspan>
</text>
</g>
</svg>
<div class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-top" style="pointer-events: none; visibility: hidden; position: absolute; top: 0px; left: 0px; transform: translate(235.7px, 32px);">
<div class="recharts-default-tooltip" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
<p class="recharts-tooltip-label" style="">0.00-0.20</p>
</div>
</div>
</div>
</div>
You can of course add even more selectivity by adding more ancestors' classes.
CSS to increase svg font size custom
I am working with a svg element as follows and I am using css to control the font-size of the svg text.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
</g>
</g>
</g>
</g>
</svg>
However, when I increase the font-size, e.g.
.tick>text{
font-size: xx-large;
}
it changes to this
Is there anyway I can have the font-size increased, yet the text would be aligned to the green line? like below
As an alternative, I tried following
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
</g>
</g>
</g>
</g>
</svg>
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
but it is not applying the scaling from the desired origin.
Try positioning your test at x="0" instead of x="-3".
Also remove the transform and test-anchor="middle/end" attributes.
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">60%</text>
</g>
</g>
</g>
</g>
</svg>
Problem making SVG shapes responsive on mobile and tablet
I have a bunch of SVG shapes(Hexagones) that render perfectly
on desktop screen. However when the screen is reduced to tablet and mobile
some of the hexagones do not render properly.
I have tried with media query but still not responsive.
BTW this snippet html is made manually so it has a bunch of duplicate code
with different x,y positions for hexagone, so do not be scared a lot of html codes.
I would appreciate any help.
body {
background-color: #333;
font-family: 'Luckiest Guy', cursive;
}
#hexGrid {
width: 80vw;
height: 80vh;
}
#media (max-width : 600px) {
#hexGrid {
width:84vw;
height: 100vh;
}
}
<svg id="hexGrid">
<svg viewBox="0 0 200 200">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
</g>
</defs>
</svg>
<!--ODD COLUMNS-->
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
<text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
<text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
<text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
<text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
<text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
<text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
<text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
<text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
<text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
<text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
<text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
<text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
<text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
<text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
<text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I3</text>
</g>
</svg>
<!--EVEN COLUMNS-->
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
<text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
<text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
<text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
<text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
<text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
<text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
<text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
<text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
<text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
<text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
<text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
<text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
<text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
<text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
<text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
<text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H4</text>
</g>
</svg>
</svg>
I think the issue is to maintain the correct aspect ratio of the view box of the outer, parent SVG regardless of the window aspect ratio.
body {
background-color: #333;
font-family: 'Luckiest Guy', cursive;
}
#hexGrid {
width: 100%;
height: 100%;
}
#media (max-width : 600px) {
#hexGrid {
width: 100%;
height: 100%;
}
}
<svg id="hexGrid" viewBox="0 0 2000 1000">
<svg viewBox="0 0 200 200">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
</g>
</defs>
</svg>
<!--ODD COLUMNS-->
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
<text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
<text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
<text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
<text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
<text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
<text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
<text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
<text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g >
<use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
<text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
<text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
<text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
<text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
<text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
<text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
<text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I3</text>
</g>
</svg>
<!--EVEN COLUMNS-->
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
<text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
<text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
<text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
<text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
<text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
<text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
<text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
<text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
<text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
<text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
<text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
<text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F4</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
<text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H1</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
<text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H2</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
<text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H3</text>
</g>
</svg>
<svg viewBox="0 0 200 200">
<g>
<use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
<text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H4</text>
</g>
</svg>
</svg>
First, i'm not sure it's a good practice to use nested SVG... (Edit: After some research it's seems not a bad practice...)
And your issue is related to viewbox of SVG. You can try with following viewbox: <svg viewBox="0 0 290 200">
And you can safely remove nested SVG
#hexGrid {
width: 80vw;
height: 80vh;
}
body {
background-color: #666;
font-family: 'Luckiest Guy', cursive;
}
<svg id="hexGrid" viewBox="0 0 290 200">
<defs>
<g id="pod">
<polygon stroke="#ffffff" stroke-width=".5" points="7.43,-12.41 -8.11,-12.39 -15.87,1.07 -8.09,14.52 7.45,14.51 15.21,1.05" />
</g>
</defs>
<!--ODD COLUMNS-->
<g >
<use xlink:href="#pod" transform="translate(50, 94.5)" fill="transparent" />
<text transform="translate(50, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A1</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(50, 121.5)" fill="transparent" />
<text transform="translate(50, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A2</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(50, 148.5)" fill="transparent" />
<text transform="translate(50, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">A3</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(97, 94.5)" fill="transparent" />
<text transform="translate(97, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C1</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(97, 121.5)" fill="transparent" />
<text transform="translate(97, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(97, 148.5)" fill="transparent" />
<text transform="translate(97, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">C3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(144, 94.5)" fill="transparent" />
<text transform="translate(144, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E1</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(144, 121.5)" fill="transparent" />
<text transform="translate(144, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E2</text>
</g>
<g >
<use xlink:href="#pod" transform="translate(144, 148.5)" fill="transparent" />
<text transform="translate(144, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">E3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(191, 94.5)" fill="transparent" />
<text transform="translate(191, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(191, 121.5)" fill="transparent" />
<text transform="translate(191, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(191, 148.5)" fill="transparent" />
<text transform="translate(191, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">G3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(238, 94.5)" fill="transparent" />
<text transform="translate(238, 94.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(238, 121.5)" fill="transparent" />
<text transform="translate(238, 121.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(238, 148.5)" fill="transparent" />
<text transform="translate(238, 148.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">I3</text>
</g>
<!--EVEN COLUMNS-->
<g>
<use xlink:href="#pod" transform="translate(73.52, 54.5)" fill="transparent" />
<text transform="translate(73.52, 54.54)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(73.52, 81.5)" fill="transparent" />
<text transform="translate(73.52, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(73.52, 108.5)" fill="transparent" />
<text transform="translate(73.52, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(73.52, 135.5)" fill="transparent" />
<text transform="translate(73.52, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">B4</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 54.5)" fill="transparent" />
<text transform="translate(120.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 81.5)" fill="transparent" />
<text transform="translate(120.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 108.5)" fill="transparent" />
<text transform="translate(120.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(120.5, 135.5)" fill="transparent" />
<text transform="translate(120.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">D4</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 54.5)" fill="transparent" />
<text transform="translate(167.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 81.5)" fill="transparent" />
<text transform="translate(167.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 108.5)" fill="transparent" />
<text transform="translate(167.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(167.5, 135.5)" fill="transparent" />
<text transform="translate(167.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">F4</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 54.5)" fill="transparent" />
<text transform="translate(214.5, 54.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H1</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 81.5)" fill="transparent" />
<text transform="translate(214.5, 81.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H2</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 108.5)" fill="transparent" />
<text transform="translate(214.5, 108.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H3</text>
</g>
<g>
<use xlink:href="#pod" transform="translate(214.5, 135.5)" fill="transparent" />
<text transform="translate(214.5, 135.5)" text-anchor="middle" alignment-baseline="middle"
font-weight="bold" font-size="8" fill="white">H4</text>
</g>
</svg>
Animate SVG Circles with Transform Origin
I'm trying to animate 3x Individual Circles within one SVG. I've got them to animate, but they have moved position into the top left corner. This happened when I added the following CSS:
.payment svg * {
transform-origin: center; /* or transform-origin: 50% */
transform-box: fill-box;
}
<div class="payment">
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
<animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform>
</g>
</g>
</g>
</g>
</svg>
</div>
But without the above CSS, they do not stay in the same position and rotate.
Does anyone know how to keep them in the same position and rotate 360 without moving?
<svg width="689px" height="370px" viewBox="0 0 689 370" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 62 (91390) - https://sketch.com -->
<title>Circles</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
<stop stop-color="#454545" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" stroke="url(#linearGradient-1)">
<g id="Circles" transform="translate(1.000000, 1.000000)">
<g id="mini" transform="translate(0.000000, 60.000000)" opacity="0.50042" stroke-dasharray="3" transform="rotate(360)">
<path d="M127,254 C197.140163,254 254,197.140163 254,127 C254,56.8598368 197.140163,0 127,0 C56.8598368,0 0,56.8598368 0,127 C0,197.140163 56.8598368,254 127,254 Z" id="Oval"></path>
</g>
<g id="small" transform="translate(135.000000, 30.000000)" opacity="0.5" stroke-dasharray="6,10" transform="rotate(360)">
<path d="M154,308 C239.051851,308 308,239.051851 308,154 C308,68.9481485 239.051851,0 154,0 C68.9481485,0 0,68.9481485 0,154 C0,239.051851 68.9481485,308 154,308 Z" id="Oval-Copy-3"></path>
</g>
<g id="large" transform="translate(319.000000, 0.000000)" opacity="0.5" stroke-dasharray="16,10" transform="rotate(360)">
<path d="M184,368 C285.620394,368 368,285.620394 368,184 C368,82.379606 285.620394,0 184,0 C82.379606,0 0,82.379606 0,184 C0,285.620394 82.379606,368 184,368 Z" id="Oval-Copy-4"></path>
</g>
</g>
</g>
</g>
</svg>
main idea - rotation around origin(0,0) before translation: <svg viewBox="-200 -100 400 200" width=90vw> <defs> <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1"> <stop stop-color="#454545" offset="0%"></stop> <stop stop-color="#FFFFFF" offset="100%"></stop> </linearGradient> </defs> <g stroke-width="1" fill="none"> <g stroke="url(#linearGradient-1)"> <g opacity="0.5" stroke-dasharray="3" transform="translate(-100,0)" > <circle r="80" > <animateTransform attributeName="transform" attributeType="XML" dur="15s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform> </circle> </g> <g stroke-dasharray="6,10"> <circle r="90"> <animateTransform attributeName="transform" attributeType="XML" dur="25s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform> </circle> </g> <g opacity="0.5" stroke-dasharray="16,10" transform="translate(100,0)"> <circle r="100"> <animateTransform attributeName="transform" attributeType="XML" dur="35s" repeatCount="indefinite" type="rotate" values="0;360" calcMode="linear"></animateTransform> </circle> </g> </g> </g> </svg>
Animating SVG with CSS ideas?
I'm working on some animation where I first create the svg files in Illustrator then i'm trying to animate them with css or some library ( anime.js) .
I run in to a problem where I don't know how to hide the code and make it visible only in the screen.
#keyframes scrolling {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-400px);
}
}
.code {
animation: scrolling 5s linear infinite;
}
/* colors */
body{
display: flex;
justify-content: center;
background-color: #111116;
}
.st0 {
opacity: 0.17;
}
.st1 {
fill: #56aeec;
}
.st2 {
fill: #2c65cc;
}
.st3 {
fill: #2984d6;
}
.st4 {
fill: #ccccff;
}
.st5 {
fill: #8dfcff;
}
.st6 {
fill: #38e0eb;
}
.st7 {
fill: #e0fa09;
}
.st8 {
fill: #ff49a5;
}
.st9 {
fill: #ff3333;
}
.st10 {
fill: #00ff66;
}
.st11 {
fill: #ff6666;
}
.st12 {
fill: #ff66cc;
}
<svg width="180" height="375" viewBox="0 0 180 375">
<g class="code">
<path class="st4" d="M107.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C108.8,313.1,108.3,313.6,107.7,313.6z"/>
<path class="st5" d="M161,319.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C162.1,319.1,161.6,319.6,161,319.6z"/>
<path class="st4" d="M51.7,319.6H36.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h14.8c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,319.1,52.3,319.6,51.7,319.6z"/>
<path class="st4" d="M134.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C135.8,313.1,135.3,313.6,134.7,313.6z"/>
<path class="st5" d="M120.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C121.8,313.1,121.3,313.6,120.7,313.6z"/>
<path class="st5" d="M147.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C148.8,313.1,148.3,313.6,147.7,313.6z"/>
<path class="st4" d="M160.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C161.8,313.1,161.3,313.6,160.7,313.6z"/>
<path class="st6" d="M51.7,313.6H16.7c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,313.1,52.3,313.6,51.7,313.6z"/>
<path class="st5" d="M95.6,313.6H60.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C96.7,313.1,96.2,313.6,95.6,313.6z"/>
<path class="st4" d="M28.6,319.6H16.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h11.9c0.6,0,1.2,0.5,1.2,1.2l0,0C29.7,319.1,29.2,319.6,28.6,319.6z"/>
<path class="st6" d="M25.2,330.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,329.8,26,330.5,25.2,330.5z"/>
<path class="st6" d="M25.2,337.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,336.8,26,337.5,25.2,337.5z"/>
<path class="st6" d="M25.2,344.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,343.8,26,344.5,25.2,344.5z"/>
<path class="st7" d="M35.2,351.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,350.8,36,351.5,35.2,351.5z"/>
<path class="st8" d="M35.2,358.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,357.8,36,358.5,35.2,358.5z"/>
<path class="st9" d="M35.2,365.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,364.8,36,365.5,35.2,365.5z"/>
<path class="st9" d="M60.2,330.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,329.8,61,330.5,60.2,330.5z"/>
<path class="st8" d="M60.2,337.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,336.8,61,337.5,60.2,337.5z"/>
<path class="st7" d="M60.2,344.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,343.8,61,344.5,60.2,344.5z"/>
<path class="st6" d="M60.2,351.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,350.8,61,351.5,60.2,351.5z"/>
<path class="st6" d="M60.2,358.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,357.8,61,358.5,60.2,358.5z"/>
<path class="st6" d="M60.2,365.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,364.8,61,365.5,60.2,365.5z"/>
<path class="st6" d="M92.2,330.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,329.8,93,330.5,92.2,330.5z"/>
<path class="st6" d="M92.2,337.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,336.8,93,337.5,92.2,337.5z"/>
<path class="st6" d="M92.2,344.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,343.8,93,344.5,92.2,344.5z"/>
<path class="st7" d="M82.2,351.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,350.8,83,351.5,82.2,351.5z"/>
<path class="st8" d="M82.2,358.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,357.8,83,358.5,82.2,358.5z"/>
<path class="st9" d="M82.2,365.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,364.8,83,365.5,82.2,365.5z"/>
<path class="st9" d="M117.2,330.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,329.8,118,330.5,117.2,330.5z"/>
<path class="st8" d="M117.2,337.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,336.8,118,337.5,117.2,337.5z"/>
<path class="st7" d="M117.2,344.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,343.8,118,344.5,117.2,344.5z"/>
<path class="st6" d="M117.2,351.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,350.8,118,351.5,117.2,351.5z"/>
<path class="st6" d="M117.2,358.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,357.8,118,358.5,117.2,358.5z"/>
<path class="st6" d="M117.2,365.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,364.8,118,365.5,117.2,365.5z"/>
<path class="st10" d="M156,329h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,328.7,156.4,329,156,329z"/>
<path class="st8" d="M156,334.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,334.6,156.4,334.9,156,334.9z"/>
<path class="st10" d="M156,340.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,340.6,156.4,340.9,156,340.9z"/>
<path class="st7" d="M156,346.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,346.5,156.4,346.8,156,346.8z"/>
<path class="st10" d="M156,352.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,352.5,156.4,352.8,156,352.8z"/>
<path class="st9" d="M156,358.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,358.4,156.4,358.7,156,358.7z"/>
<path class="st10" d="M156,364.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,364.4,156.4,364.7,156,364.7z"/>
<path class="st9" d="M35.2,371.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,370.8,36,371.5,35.2,371.5z"/>
<path class="st6" d="M60.2,371.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,370.8,61,371.5,60.2,371.5z"/>
<path class="st9" d="M82.2,371.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,370.8,83,371.5,82.2,371.5z"/>
<path class="st6" d="M117.2,371.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,370.8,118,371.5,117.2,371.5z"/>
<path class="st10" d="M156,370.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,370.4,156.4,370.7,156,370.7z"/>
<path class="st5" d="M126,224.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C127.1,224.1,126.6,224.6,126,224.6z"/>
<path class="st6" d="M75.8,217.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,216.8,76.7,217.5,75.8,217.5z"/>
<path class="st6" d="M21.7,224.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,224.1,22.3,224.6,21.7,224.6z"/>
<path class="st7" d="M64.6,231H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,230.7,65,231,64.6,231z"/>
<path class="st7" d="M64.6,236.9H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,236.6,65,236.9,64.6,236.9z"/>
<path class="st7" d="M64.6,242.8H16.2c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7v0C65.3,242.4,65,242.8,64.6,242.8z"/>
<path class="st10" d="M64.6,248.6H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,248.3,65,248.6,64.6,248.6z"/>
<path class="st7" d="M23.6,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C24.3,254.2,23.9,254.5,23.6,254.5z"/>
<path class="st7" d="M36.4,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C37.2,254.2,36.8,254.5,36.4,254.5z"/>
<path class="st7" d="M49.3,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C50.1,254.2,49.7,254.5,49.3,254.5z"/>
<path class="st7" d="M62.2,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C62.9,254.2,62.6,254.5,62.2,254.5z"/>
<path class="st7" d="M75.1,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C75.8,254.2,75.5,254.5,75.1,254.5z"/>
<path class="st7" d="M88,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H88c0.4,0,0.7,0.3,0.7,0.7l0,0C88.7,254.2,88.4,254.5,88,254.5z"/>
<path class="st7" d="M64.6,260.4H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,260.1,65,260.4,64.6,260.4z"/>
<path class="st11" d="M164.1,235.8h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,235.4,164.7,235.8,164.1,235.8z"/>
<path class="st11" d="M130.7,242.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,242.2,131.3,242.7,130.7,242.7z"/>
<path class="st11" d="M164.1,242.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,242.2,164.7,242.7,164.1,242.7z"/>
<path class="st7" d="M164.1,260.9h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,260.5,164.7,260.9,164.1,260.9z"/>
<path class="st10" d="M164.1,266.2h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,265.7,164.7,266.2,164.1,266.2z"/>
<path class="st5" d="M30.9,289.1H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,288.6,31.4,289.1,30.9,289.1z"/>
<path class="st5" d="M30.9,285H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,284.5,31.4,285,30.9,285z"/>
<path class="st5" d="M30.9,280.8H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,280.4,31.4,280.8,30.9,280.8z"/>
<path class="st5" d="M30.9,276.7H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,276.3,31.4,276.7,30.9,276.7z"/>
<path class="st10" d="M53.3,276.7H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,276.3,53.9,276.7,53.3,276.7z"/>
<path class="st10" d="M43.3,285H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,284.5,43.9,285,43.3,285z"/>
<path class="st10" d="M53.3,280.8H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,280.4,53.9,280.8,53.3,280.8z"/>
<path class="st10" d="M43.3,289.1H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,288.6,43.9,289.1,43.3,289.1z"/>
<path class="st10" d="M62.3,285H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,284.5,62.9,285,62.3,285z"/>
<path class="st10" d="M62.3,289.1H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,288.6,62.9,289.1,62.3,289.1z"/>
<path class="st10" d="M71.3,276.7H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,276.3,71.9,276.7,71.3,276.7z"/>
<path class="st10" d="M71.3,280.8H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,280.4,71.9,280.8,71.3,280.8z"/>
<path class="st11" d="M130.7,247.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,247.2,131.3,247.7,130.7,247.7z"/>
<path class="st11" d="M164.1,247.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,247.2,164.7,247.7,164.1,247.7z"/>
<path class="st8" d="M134,276h-30c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h30c0.4,0,0.7,0.3,0.7,0.7l0,0C134.7,275.7,134.4,276,134,276z"/>
<path class="st7" d="M163.6,280.9h-43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h43.2c0.4,0,0.7,0.3,0.7,0.7l0,0C164.3,280.6,164,280.9,163.6,280.9z"/>
<path class="st8" d="M143.2,284.8h-39c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h39c0.4,0,0.7,0.3,0.7,0.7l0,0C143.9,284.4,143.6,284.8,143.2,284.8z"/>
<path class="st8" d="M162.7,288.6h-35.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h35.2c0.4,0,0.7,0.3,0.7,0.7l0,0C163.4,288.3,163.1,288.6,162.7,288.6z"/>
<path class="st8" d="M164,271.4h-59.8c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H164c0.4,0,0.7,0.3,0.7,0.7l0,0C164.7,271.1,164.4,271.4,164,271.4z"/>
<path class="st4" d="M21.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,137.1,22.3,137.6,21.7,137.6z"/>
<path class="st5" d="M160,144.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C161.1,144.1,160.6,144.6,160,144.6z"/>
<path class="st6" d="M75.8,151.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,150.8,76.7,151.5,75.8,151.5z"/>
<path class="st6" d="M48.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,144.1,49.3,144.6,48.7,144.6z"/>
<path class="st4" d="M48.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,137.1,49.3,137.6,48.7,137.6z"/>
<path class="st5" d="M34.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,137.1,35.3,137.6,34.7,137.6z"/>
<path class="st5" d="M61.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C62.8,137.1,62.3,137.6,61.7,137.6z"/>
<path class="st4" d="M74.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C75.8,137.1,75.3,137.6,74.7,137.6z"/>
<path class="st6" d="M111.6,137.6H80.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.9c0.6,0,1.2,0.5,1.2,1.2l0,0C112.7,137.1,112.2,137.6,111.6,137.6z"/>
<path class="st5" d="M159.6,137.6h-34.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,137.1,160.2,137.6,159.6,137.6z"/>
<path class="st6" d="M34.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,144.1,35.3,144.6,34.7,144.6z"/>
<path class="st8" d="M75.8,157.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,156.8,76.7,157.5,75.8,157.5z"/>
<path class="st6" d="M34.2,164.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,163.8,35,164.5,34.2,164.5z"/>
<path class="st6" d="M34.2,171.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,170.8,35,171.5,34.2,171.5z"/>
<path class="st6" d="M34.2,178.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,177.8,35,178.5,34.2,178.5z"/>
<path class="st6" d="M34.2,185.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,184.8,35,185.5,34.2,185.5z"/>
<path class="st6" d="M34.2,192.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,191.8,35,192.5,34.2,192.5z"/>
<path class="st5" d="M159.6,163.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,163.3,160.2,163.9,159.6,163.9z"/>
<path class="st12" d="M59.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,170.3,60.2,170.9,59.6,170.9z"/>
<path class="st12" d="M73.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,170.3,74.2,170.9,73.6,170.9z"/>
<path class="st5" d="M159.6,177.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,177.3,160.2,177.9,159.6,177.9z"/>
<path class="st11" d="M59.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,184.3,60.2,184.9,59.6,184.9z"/>
<path class="st11" d="M73.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,184.3,74.2,184.9,73.6,184.9z"/>
<path class="st5" d="M159.6,191.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,191.3,160.2,191.9,159.6,191.9z"/>
<path class="st7" d="M59.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,198.3,60.2,198.9,59.6,198.9z"/>
<path class="st7" d="M73.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,198.3,74.2,198.9,73.6,198.9z"/>
<path class="st9" d="M34.2,199.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,198.8,35,199.5,34.2,199.5z"/>
<path class="st11" d="M110.6,184.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.6c0.6,0,1.2,0.5,1.2,1.2l0,0C111.7,184.3,111.2,184.9,110.6,184.9z"/>
<path class="st7" d="M87.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C88.7,198.3,88.2,198.9,87.6,198.9z"/>
<path class="st7" d="M101.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C102.7,198.3,102.2,198.9,101.6,198.9z"/>
<path class="st12" d="M117.6,170.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h37.6c0.6,0,1.2,0.5,1.2,1.2l0,0C118.7,170.3,118.2,170.9,117.6,170.9z"/>
<path class="st10" d="M159.1,170.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,170.3,159.7,170.9,159.1,170.9z"/>
<circle class="st9" cx="17.6" cy="128.7" r="1.9"/>
<circle class="st7" cx="25.2" cy="128.7" r="1.9"/>
<circle class="st10" cx="32.8" cy="128.7" r="1.9"/>
<path class="st10" d="M159.1,184.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,184.3,159.7,184.9,159.1,184.9z"/>
<path class="st10" d="M159.1,198.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,198.3,159.7,198.9,159.1,198.9z"/>
<path class="st7" d="M75,130H43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H75c0.4,0,0.7,0.3,0.7,0.7l0,0C75.7,129.7,75.4,130,75,130z"/>
<path class="st7" d="M112,130H80.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H112c0.4,0,0.7,0.3,0.7,0.7l0,0C112.7,129.7,112.4,130,112,130z"/>
</g>
<g class="screen">
<g class="st0">
<polygon class="st1" points="172.2,71.1 172.2,53.5 118.6,107.1 136.2,107.1"/>
<polygon class="st1" points="79.9,107.1 172.2,14.8 172.2,8.7 131.2,8.7 32.8,107.1"/>
<polygon class="st1" points="6,51.5 6,91.3 88.6,8.7 48.8,8.7"/>
</g>
<path class="st2" d="M175.2,123.9H5c-2.8,0-5-2.3-5-5v-6.2c0-2.8,2.3-5,5-5h170.1c2.8,0,5,2.3,5,5v6.2C180.2,121.6,178,123.9,175.2,123.9z"/>
<path class="st3" d="M175.2,0H5C2.3,0,0,2.3,0,5v105.2h180.2V5C180.2,2.3,178,0,175.2,0z M172.2,107.1H6V8.7h166.2V107.1z"/>
</g>
</svg>
I'm able to modify the SVG and I'm open for any ideas.
Link to my jsfiddle
Add svg into a div and set the height and overflow:hidden.
#keyframes scrolling {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-400px);
}
}
.code {
animation: scrolling 5s linear infinite;
}
.svg-container {
height:124px;
width:180px;
overflow:hidden;
}
/* colors */
body{
display: flex;
justify-content: center;
background-color: #111116;
}
.st0 {
opacity: 0.17;
}
.st1 {
fill: #56aeec;
}
.st2 {
fill: #2c65cc;
}
.st3 {
fill: #2984d6;
}
.st4 {
fill: #ccccff;
}
.st5 {
fill: #8dfcff;
}
.st6 {
fill: #38e0eb;
}
.st7 {
fill: #e0fa09;
}
.st8 {
fill: #ff49a5;
}
.st9 {
fill: #ff3333;
}
.st10 {
fill: #00ff66;
}
.st11 {
fill: #ff6666;
}
.st12 {
fill: #ff66cc;
}
<div class="svg-container">
<svg width="180" height="375" viewBox="0 0 180 375">
<g class="code">
<path class="st4" d="M107.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C108.8,313.1,108.3,313.6,107.7,313.6z"/>
<path class="st5" d="M161,319.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C162.1,319.1,161.6,319.6,161,319.6z"/>
<path class="st4" d="M51.7,319.6H36.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h14.8c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,319.1,52.3,319.6,51.7,319.6z"/>
<path class="st4" d="M134.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C135.8,313.1,135.3,313.6,134.7,313.6z"/>
<path class="st5" d="M120.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C121.8,313.1,121.3,313.6,120.7,313.6z"/>
<path class="st5" d="M147.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C148.8,313.1,148.3,313.6,147.7,313.6z"/>
<path class="st4" d="M160.7,313.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C161.8,313.1,161.3,313.6,160.7,313.6z"/>
<path class="st6" d="M51.7,313.6H16.7c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C52.8,313.1,52.3,313.6,51.7,313.6z"/>
<path class="st5" d="M95.6,313.6H60.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C96.7,313.1,96.2,313.6,95.6,313.6z"/>
<path class="st4" d="M28.6,319.6H16.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h11.9c0.6,0,1.2,0.5,1.2,1.2l0,0C29.7,319.1,29.2,319.6,28.6,319.6z"/>
<path class="st6" d="M25.2,330.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,329.8,26,330.5,25.2,330.5z"/>
<path class="st6" d="M25.2,337.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,336.8,26,337.5,25.2,337.5z"/>
<path class="st6" d="M25.2,344.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C26.7,343.8,26,344.5,25.2,344.5z"/>
<path class="st7" d="M35.2,351.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,350.8,36,351.5,35.2,351.5z"/>
<path class="st8" d="M35.2,358.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,357.8,36,358.5,35.2,358.5z"/>
<path class="st9" d="M35.2,365.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,364.8,36,365.5,35.2,365.5z"/>
<path class="st9" d="M60.2,330.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,329.8,61,330.5,60.2,330.5z"/>
<path class="st8" d="M60.2,337.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,336.8,61,337.5,60.2,337.5z"/>
<path class="st7" d="M60.2,344.5H42c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,343.8,61,344.5,60.2,344.5z"/>
<path class="st6" d="M60.2,351.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,350.8,61,351.5,60.2,351.5z"/>
<path class="st6" d="M60.2,358.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,357.8,61,358.5,60.2,358.5z"/>
<path class="st6" d="M60.2,365.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,364.8,61,365.5,60.2,365.5z"/>
<path class="st6" d="M92.2,330.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,329.8,93,330.5,92.2,330.5z"/>
<path class="st6" d="M92.2,337.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,336.8,93,337.5,92.2,337.5z"/>
<path class="st6" d="M92.2,344.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C93.7,343.8,93,344.5,92.2,344.5z"/>
<path class="st7" d="M82.2,351.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,350.8,83,351.5,82.2,351.5z"/>
<path class="st8" d="M82.2,358.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,357.8,83,358.5,82.2,358.5z"/>
<path class="st9" d="M82.2,365.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,364.8,83,365.5,82.2,365.5z"/>
<path class="st9" d="M117.2,330.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,329.8,118,330.5,117.2,330.5z"/>
<path class="st8" d="M117.2,337.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,336.8,118,337.5,117.2,337.5z"/>
<path class="st7" d="M117.2,344.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,343.8,118,344.5,117.2,344.5z"/>
<path class="st6" d="M117.2,351.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,350.8,118,351.5,117.2,351.5z"/>
<path class="st6" d="M117.2,358.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,357.8,118,358.5,117.2,358.5z"/>
<path class="st6" d="M117.2,365.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,364.8,118,365.5,117.2,365.5z"/>
<path class="st10" d="M156,329h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,328.7,156.4,329,156,329z"/>
<path class="st8" d="M156,334.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,334.6,156.4,334.9,156,334.9z"/>
<path class="st10" d="M156,340.9h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,340.6,156.4,340.9,156,340.9z"/>
<path class="st7" d="M156,346.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,346.5,156.4,346.8,156,346.8z"/>
<path class="st10" d="M156,352.8h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,352.5,156.4,352.8,156,352.8z"/>
<path class="st9" d="M156,358.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,358.4,156.4,358.7,156,358.7z"/>
<path class="st10" d="M156,364.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,364.4,156.4,364.7,156,364.7z"/>
<path class="st9" d="M35.2,371.5H17c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5l0,0C36.7,370.8,36,371.5,35.2,371.5z"/>
<path class="st6" d="M60.2,371.5h-8c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8c0.8,0,1.5,0.7,1.5,1.5l0,0C61.7,370.8,61,371.5,60.2,371.5z"/>
<path class="st9" d="M82.2,371.5H74c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h8.3c0.8,0,1.5,0.7,1.5,1.5l0,0C83.7,370.8,83,371.5,82.2,371.5z"/>
<path class="st6" d="M117.2,371.5h-18c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h18c0.8,0,1.5,0.7,1.5,1.5l0,0C118.7,370.8,118,371.5,117.2,371.5z"/>
<path class="st10" d="M156,370.7h-23.6c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H156c0.4,0,0.7,0.3,0.7,0.7l0,0C156.7,370.4,156.4,370.7,156,370.7z"/>
<path class="st5" d="M126,224.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C127.1,224.1,126.6,224.6,126,224.6z"/>
<path class="st6" d="M75.8,217.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,216.8,76.7,217.5,75.8,217.5z"/>
<path class="st6" d="M21.7,224.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,224.1,22.3,224.6,21.7,224.6z"/>
<path class="st7" d="M64.6,231H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,230.7,65,231,64.6,231z"/>
<path class="st7" d="M64.6,236.9H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,236.6,65,236.9,64.6,236.9z"/>
<path class="st7" d="M64.6,242.8H16.2c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7v0C65.3,242.4,65,242.8,64.6,242.8z"/>
<path class="st10" d="M64.6,248.6H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,248.3,65,248.6,64.6,248.6z"/>
<path class="st7" d="M23.6,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C24.3,254.2,23.9,254.5,23.6,254.5z"/>
<path class="st7" d="M36.4,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C37.2,254.2,36.8,254.5,36.4,254.5z"/>
<path class="st7" d="M49.3,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C50.1,254.2,49.7,254.5,49.3,254.5z"/>
<path class="st7" d="M62.2,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C62.9,254.2,62.6,254.5,62.2,254.5z"/>
<path class="st7" d="M75.1,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h7.4c0.4,0,0.7,0.3,0.7,0.7l0,0C75.8,254.2,75.5,254.5,75.1,254.5z"/>
<path class="st7" d="M88,254.5h-7.4c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H88c0.4,0,0.7,0.3,0.7,0.7l0,0C88.7,254.2,88.4,254.5,88,254.5z"/>
<path class="st7" d="M64.6,260.4H16.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h48.4c0.4,0,0.7,0.3,0.7,0.7l0,0C65.3,260.1,65,260.4,64.6,260.4z"/>
<path class="st11" d="M164.1,235.8h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,235.4,164.7,235.8,164.1,235.8z"/>
<path class="st11" d="M130.7,242.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,242.2,131.3,242.7,130.7,242.7z"/>
<path class="st11" d="M164.1,242.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,242.2,164.7,242.7,164.1,242.7z"/>
<path class="st7" d="M164.1,260.9h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,260.5,164.7,260.9,164.1,260.9z"/>
<path class="st10" d="M164.1,266.2h-59.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h59.4c0.6,0,1,0.5,1,1l0,0C165.1,265.7,164.7,266.2,164.1,266.2z"/>
<path class="st5" d="M30.9,289.1H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,288.6,31.4,289.1,30.9,289.1z"/>
<path class="st5" d="M30.9,285H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,284.5,31.4,285,30.9,285z"/>
<path class="st5" d="M30.9,280.8H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,280.4,31.4,280.8,30.9,280.8z"/>
<path class="st5" d="M30.9,276.7H16.7c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h14.2c0.6,0,1,0.5,1,1l0,0C31.9,276.3,31.4,276.7,30.9,276.7z"/>
<path class="st10" d="M53.3,276.7H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,276.3,53.9,276.7,53.3,276.7z"/>
<path class="st10" d="M43.3,285H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,284.5,43.9,285,43.3,285z"/>
<path class="st10" d="M53.3,280.8H49c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C54.3,280.4,53.9,280.8,53.3,280.8z"/>
<path class="st10" d="M43.3,289.1H39c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C44.3,288.6,43.9,289.1,43.3,289.1z"/>
<path class="st10" d="M62.3,285H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,284.5,62.9,285,62.3,285z"/>
<path class="st10" d="M62.3,289.1H58c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C63.3,288.6,62.9,289.1,62.3,289.1z"/>
<path class="st10" d="M71.3,276.7H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,276.3,71.9,276.7,71.3,276.7z"/>
<path class="st10" d="M71.3,280.8H67c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h4.3c0.6,0,1,0.5,1,1l0,0C72.3,280.4,71.9,280.8,71.3,280.8z"/>
<path class="st11" d="M130.7,247.7h-26c-0.6,0-1-0.5-1-1v0c0-0.6,0.5-1,1-1h26c0.6,0,1,0.5,1,1v0C131.7,247.2,131.3,247.7,130.7,247.7z"/>
<path class="st11" d="M164.1,247.7h-27.4c-0.6,0-1-0.5-1-1l0,0c0-0.6,0.5-1,1-1h27.4c0.6,0,1,0.5,1,1l0,0C165.1,247.2,164.7,247.7,164.1,247.7z"/>
<path class="st8" d="M134,276h-30c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h30c0.4,0,0.7,0.3,0.7,0.7l0,0C134.7,275.7,134.4,276,134,276z"/>
<path class="st7" d="M163.6,280.9h-43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h43.2c0.4,0,0.7,0.3,0.7,0.7l0,0C164.3,280.6,164,280.9,163.6,280.9z"/>
<path class="st8" d="M143.2,284.8h-39c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h39c0.4,0,0.7,0.3,0.7,0.7l0,0C143.9,284.4,143.6,284.8,143.2,284.8z"/>
<path class="st8" d="M162.7,288.6h-35.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7h35.2c0.4,0,0.7,0.3,0.7,0.7l0,0C163.4,288.3,163.1,288.6,162.7,288.6z"/>
<path class="st8" d="M164,271.4h-59.8c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H164c0.4,0,0.7,0.3,0.7,0.7l0,0C164.7,271.1,164.4,271.4,164,271.4z"/>
<path class="st4" d="M21.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C22.8,137.1,22.3,137.6,21.7,137.6z"/>
<path class="st5" d="M160,144.6h-94c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h94c0.6,0,1.2,0.5,1.2,1.2l0,0C161.1,144.1,160.6,144.6,160,144.6z"/>
<path class="st6" d="M75.8,151.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,150.8,76.7,151.5,75.8,151.5z"/>
<path class="st6" d="M48.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,144.1,49.3,144.6,48.7,144.6z"/>
<path class="st4" d="M48.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C49.8,137.1,49.3,137.6,48.7,137.6z"/>
<path class="st5" d="M34.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,137.1,35.3,137.6,34.7,137.6z"/>
<path class="st5" d="M61.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C62.8,137.1,62.3,137.6,61.7,137.6z"/>
<path class="st4" d="M74.7,137.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C75.8,137.1,75.3,137.6,74.7,137.6z"/>
<path class="st6" d="M111.6,137.6H80.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.9c0.6,0,1.2,0.5,1.2,1.2l0,0C112.7,137.1,112.2,137.6,111.6,137.6z"/>
<path class="st5" d="M159.6,137.6h-34.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h34.9c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,137.1,160.2,137.6,159.6,137.6z"/>
<path class="st6" d="M34.7,144.6h-6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h6c0.6,0,1.2,0.5,1.2,1.2l0,0C35.8,144.1,35.3,144.6,34.7,144.6z"/>
<path class="st8" d="M75.8,157.5H16c-0.8,0-1.5-0.7-1.5-1.5l0,0c0-0.8,0.7-1.5,1.5-1.5h59.9c0.8,0,1.5,0.7,1.5,1.5l0,0C77.3,156.8,76.7,157.5,75.8,157.5z"/>
<path class="st6" d="M34.2,164.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,163.8,35,164.5,34.2,164.5z"/>
<path class="st6" d="M34.2,171.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,170.8,35,171.5,34.2,171.5z"/>
<path class="st6" d="M34.2,178.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,177.8,35,178.5,34.2,178.5z"/>
<path class="st6" d="M34.2,185.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,184.8,35,185.5,34.2,185.5z"/>
<path class="st6" d="M34.2,192.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,191.8,35,192.5,34.2,192.5z"/>
<path class="st5" d="M159.6,163.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,163.3,160.2,163.9,159.6,163.9z"/>
<path class="st12" d="M59.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,170.3,60.2,170.9,59.6,170.9z"/>
<path class="st12" d="M73.6,170.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,170.3,74.2,170.9,73.6,170.9z"/>
<path class="st5" d="M159.6,177.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,177.3,160.2,177.9,159.6,177.9z"/>
<path class="st11" d="M59.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,184.3,60.2,184.9,59.6,184.9z"/>
<path class="st11" d="M73.6,184.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,184.3,74.2,184.9,73.6,184.9z"/>
<path class="st5" d="M159.6,191.9H50.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h108.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.7,191.3,160.2,191.9,159.6,191.9z"/>
<path class="st7" d="M59.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C60.7,198.3,60.2,198.9,59.6,198.9z"/>
<path class="st7" d="M73.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C74.7,198.3,74.2,198.9,73.6,198.9z"/>
<path class="st9" d="M34.2,199.5H16c-0.8,0-1.5-0.7-1.5-1.5v0c0-0.8,0.7-1.5,1.5-1.5h18.3c0.8,0,1.5,0.7,1.5,1.5v0C35.7,198.8,35,199.5,34.2,199.5z"/>
<path class="st11" d="M110.6,184.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h30.6c0.6,0,1.2,0.5,1.2,1.2l0,0C111.7,184.3,111.2,184.9,110.6,184.9z"/>
<path class="st7" d="M87.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C88.7,198.3,88.2,198.9,87.6,198.9z"/>
<path class="st7" d="M101.6,198.9h-8.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h8.6c0.6,0,1.2,0.5,1.2,1.2l0,0C102.7,198.3,102.2,198.9,101.6,198.9z"/>
<path class="st12" d="M117.6,170.9H79.9c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h37.6c0.6,0,1.2,0.5,1.2,1.2l0,0C118.7,170.3,118.2,170.9,117.6,170.9z"/>
<path class="st10" d="M159.1,170.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,170.3,159.7,170.9,159.1,170.9z"/>
<circle class="st9" cx="17.6" cy="128.7" r="1.9"/>
<circle class="st7" cx="25.2" cy="128.7" r="1.9"/>
<circle class="st10" cx="32.8" cy="128.7" r="1.9"/>
<path class="st10" d="M159.1,184.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,184.3,159.7,184.9,159.1,184.9z"/>
<path class="st10" d="M159.1,198.9h-4.6c-0.6,0-1.2-0.5-1.2-1.2l0,0c0-0.6,0.5-1.2,1.2-1.2h4.6c0.6,0,1.2,0.5,1.2,1.2l0,0C160.2,198.3,159.7,198.9,159.1,198.9z"/>
<path class="st7" d="M75,130H43.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H75c0.4,0,0.7,0.3,0.7,0.7l0,0C75.7,129.7,75.4,130,75,130z"/>
<path class="st7" d="M112,130H80.2c-0.4,0-0.7-0.3-0.7-0.7l0,0c0-0.4,0.3-0.7,0.7-0.7H112c0.4,0,0.7,0.3,0.7,0.7l0,0C112.7,129.7,112.4,130,112,130z"/>
</g>
<g class="screen">
<g class="st0">
<polygon class="st1" points="172.2,71.1 172.2,53.5 118.6,107.1 136.2,107.1"/>
<polygon class="st1" points="79.9,107.1 172.2,14.8 172.2,8.7 131.2,8.7 32.8,107.1"/>
<polygon class="st1" points="6,51.5 6,91.3 88.6,8.7 48.8,8.7"/>
</g>
<path class="st2" d="M175.2,123.9H5c-2.8,0-5-2.3-5-5v-6.2c0-2.8,2.3-5,5-5h170.1c2.8,0,5,2.3,5,5v6.2C180.2,121.6,178,123.9,175.2,123.9z"/>
<path class="st3" d="M175.2,0H5C2.3,0,0,2.3,0,5v105.2h180.2V5C180.2,2.3,178,0,175.2,0z M172.2,107.1H6V8.7h166.2V107.1z"/>
</g>
</svg>
</div>