Надпись SVG начинает движение по контуру с задержкой после вывпода блока на экран
Привет форумчанам. Имею блок, который появляется на экран с задержкой. В блоке 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); Всем спасибо. |
Часовой пояс GMT +3, время: 10:00. |