Привет форумчанам. Имею блок, который появляется на экран с задержкой. В блоке 3 картинки PNG и надпись на SVG. Вокруг одной картинки по контуру движется надпись сделанная в SVG. После вывода на экран блока картинки PNG появляются нормально, а надпись начинает движение не сразу (задержка примерно секунды две.) Как это исправь? Как это работает смотрим тут
https://codepen.io/bsi_52/pen/dyLKggM
Вот код
<div class="hide_block2" id='ContButilka'>
<img class="butilka" src="https://habrastorage.org/webt/7i/mp/vj/7impvjl59tcl9vnfcswnorizeie.png" alt=""/>
<img class="stakan_l" src="https://habrastorage.org/webt/wr/h0/jt/wrh0jtev85sz0b8kdw5sk6pqfx4.png" alt=""/>
<img class="stakan_p" src="https://habrastorage.org/webt/wr/h0/jt/wrh0jtev85sz0b8kdw5sk6pqfx4.png" alt=""/>
<div class="text_nadpis">
<svg
id="svg1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 170 280"
width="300"
height="500"
>
<defs>
<path
id="path1"
d="m 119.81679,209.71055 -1.74551,1.62083 -1.99487,0.74808 -1.87019,0.12468 -1.74551,0.24936 h -1.74551 -1.87019 -1.37147 -0.74808 l -1.24679,0.24935 h -0.99743 l -1.74551,0.12468 -0.74808,-0.24936 h -0.37404 -0.87275 l -0.997435,-0.12467 h -1.246793 l -1.246793,-0.12468 -2.244228,-0.37404 -1.37147,-0.37404 h -0.748078 l -0.498716,-0.12468 -0.498718,-0.49872 -1.246791,-0.49871 -0.374039,-0.37404 -0.374038,-0.37404 -0.249357,-0.74808 v -0.87275 l 0.124677,-0.87275 0.12468,-0.87276 -0.12468,-1.24679 v -0.74808 -0.74808 l 0.12468,-0.49871 -0.12468,-0.6234 h -0.124677 v -0.37404 l 0.374036,-0.49871 0.374039,-1.24679 0.12468,-44.75987 0.249356,-16.8317 -0.498716,-0.99743 -0.249359,-0.87276 0.249359,-2.36891 0.12468,-1.74551 0.249359,-0.87275 0.249357,-1.37147 0.249359,-0.99744 0.997434,-1.62083 0.872755,-2.49358 0.623398,-1.62083 0.249356,-0.87276 0.498719,-1.49615 0.623395,-1.24679 0.374039,-0.87276 0.623395,-1.24679 0.374039,-1.24679 0.374039,-1.2468 0.623395,-0.99743 0.374039,-1.49615 0.12468,-0.6234 0.249356,-1.37147 0.872755,-0.99743 0.124679,-2.61827 V 85.405308 l 3.116983,-0.872754 1.87019,-0.24936 1.99487,0.24936 h 1.74551 0.87275 l 1.49615,0.623395 v 22.442271 l 7.10672,19.94869 1.37147,2.9923 0.49872,1.62083 v 1.24679 l 0.24936,2.49358 -0.12468,1.62084 -0.49872,0.37403 0.49872,63.58644 0.49872,0.49871 z"
fill="none"
stroke="none"
/>
</defs>
<text
id="txt1"
lengthAdjust="spacingAndGlyphs"
textLength="40%"
font-size="13"
font-weight="bold"
>
<textPath
id="result1"
method="align"
spacing="auto"
startOffset="-25%"
xlink:href="#path1"
>
<tspan dy="-" fill="yellow">Да наливай уже!</tspan>
<animate
id="a1"
dur="12s"
attributeName="startOffset"
values="-25%;119%"
begin="0s;a1.end+5s"
/>
</textPath>
</text>
<text
id="txt1"
lengthAdjust="spacingAndGlyphs"
textLength="40%"
font-size="13"
font-weight="bold"
>
<textPath
id="result2"
method="align"
spacing="auto"
startOffset="-25%"
xlink:href="#path1"
>
<tspan dy="-2" fill="yellow">Да наливай уже!</tspan>
<animate
id="a2"
dur="12s"
attributeName="startOffset"
values="-25%;119%"
begin="8.5s;a2.end+5s"
/>
</textPath>
</text>
</svg>
</div>
</div>
#ContButilka {
grid-row: 1;
grid-column: 1;
width: 100%;
margin-top: 30px;
margin-left: 1em;
max-width: 200px;
position: relative;
display: none;
transition: 1s; /*Скорость перехода состояния элемента*/
}
.text_nadpis {
grid-row: 1;
grid-column: 1;
position: relative;
margin-top: -35.2em;
margin-left: 20.25em;
}
.butilka {
grid-row: 1;
grid-column: 1;
transform: scale(0.85);
position: relative;
margin-top: 1em;
margin-left: 25.5em;
}
.stakan_l {
grid-row: 1;
grid-column: 1;
position: relative;
top: -6em;
margin-left:23em;
}
.stakan_p {
grid-row: 1;
grid-column: 1;
position: relative;
top: -10.6em;
margin-left:33.5em;
}
setTimeout(function() {
document.getElementById('ContButilka').style.display = 'block';
}, 3000);
Всем спасибо.
