Как выполнить подобную анимацию, сделать проще

.svg {
    width: 50%; 
    fill: #fff; 
    border-radius: 5px;
}
.svg foreignObject {
    width: 100%;
    height: 100%;
}
.svg foreignObject > div {
    display: flex; 
    align-items: center; 
    color: #fff; 
    height: 100%;
}
.svg foreignObject > div > svg {
    height: 100%;
    background: #000000cf;
    padding: 5px;
}
.svg foreignObject > div > div {
    color: #fff;
    background: #000000cf;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 0px;
    border-radius: 0 5px 5px 0;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    animation-duration: 3s;
    animation-delay: 1s;
    animation-name: slidein;
    animation-fill-mode: both;

}

@keyframes slidein {
  from {
    width: 200px;
  }
  to {
    width: 0;
    padding: 0 0px
  }
}
<svg viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" class='svg'>
  <foreignObject>
    <div>
        <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
            <path d="M35.716 31.884a1.349 1.349 0 0 1-1.895.23L.517 6.011a1.35 1.35 0 1 1 1.667-2.125l33.252 26.05c.635.512.742 1.362.28 1.947z" fill="red"></path>
            <path d="M3.6 15.3v5.4c0 1.492 1.21 2.65 2.7 2.65h4.717l7.589 6.745c.335.349.763.506 1.196.506.25 0 .504-.052.74-.16.65-.29 1.06-.931 1.06-1.64v-2.832L4.993 12.954c-.827.461-1.392 1.283-1.392 2.346zm16.945-9.741a1.803 1.803 0 0 0-1.937.296l-6.519 5.794 9.513 7.46V7.198c0-.708-.41-1.4-1.057-1.64zm6.266 8.273a1.35 1.35 0 0 0-1.708 2.092c.634.523 1 1.277 1 2.076a2.68 2.68 0 0 1-1.002 2.075 1.35 1.35 0 0 0-.44 1.428l1.21.95c.029.001.055.018.084.018.3 0 .604-.1.854-.304A5.37 5.37 0 0 0 28.803 18c0-1.614-.726-3.128-1.992-4.168zm3.404-4.158a1.35 1.35 0 1 0-1.712 2.088c1.909 1.563 3 3.836 3 6.238 0 2.402-1.094 4.674-2.999 6.239-.059.048-.09.114-.138.17l2.126 1.666c2.355-2.067 3.711-4.987 3.711-8.075 0-3.212-1.451-6.25-3.988-8.326z"></path>
        </svg>
        <div>Включить звук</div>
    </div>
  </foreignObject>
</svg>

Настроил лесов, но получил то что необходимо. Разместил svg иконку в svg блоке, мда... Добавил html код в svg, поскольку необходимо масштабировать текст относительно блока.

Что не работает, это ширина блока с текстом. Как сделать, чтобы работала анимация когда ширина блока с текстом равна ширине текста?

В целом, как переделать весь этот лес, как выполнить проще?


Ответы (0 шт):