我的一个图形朋友请我帮忙制作带有动作的动态 svg 屏幕。为了实现这一点，我考虑过使用 JS，并且能够采取必要的措施。svg 屏幕的另一个规格是宽度等于 700 像素，高度等于 1000 像素。
出现的问题是在scoll阶段。我描述了问题...屏幕是垂直放置的，因此您需要向下滚动页面，然后在每个单独的屏幕上执行操作。
我要达到的目标是确保一旦完成单个屏幕上的操作，当前屏幕自动消失，并通过向下滚动页面显示下一个屏幕。所以我创建了一个解胶函数，设置scrollY (1000)属性并向下移动页面。我遇到的问题是我无法理解它的来源，例如，在第一个屏幕上完成操作后（通过单击闪烁的文本），我到达第二个但它没有居中。
我想在整个第一个屏幕消失并且可以看到整个第二个屏幕的时候。此外，一旦您到达最后一个并完成操作，我应该能够返回到第一个屏幕。
您有什么建议或意见吗？
如果我只发布了前两个屏幕，那么 Soffy，但我已经超过了单个答案的代码限制。
链接到 codepen 进行测试：codepen html 代码 via codepen.io：
// FUNZIONI DELLA SCHERMATA 1
// gruppo funzioni per far flashare la scritta 'Tap To'
function changeClass() {
var cerchio = document.getElementById("tap_to2");
setTimeout(() => {
cerchio.style.opacity = "1"
}, 600);
setTimeout(() => {
changeClass2()
}, 1450)
}
function changeClass2() {
var cerchio = document.getElementById("tap_to2");
cerchio.style.opacity = "0"
setTimeout(() => {
changeClass()
}, 600);
}
window.onload = function changeClassLoad() {
changeClass2();
}
// fine del gruppo funzioni per far flashare la scritta 'Tap To'
//funzione per far scrollare in basso al click
function scrolla() {
console.log('Sono la funzione scrolla');
scrollTo();
}
// FUNZIONI DELLA SCHERMATA 2
var azione_scritta = false;
//fill della scritta in arancione
function fillOrange() {
var f = document.getElementById("F");
f.style.fill = "orange";
var o = document.getElementById("O");
o.style.fill = "orange";
var r = document.getElementById("R");
r.style.fill = "orange";
var m = document.getElementById("M");
m.style.fill = "orange";
var a = document.getElementById("A");
a.style.fill = "orange";
azione_scritta = true;
if (azione_discesa === true) {
setTimeout(() => {
scrollTo()
}, 2000);
}
}
var counter = 0;
var azione_discesa = false;
//funzione per far scendere le lampade
function discesalampade() {
//controlliamo quante volte siamo passati sui cerchi
//se diverso da zero almeno una volta siamo passati su uno dei cerchi e quindi l'animazione è completa
if (counter === 0) {
//codice per far scendere le lampade
var l = document.getElementById("Lampade");
l.style.transform = "translate(40px, -70px)";
//codice per accendere le luci
accendiLampade();
counter++;
azione_discesa = true;
if (azione_scritta === true) {
setTimeout(() => {
scrollTo()
}, 2000);
}
}
}
function rimpicciolisci4() {
var c_4 = document.getElementById("c4");
c_4.setAttribute("r", "61");
}
function ingrandisci4() {
var c_1 = document.getElementById("c4");
setTimeout(() => {
c_1.setAttribute("r", "81")
}, 500);
}
function rimpicciolisci3() {
var c_3 = document.getElementById("c3");
c_3.setAttribute("r", "61");
}
function ingrandisci3() {
var c_3 = document.getElementById("c3");
setTimeout(() => {
c_3.setAttribute("r", "81")
}, 500);
}
function rimpicciolisci2() {
var c_2 = document.getElementById("c2");
c_2.setAttribute("r", "61");
}
function ingrandisci2() {
var c_2 = document.getElementById("c2");
setTimeout(() => {
c_2.setAttribute("r", "81")
}, 500);
}
function rimpicciolisci1() {
var c_1 = document.getElementById("c1");
c_1.setAttribute("r", "61");
}
function ingrandisci1() {
var c_1 = document.getElementById("c1");
setTimeout(() => {
c_1.setAttribute("r", "81")
}, 500);
}
function accendiLampade() {
var luci = document.getElementById("luci");
luci.setAttribute("opacity", "1");
setTimeout(() => {
spegniLampade()
}, 500);
}
function spegniLampade() {
var luci = document.getElementById("luci");
luci.setAttribute("opacity", "0");
setTimeout(() => {
accendiLampade()
}, 500);
}
//funzione per scrollare la pagina
function scrollTo() {
$('.slider').css('transform', 'translateY(' + -1000 + 'px');
}
//funzione per tornare a kartell una volta arrivati alla fine
function scrollToTop() {
$('.slider').css('transform', 'translateY(' + 2500 + 'px');
}.wrapper {
position: fixed;
}
.slider {
width: 700px;
}
.slide {
height: 1000px;
width: 700px;
display: block;
float: left;
}
body {
height: 1000px;
width: 700px;
}<div class="wrapper">
<div class="slider">
<!-- Schermata 1 -->
<div class="slide">
<!-- Schermata 1 -->
<svg id="tapTo" viewBox="0 0 700 1000">
<g id="sfondo1">
<rect width="700" height="1000" fill="#fff" />
</g>
<g id="Kartell" transform="translate(107,384)">
<path
d="M0,0H26.51V19q0,7.95-.31,15.36t-.62,12.09L68.93,0h31.82L56,46.63,103.56,116h-31L37.12,63.48,26.51,74.55V116H0Z"
fill="red" />
<path
d="M163.14,116a15.05,15.05,0,0,1-1.72-4,30.13,30.13,0,0,1-1.09-6.16H160a30.55,30.55,0,0,1-9.75,9q-5.7,3.28-15.36,3.28a37.66,37.66,0,0,1-11.31-1.64,26.76,26.76,0,0,1-9-4.76,20.83,20.83,0,0,1-5.92-7.87,26.44,26.44,0,0,1-2.11-10.84,22.74,22.74,0,0,1,2.58-11.39A20.74,20.74,0,0,1,116,74.39a34.34,34.34,0,0,1,10.29-4.29,100,100,0,0,1,12.79-2.26q11.07-1.56,16-3.74T160,57.24a9.4,9.4,0,0,0-3-7.26q-3-2.71-9.35-2.72-7,0-10.53,3a11.36,11.36,0,0,0-4,8H110.58a25.84,25.84,0,0,1,9.35-19.1A33.68,33.68,0,0,1,131.32,33a51.31,51.31,0,0,1,16.06-2.27,70,70,0,0,1,13.73,1.17,31.5,31.5,0,0,1,10.14,3.83,22.92,22.92,0,0,1,9.59,10.05,33.74,33.74,0,0,1,3,14.74v42.58q0,9.51,3.12,11.54V116Zm-20.59-13.88q8.26,0,13.18-4.52a14.82,14.82,0,0,0,4.91-11.38V75.48a22.24,22.24,0,0,1-6.47,2.73q-3.82,1-7.88,2-8.11,1.73-12,4.21t-3.9,8q0,5.46,3.59,7.64A16.14,16.14,0,0,0,142.55,102.15Z"
fill="red" />
<path
d="M224,47.88h.47q4-8.73,9.67-12.48a23.64,23.64,0,0,1,13.41-3.74,14.46,14.46,0,0,1,5.14.62V53.65H252a29.8,29.8,0,0,0-5.15-.47q-10-.15-16,6t-6,18.32V116H200.41v-83H224Z"
fill="red" />
<path
d="M261.07,33.06h12.48V6.55h24V33.06h16.22v15.6H297.57V89.83q0,4.68,2.41,6.32a12.06,12.06,0,0,0,6.79,1.64c.83,0,1.77,0,2.81-.08s2-.13,2.8-.24h1.25v18.25q-2,.32-5.61.78a67.93,67.93,0,0,1-8.58.47,51,51,0,0,1-10.53-1,20.78,20.78,0,0,1-8.19-3.59,17,17,0,0,1-5.3-6.71,25.54,25.54,0,0,1-1.87-10.52V48.66H261.07Z"
fill="red" />
<path
d="M366.5,118.53a47.48,47.48,0,0,1-18.25-3.35,40.2,40.2,0,0,1-13.8-9.28A40.68,40.68,0,0,1,325.72,92a48.08,48.08,0,0,1-3-17.31,47.59,47.59,0,0,1,3.11-17.39,42.35,42.35,0,0,1,8.74-14,39.9,39.9,0,0,1,13.41-9.28,46.57,46.57,0,0,1,33.3-.55,40.43,40.43,0,0,1,12.55,7.8,41,41,0,0,1,10.3,17,70.1,70.1,0,0,1,3.12,22.46H346.69q1.24,9.36,6.24,14.66t13.88,5.3a18.74,18.74,0,0,0,9.44-2.11,14.4,14.4,0,0,0,5.69-6h23.71a33.84,33.84,0,0,1-4.92,10.22,34.64,34.64,0,0,1-8.26,8.26A38.44,38.44,0,0,1,381,116.58,50.66,50.66,0,0,1,366.5,118.53ZM365.25,48q-8.42,0-12.79,5t-5.61,13.56h35.4q-.62-8.73-5.15-13.64A15.32,15.32,0,0,0,365.25,48Z"
fill="red" />
<path d="M419.84,0h24.64V116H419.84Z" fill="red" />
<path d="M461.17,0h24.64V116H461.17Z" fill="red" />
</g>
<g transform="translate(192,571)" onload="changeClassLoad()">
<g id="Livello_2" data-name="Livello 2">
<g id="tap_to2" data-name="tap to">
<path onclick="scrolla()" d="M.5.5H36V5.9H21.32V45.14H15.14V5.9H.5Z" fill="#fff" stroke="red"
stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M44.42,45.8a15.66,15.66,0,0,1-4.29-.57,10.11,10.11,0,0,1-3.48-1.71,8,8,0,0,1-2.31-2.85,9.09,9.09,0,0,1-.84-4.05,9.53,9.53,0,0,1,1-4.62,7.5,7.5,0,0,1,2.82-2.88,15.63,15.63,0,0,1,4.38-1.68,49.78,49.78,0,0,1,5.67-1A31.22,31.22,0,0,0,50.6,26a10.14,10.14,0,0,0,2.46-.81,4,4,0,0,0,1.56-1.29,3.51,3.51,0,0,0,.54-2,5.14,5.14,0,0,0-1.77-4.14,7.73,7.73,0,0,0-5.13-1.5q-3.84,0-5.73,1.68a6.16,6.16,0,0,0-2,4.56h-5.4a10.11,10.11,0,0,1,.9-3.9,9.77,9.77,0,0,1,2.46-3.3A11.83,11.83,0,0,1,42.53,13a17.36,17.36,0,0,1,5.67-.84,20.52,20.52,0,0,1,4.26.42A12,12,0,0,1,56,13.88a8.31,8.31,0,0,1,3.18,3.36,11.48,11.48,0,0,1,1.14,5.4V37.7A5.11,5.11,0,0,0,61,40.58q.66,1,2.76.48H64V45q-.6.18-1.29.33a8.22,8.22,0,0,1-1.71.15,5.53,5.53,0,0,1-3.9-1.23,6.75,6.75,0,0,1-1.8-3.81h-.06a14.3,14.3,0,0,1-1.8,2,12.16,12.16,0,0,1-2.34,1.71,12.81,12.81,0,0,1-3,1.2A14,14,0,0,1,44.42,45.8Zm1.38-4.08A9.94,9.94,0,0,0,50,40.91a9.39,9.39,0,0,0,2.94-2,8.34,8.34,0,0,0,2.31-5.61V28a12,12,0,0,1-3.15,1.35,38.63,38.63,0,0,1-3.93.93q-2,.36-3.6.75a9.69,9.69,0,0,0-2.76,1.08A5.09,5.09,0,0,0,40,33.83a5.25,5.25,0,0,0-.63,2.73,5.3,5.3,0,0,0,.54,2.55,4.42,4.42,0,0,0,1.44,1.59,5.41,5.41,0,0,0,2.07.81A13.39,13.39,0,0,0,45.8,41.72Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M68.54,12.92h5.52v5h.18a13.71,13.71,0,0,1,4.29-4.29,11.18,11.18,0,0,1,6-1.53,13.29,13.29,0,0,1,5.61,1.17,12.37,12.37,0,0,1,4.38,3.36A15.83,15.83,0,0,1,97.34,22a23,23,0,0,1,1,7.11,23.83,23.83,0,0,1-1,7,15.41,15.41,0,0,1-2.79,5.34,12.39,12.39,0,0,1-4.44,3.42,13.84,13.84,0,0,1-5.85,1.2,12.73,12.73,0,0,1-5.88-1.32,11,11,0,0,1-4.26-3.9H74q.06.84.09,2.19t0,3.21v9.78H68.54ZM83.72,41.48a7.92,7.92,0,0,0,3.9-.93A8.1,8.1,0,0,0,90.41,38a12,12,0,0,0,1.68-3.87,19.88,19.88,0,0,0,.57-4.89,21.32,21.32,0,0,0-.54-4.92,11.88,11.88,0,0,0-1.65-3.93,7.71,7.71,0,0,0-6.69-3.51,9.57,9.57,0,0,0-4.44,1,8.75,8.75,0,0,0-3.09,2.64,11.67,11.67,0,0,0-1.83,3.93,18.69,18.69,0,0,0-.6,4.83A20.38,20.38,0,0,0,74.36,34a10.86,10.86,0,0,0,1.74,3.9,8.6,8.6,0,0,0,3.06,2.61A9.86,9.86,0,0,0,83.72,41.48Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M118.28,12.92h5V2.78h5.52V12.92h6.66v4.32h-6.66V37.58a2.76,2.76,0,0,0,.87,2.37,4.08,4.08,0,0,0,2.43.63,8.42,8.42,0,0,0,1.53-.15q.81-.15,1.29-.27h.18v4.68a19.48,19.48,0,0,1-4.5.54,9.12,9.12,0,0,1-5.28-1.53q-2-1.47-2-5V17.24h-5Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M155.06,46a15.73,15.73,0,0,1-6.57-1.32,14.51,14.51,0,0,1-5-3.63,16.48,16.48,0,0,1-3.15-5.4,20.18,20.18,0,0,1,0-13.2,16.48,16.48,0,0,1,3.15-5.4,14.51,14.51,0,0,1,5-3.63,15.73,15.73,0,0,1,6.57-1.32,15.53,15.53,0,0,1,6.54,1.32,14.59,14.59,0,0,1,4.92,3.63,16.07,16.07,0,0,1,3.12,5.4,20.71,20.71,0,0,1,0,13.2,16.07,16.07,0,0,1-3.12,5.4,14.59,14.59,0,0,1-4.92,3.63A15.53,15.53,0,0,1,155.06,46ZM155,41.48a9.48,9.48,0,0,0,4.35-1,9,9,0,0,0,3.15-2.64A11.76,11.76,0,0,0,164.39,34a19.18,19.18,0,0,0,0-9.75,12.08,12.08,0,0,0-1.89-4,8.83,8.83,0,0,0-3.15-2.67,10.34,10.34,0,0,0-8.7,0,8.83,8.83,0,0,0-3.15,2.67,12.08,12.08,0,0,0-1.89,4,19.18,19.18,0,0,0,0,9.75,11.76,11.76,0,0,0,1.89,3.93,9,9,0,0,0,3.15,2.64A9.48,9.48,0,0,0,155,41.48Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M205,46.1q-6.72,0-10.38-2.91a10.53,10.53,0,0,1-4-7.83h5.64a7.11,7.11,0,0,0,1,2.94,6.16,6.16,0,0,0,1.95,1.92,8.56,8.56,0,0,0,2.67,1.05,15.07,15.07,0,0,0,3.24.33q3.84,0,5.55-1.47a4.6,4.6,0,0,0,1.71-3.63,3.78,3.78,0,0,0-2.07-3.69A25.84,25.84,0,0,0,204,30.92q-2.34-.48-4.53-1.08a14.6,14.6,0,0,1-3.84-1.62,7.76,7.76,0,0,1-2.64-2.7,8.42,8.42,0,0,1-1-4.32,7.92,7.92,0,0,1,3.09-6.57q3.09-2.43,8.73-2.43,6.06,0,9.18,2.58a10.14,10.14,0,0,1,3.66,6.78H211a5.53,5.53,0,0,0-2.13-3.84,8.72,8.72,0,0,0-5.25-1.32q-3.3,0-4.77,1.32a4.13,4.13,0,0,0-1.47,3.18A3.51,3.51,0,0,0,198,23a4.29,4.29,0,0,0,1.68,1.35,12.54,12.54,0,0,0,2.7.9q1.59.36,3.63.78,2.4.48,4.56,1.08a13.51,13.51,0,0,1,3.81,1.68A7.78,7.78,0,0,1,217,31.61a9.59,9.59,0,0,1,1,4.59,9.29,9.29,0,0,1-1,4.32,8.64,8.64,0,0,1-2.67,3.09,12.33,12.33,0,0,1-4.11,1.86A20.52,20.52,0,0,1,205,46.1Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M221.36,12.92h5V2.78h5.52V12.92h6.66v4.32h-6.66V37.58a2.76,2.76,0,0,0,.87,2.37,4.08,4.08,0,0,0,2.43.63,8.42,8.42,0,0,0,1.53-.15q.81-.15,1.29-.27h.18v4.68a19.48,19.48,0,0,1-4.5.54,9.12,9.12,0,0,1-5.28-1.53q-2-1.47-2-5V17.24h-5Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M254,45.8a15.66,15.66,0,0,1-4.29-.57,10.11,10.11,0,0,1-3.48-1.71,8,8,0,0,1-2.31-2.85,9.09,9.09,0,0,1-.84-4.05,9.53,9.53,0,0,1,1-4.62,7.5,7.5,0,0,1,2.82-2.88,15.63,15.63,0,0,1,4.38-1.68,49.78,49.78,0,0,1,5.67-1,31.22,31.22,0,0,0,3.24-.48,10.14,10.14,0,0,0,2.46-.81,4,4,0,0,0,1.56-1.29,3.51,3.51,0,0,0,.54-2A5.14,5.14,0,0,0,263,17.72a7.73,7.73,0,0,0-5.13-1.5q-3.84,0-5.73,1.68a6.16,6.16,0,0,0-2,4.56h-5.4a10.11,10.11,0,0,1,.9-3.9,9.77,9.77,0,0,1,2.46-3.3A11.83,11.83,0,0,1,252.11,13a17.36,17.36,0,0,1,5.67-.84,20.52,20.52,0,0,1,4.26.42,12,12,0,0,1,3.54,1.32,8.31,8.31,0,0,1,3.18,3.36,11.48,11.48,0,0,1,1.14,5.4V37.7a5.11,5.11,0,0,0,.66,2.88q.66,1,2.76.48h.24V45q-.6.18-1.29.33a8.22,8.22,0,0,1-1.71.15,5.53,5.53,0,0,1-3.9-1.23,6.75,6.75,0,0,1-1.8-3.81h-.06a14.3,14.3,0,0,1-1.8,2,12.16,12.16,0,0,1-2.34,1.71,12.81,12.81,0,0,1-3,1.2A14,14,0,0,1,254,45.8Zm1.38-4.08a9.94,9.94,0,0,0,4.17-.81,9.39,9.39,0,0,0,2.94-2,8.34,8.34,0,0,0,2.31-5.61V28a12,12,0,0,1-3.15,1.35,38.63,38.63,0,0,1-3.93.93q-2,.36-3.6.75a9.69,9.69,0,0,0-2.76,1.08,5.09,5.09,0,0,0-1.77,1.74,5.25,5.25,0,0,0-.63,2.73,5.3,5.3,0,0,0,.54,2.55,4.42,4.42,0,0,0,1.44,1.59,5.41,5.41,0,0,0,2.07.81A13.39,13.39,0,0,0,255.38,41.72Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M283.64,18.74h.18a12.87,12.87,0,0,1,3.9-4.53,9.47,9.47,0,0,1,5.64-1.71,5.78,5.78,0,0,1,1.11.09,6,6,0,0,1,.93.27v5.28h-.18a6.7,6.7,0,0,0-1.08-.24,10,10,0,0,0-1.2-.06,9.23,9.23,0,0,0-3.54.69,8.89,8.89,0,0,0-2.94,1.95,9.36,9.36,0,0,0-2,3.06,10.52,10.52,0,0,0-.75,4.08V45.14h-5.58V12.92h5.52Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
<path onclick="scrolla()"
d="M298.88,12.92h5V2.78h5.52V12.92h6.66v4.32h-6.66V37.58a2.76,2.76,0,0,0,.87,2.37,4.08,4.08,0,0,0,2.43.63,8.42,8.42,0,0,0,1.53-.15q.81-.15,1.29-.27h.18v4.68a19.48,19.48,0,0,1-4.5.54A9.12,9.12,0,0,1,306,43.85q-2-1.47-2-5V17.24h-5Z"
fill="#fff" stroke="red" stroke-miterlimit="10" />
</g>
</g>
</g>
</svg>
</div>
<!-- Schermata 2 -->
<div class="slide">
<!-- Schermata 2 -->
<svg viewBox="0 0 700 1000">
<g id="sfondo2">
<rect width="700" height="1000" fill="#758991" />
</g>
<g onclick="fillOrange()" id="forma_blu" transform="translate(50,850)">
<path id="F" d="M0,0H71.62V19H22.3V40.27H63.48V58.5H22.3V97.59H0Z" fill="blue" />
<path id="O"
d="M111,99.81A39.49,39.49,0,0,1,95.75,97,34,34,0,0,1,76.6,77.45,40,40,0,0,1,74,62.83,40.07,40.07,0,0,1,76.6,48.2,34,34,0,0,1,95.75,28.66a42.1,42.1,0,0,1,30.3,0,33.92,33.92,0,0,1,11.61,7.8,35.21,35.21,0,0,1,7.41,11.74,40.28,40.28,0,0,1,2.62,14.63,40.22,40.22,0,0,1-2.62,14.62,35,35,0,0,1-7.41,11.74A33.78,33.78,0,0,1,126.05,97,39.14,39.14,0,0,1,111,99.81Zm-.14-15a13.46,13.46,0,0,0,11.87-6.1q4.14-6.09,4.14-15.93T122.7,46.69a13.44,13.44,0,0,0-11.87-6.16q-7.86,0-11.93,6.16T94.83,62.83q0,9.84,4.07,15.93T110.83,84.86Z"
fill="blue" />
<path id="R"
d="M177.86,40.27h.39q3.42-7.35,8.14-10.5a19.89,19.89,0,0,1,11.28-3.14,12,12,0,0,1,4.32.52v18h-.52a25.15,25.15,0,0,0-4.33-.39q-8.4-.13-13.44,5.05t-5.06,15.41v32.4H158.05V27.81h19.81Z"
fill="blue" />
<path id="M"
d="M211.83,27.81h19.8V38.69h.4a25.59,25.59,0,0,1,8.46-9.57A22.48,22.48,0,0,1,253,25.84q13.77,0,19.15,13.25h.26q4.33-7.08,9.91-10.17a24.94,24.94,0,0,1,12.26-3.08q11.67,0,17.58,7t5.9,18.69v46H297.61V55c0-3.85-.9-6.84-2.69-9a9.44,9.44,0,0,0-7.67-3.21,10.41,10.41,0,0,0-8.73,4.2q-3.21,4.2-3.21,10.88V97.59H254.72V55c0-3.85-.85-6.84-2.56-9s-4.26-3.21-7.67-3.21A10.58,10.58,0,0,0,235.7,47q-3.28,4.2-3.28,10.88V97.59H211.83Z"
fill="blue" />
<path id="A"
d="M375.91,97.59a12.61,12.61,0,0,1-1.44-3.35,25.18,25.18,0,0,1-.92-5.18h-.26a25.66,25.66,0,0,1-8.2,7.61q-4.79,2.74-12.92,2.75A31.59,31.59,0,0,1,342.66,98a22.37,22.37,0,0,1-7.61-4,17.49,17.49,0,0,1-5-6.62,22.35,22.35,0,0,1-1.77-9.12,19.19,19.19,0,0,1,2.16-9.57,17.62,17.62,0,0,1,5.84-6.17A28.9,28.9,0,0,1,345,59a82.18,82.18,0,0,1,10.76-1.9q9.32-1.32,13.44-3.15t4.14-5.77a7.9,7.9,0,0,0-2.5-6.1q-2.49-2.3-7.86-2.3-5.91,0-8.86,2.49a9.56,9.56,0,0,0-3.34,6.69h-19a21.76,21.76,0,0,1,7.87-16.06,28.26,28.26,0,0,1,9.57-5.12,43.19,43.19,0,0,1,13.51-1.9,59.46,59.46,0,0,1,11.55,1A26.45,26.45,0,0,1,382.73,30a19.33,19.33,0,0,1,8.07,8.46,28.32,28.32,0,0,1,2.55,12.39V86.7q0,8,2.63,9.7v1.19ZM358.6,85.91q6.94,0,11.08-3.8a12.49,12.49,0,0,0,4.13-9.58V63.48a18.77,18.77,0,0,1-5.44,2.3c-2.14.57-4.35,1.11-6.63,1.64q-6.81,1.44-10.1,3.54t-3.27,6.69q0,4.59,3,6.42A13.57,13.57,0,0,0,358.6,85.91Z"
fill="blue" />
</g>
<defs>
<radialGradient id="Sfumatura_senza_nome_19" cx="34" cy="77" r="34" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="0.1" stop-color="#fff" stop-opacity="0.98" />
<stop offset="0.23" stop-color="#fff" stop-opacity="0.92" />
<stop offset="0.36" stop-color="#fff" stop-opacity="0.83" />
<stop offset="0.5" stop-color="#fff" stop-opacity="0.69" />
<stop offset="0.65" stop-color="#fff" stop-opacity="0.52" />
<stop offset="0.8" stop-color="#fff" stop-opacity="0.31" />
<stop offset="0.96" stop-color="#fff" stop-opacity="0.07" />
<stop offset="1" stop-color="#fff" stop-opacity="0" />
</radialGradient>
<radialGradient id="Sfumatura_senza_nome_19-2" cx="183" cy="202" xlink:href="#Sfumatura_senza_nome_19" />
<radialGradient id="Sfumatura_senza_nome_19-3" cx="309" cy="34" xlink:href="#Sfumatura_senza_nome_19" />
<radialGradient id="Sfumatura_senza_nome_19-4" cx="513" cy="98" xlink:href="#Sfumatura_senza_nome_19" />
</defs>
<!-- luci -->
<g id="luci" opacity="0" transform="translate(80,150)">
<circle cx="34" cy="77" r="34" fill="url(#Sfumatura_senza_nome_19)" />
<circle cx="183" cy="202" r="34" fill="url(#Sfumatura_senza_nome_19-2)" />
<circle cx="309" cy="34" r="34" fill="url(#Sfumatura_senza_nome_19-3)" />
<circle cx="513" cy="98" r="34" fill="url(#Sfumatura_senza_nome_19-4)" />
</g>
<g id="Lampade" style="transform: translate(40px, -600px);"">
<path d=" M567.39,308.5a13,13,0,1,1-2.49-7.62A12.8,12.8,0,0,1,567.39,308.5Z" fill="#fff" />
<path
d="M565.1,274.22v26.66h-.2a12.94,12.94,0,0,0-20.95,0h-.2V274.22a3.08,3.08,0,0,1,3.08-3.08H562A3.08,3.08,0,0,1,565.1,274.22Z"
fill="#000607" />
<path d="M551.38,271.14v21a1.91,1.91,0,1,1-3.81,0v-21Z" fill="#606060" />
<g opacity="0.56">
<path
d="M629.15,343.57a74.35,74.35,0,0,1-10,37.36h-.06a.6.6,0,0,0,.14-.38c0-3.15-29-5.72-64.8-5.72s-64.81,2.57-64.81,5.72a.61.61,0,0,0,.15.38h-.06a74.72,74.72,0,1,1,139.44-37.36Z"
fill="#ff5a2b" />
</g>
<g opacity="0.56">
<path
d="M619.23,380.55a.6.6,0,0,1-.14.38c-2.2,3-30.32,5.34-64.66,5.34s-62.46-2.36-64.66-5.34a.61.61,0,0,1-.15-.38c0-3.15,29-5.72,64.81-5.72S619.23,377.4,619.23,380.55Z"
fill="#e25a2b" />
</g>
<rect x="553.93" y="72.11" width="1" height="199.04" fill="#fff" />
<rect x="74.22" y="50.11" width="1" height="199.04" fill="#fff" />
<path d="M87.68,281.06a13,13,0,1,1-2.49-7.63A12.83,12.83,0,0,1,87.68,281.06Z" fill="#fff" />
<path
d="M85.39,246.78v26.65h-.2a12.94,12.94,0,0,0-21,0H64V246.78a3.08,3.08,0,0,1,3.08-3.08H82.31A3.08,3.08,0,0,1,85.39,246.78Z"
fill="#000607" />
<path d="M71.67,243.7v21a1.91,1.91,0,1,1-3.81,0v-21Z" fill="#606060" />
<g opacity="0.56">
<path
d="M149.44,316.13a74.38,74.38,0,0,1-10,37.36h-.06a.62.62,0,0,0,.14-.39c0-3.15-29-5.71-64.8-5.71S9.91,350,9.91,353.1a.64.64,0,0,0,.15.39H10a74.72,74.72,0,1,1,139.44-37.36Z"
fill="#00ff05" />
</g>
<g opacity="0.56">
<path
d="M139.52,353.1a.62.62,0,0,1-.14.39c-2.2,3-30.32,5.33-64.66,5.33s-62.46-2.35-64.66-5.33a.64.64,0,0,1-.15-.39c0-3.15,29-5.71,64.81-5.71S139.52,350,139.52,353.1Z"
fill="#00a100" />
</g>
<rect x="222.84" width="1" height="386" fill="#fff" />
<path d="M236.3,402.28a13,13,0,1,1-25.92,0,13,13,0,0,1,25.92,0Z" fill="#fff" />
<path
d="M234,368v26.66h-.19a12.94,12.94,0,0,0-20.95,0h-.2V368a3.08,3.08,0,0,1,3.08-3.08h15.18A3.08,3.08,0,0,1,234,368Z"
fill="#000607" />
<path d="M220.29,364.92v21a1.91,1.91,0,1,1-3.81,0v-21Z" fill="#606060" />
<g opacity="0.56">
<path
d="M298.06,437.35a74.35,74.35,0,0,1-10,37.36H288a.61.61,0,0,0,.15-.38c0-3.16-29-5.72-64.81-5.72s-64.81,2.56-64.81,5.72a.61.61,0,0,0,.15.38h-.06a74.72,74.72,0,1,1,139.44-37.36Z"
fill="#ff0" />
</g>
<g opacity="0.56">
<path
d="M288.15,474.33a.61.61,0,0,1-.15.38c-2.2,3-30.31,5.34-64.66,5.34s-62.46-2.36-64.66-5.34a.61.61,0,0,1-.15-.38c0-3.16,29-5.72,64.81-5.72S288.15,471.17,288.15,474.33Z"
fill="#e7e800" />
</g>
<rect x="349.71" y="13.11" width="1" height="199.04" fill="#fff" />
<path d="M363.17,237.6a13,13,0,1,1-2.49-7.63A13,13,0,0,1,363.17,237.6Z" fill="#fff" />
<path
d="M360.88,203.32V230h-.2a13,13,0,0,0-20.95,0h-.2V203.32a3.08,3.08,0,0,1,3.08-3.08H357.8A3.08,3.08,0,0,1,360.88,203.32Z"
fill="#000607" />
<path d="M347.16,200.24v21a1.91,1.91,0,0,1-3.81,0v-21Z" fill="#606060" />
<g opacity="0.56">
<path
d="M424.93,272.67a74.38,74.38,0,0,1-10,37.36h-.06a.6.6,0,0,0,.14-.38c0-3.16-29-5.72-64.8-5.72s-64.81,2.56-64.81,5.72a.61.61,0,0,0,.15.38h-.06a74.72,74.72,0,1,1,139.44-37.36Z"
fill="blue" />
</g>
<g opacity="0.56">
<path
d="M415,309.65a.6.6,0,0,1-.14.38c-2.2,3-30.32,5.33-64.66,5.33S287.75,313,285.55,310a.61.61,0,0,1-.15-.38c0-3.16,29-5.72,64.81-5.72S415,306.49,415,309.65Z"
fill="#0001a9" />
</g>
</g>
<g id="CERCHIO_4" onmouseover="discesalampade(), rimpicciolisci4()" onmouseleave="ingrandisci4()"
transform="translate(33,260)">
<circle id="c4" cx="82" cy="82" r="81" fill="none" stroke="#00ff05" stroke-miterlimit="10" stroke-width="2"
opacity="0.56" />
</g>
<g id="CERCHIO_3" onmouseover="discesalampade(), rimpicciolisci3()" onmouseleave="ingrandisci3()"
transform="translate(182,390)">
<circle id="c3" cx="82" cy="82" r="81" fill="none" stroke="#ff0" stroke-miterlimit="10" stroke-width="2"
opacity="0.56" />
</g>
<g id="CERCHIO_2" onmouseover="discesalampade(), rimpicciolisci2()" onmouseleave="ingrandisci2()"
transform="translate(310,220)">
<circle id="c2" cx="82" cy="82" r="81" fill="none" stroke="blue" stroke-miterlimit="10" stroke-width="2"
opacity="0.56" />
</g>
<g id="CERCHIO_1" onmouseover="discesalampade(), rimpicciolisci1()" onmouseleave="ingrandisci1()"
transform="translate(510,285)">
<circle id="c1" cx="82" cy="82" r="81" fill="none" stroke="#ff5a2b" stroke-miterlimit="10" stroke-width="2"
opacity="0.56" />
</g>
</svg>
</div>
</div>
</div>