0

Есть подобное решение

svg {
    color: #fff;
    fill: #fff;
    width: 25%;
    position: absolute;
    left: 10px;
    top: 20px;
    opacity: 1 !important;
    pointer-events: all !important;
    z-index: 10;
  }
svg foreignObject {
    height: 100%;
    width: 100%;
}
svg div {
    cursor: pointer;
    height: 36px;
    background: rgb(0, 0, 0, 77%);
    width: fit-content;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 13px 0 37px;
}
<svg viewBox='0 0 200 36' xmlns='http://www.w3.org/2000/svg'>
    <path  d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z"></path>
    <foreignObject><div>Настройки</div></foreignObject>
</svg>

В место текста 'настройки', может быть другой. Который в ширину будет шири или наоборот. Ширина задана в % и при изменении ширины блока(родителя) иконка с текстом масштабируется. Что круто...

Вопрос в том, что по вебвизору от яндекса. Текст и фон не отображается только иконка, быть может возможно иначе реализовать. Или я что та не так делаю?

Второй вопрос. Как сделать так, чтобы текст сворачивался по истечению 3 секунд, а иконка и фон оставался?

1
  • И в чем дело, не удается иконке назначить цвет, к примеру белый.
    – Aleks
    Commented 1 февр. 2023 в 19:39

1 ответ 1

0

Есть нормальный html элемент - <button type="button"> или же <a>(если там редирект по нажатию) в которые можно положить svg картинку, их можно анимировать, бот вашего яндекс тоже знает как с ними работать, и не заниматься извращениями. Вы же отдаете себе отчет, что используя элемент не за его прямым назначением вы на себя берете ответственность за его проблемы. Не стоит так делать.

button {
  position: relative;
  max-width: 198px;
  cursor: pointer;
  padding: 10px;
  background-color: #3B3B3B;
  border-radius: 10px;
  border:0;
}

button svg {
  position: absolute;
  left: 5px;
  top: 4px;
  fill: #fff;
  width: 25px;
  height: 25px;
}

button span {
  color: #fff;
  padding-left: 26px;
}
<button type="button">
  <svg viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg">
    <path d="m 23.94,18.78 c .03,-0.25 .05,-0.51 .05,-0.78 0,-0.27 -0.02,-0.52 -0.05,-0.78 l 1.68,-1.32 c .15,-0.12 .19,-0.33 .09,-0.51 l -1.6,-2.76 c -0.09,-0.17 -0.31,-0.24 -0.48,-0.17 l -1.99,.8 c -0.41,-0.32 -0.86,-0.58 -1.35,-0.78 l -0.30,-2.12 c -0.02,-0.19 -0.19,-0.33 -0.39,-0.33 l -3.2,0 c -0.2,0 -0.36,.14 -0.39,.33 l -0.30,2.12 c -0.48,.2 -0.93,.47 -1.35,.78 l -1.99,-0.8 c -0.18,-0.07 -0.39,0 -0.48,.17 l -1.6,2.76 c -0.10,.17 -0.05,.39 .09,.51 l 1.68,1.32 c -0.03,.25 -0.05,.52 -0.05,.78 0,.26 .02,.52 .05,.78 l -1.68,1.32 c -0.15,.12 -0.19,.33 -0.09,.51 l 1.6,2.76 c .09,.17 .31,.24 .48,.17 l 1.99,-0.8 c .41,.32 .86,.58 1.35,.78 l .30,2.12 c .02,.19 .19,.33 .39,.33 l 3.2,0 c .2,0 .36,-0.14 .39,-0.33 l .30,-2.12 c .48,-0.2 .93,-0.47 1.35,-0.78 l 1.99,.8 c .18,.07 .39,0 .48,-0.17 l 1.6,-2.76 c .09,-0.17 .05,-0.39 -0.09,-0.51 l -1.68,-1.32 0,0 z m -5.94,2.01 c -1.54,0 -2.8,-1.25 -2.8,-2.8 0,-1.54 1.25,-2.8 2.8,-2.8 1.54,0 2.8,1.25 2.8,2.8 0,1.54 -1.25,2.8 -2.8,2.8 l 0,0 z"></path>
  </svg>
  <span>Настройки</span>
</button>

Можно так сделать, и нормально работать с изменением CSS свойств элемента кнопки. Скрывать текст если надо, мастабировать font-size и тд.

4
  • Можно пожалуйста пример. Главная задача, чтобы соотношение сторон было при изменении ширины либо высоты, а так же размер текста менялся. Я не совсем понимаю о чем вы, ридиректа никакого нету...
    – Aleks
    Commented 1 февр. 2023 в 21:05
  • пепеделал. Не надо усложнять. У вас простая иконка, хоторую по хорошему можно найти и хорошего качества и правильного размера. Commented 1 февр. 2023 в 21:22
  • Размер шрифта не меняется при изменении ширины, относительно родителя...
    – Aleks
    Commented 2 февр. 2023 в 8:56
  • В интернете есть извращенные решения по привязке font-size к размеру родителя. Проще задать на значения ширины экрана font-size:4vw; или в связке с медиа выражениями, тогра это нормально будет отрабатывать в разных браузерах... а не только в Хроме Commented 2 февр. 2023 в 11:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.