Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.04.2024, 18:32
III III вне форума
Аспирант
Отправить личное сообщение для III Посмотреть профиль Найти все сообщения от III
 
Регистрация: 08.10.2014
Сообщений: 80

Надпись 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);


Всем спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск