Задать вопрос
Astrolit
@Astrolit
надумано: умён, хитер, характер отсутствует

Не маштабируется svg в clip-path?

Добрый вечер. у меня на сайте есть модуль нижнее меню. и один центральный пунк содержит аватар картинку, выступающий вверх и обрезается формой самого меню. Я отбросил все варианты с z-index , не об этом. я создал форму svg и решил этой формой обрезать фон меню. И получилось , но на разных устройствах предпологалось масштабировать svg по ширене экрана 100vw. Вот мой файл модуля на twig:
<html>
<style>
body {
    background-color: #343434 !important;
}
div{
display: block;
}
.bottom-menu-336 {
    border-color: rgba(0, 0, 0, 1);
    background: rgba(27, 28, 29, 1);
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 1px 1px 2px rgb(0 0 0);
	}
.bottom-menu > ul > li > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    padding: 0 10px;
    min-width: 50px;
    -webkit-transition: all 0.075s ease-out;
    transition: all 0.075s ease-out;
    position: relative;
}
.bottom-menu > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
ul {
    margin-top: 0;
    margin-bottom: 10px;
}
.bottom-menu > ul > li {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
	}
.bottom-menu ul, .bottom-menu li {
    margin-top: -25px;
    padding: 0;
    list-style: none;
}
.bottom-menu>ul>li>a {
    flex-direction: column;	
}
.bottom-menu-336>ul>li>a {
    height: 50px;
    min-width: 50px;
    font-size: 9px;
    color: rgba(220, 200, 150, 1);
	text-decoration: none;
	margin-bottom: 5px;
}
.bottom-menu-336 .bottom-menu-item-5>a::before {
    content: '\ead8' !important;
    font-family: icomoon !important;
    font-size: 34px;
    color: rgba(220, 200, 150, 1);
    top: -15px;	
}
.bottom-menu > ul > li > a::before {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1.1;
    margin: 2px 0;
}
.m_avatar {
    position: fixed;
    bottom: 36px;
    margin: 0px;
    border-radius: 19px;
    padding: 0;
    width: 38px;
    height: 38px;
}
.bottom-menu  {
   clip-path: url('#shape');
}
 .bottom-menu  {
    position: fixed;
    bottom: 0;
	left:0;
    z-index: 100;
    overflow-x: auto;
    height: 82px;
    width: 100vw; }
.bottom-menu .menu-item.bottom-menu-item-6.active .links-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 5px;
}
</style>
<body>

  <div class="bottom-menu bottom-menu-336">
  <svg class="svg" width="100vw" height="82px" viewBox="0 0 100vw 82">
<clipPath id="shape">
  <path fill="black" fill-opacity="0.549020" d="M0 81.99l0 -54.18 457.77 0c6.94,-0.23 11.28,-1.66 13.74,-8.95 8.53,-25.15 48.45,-25.15 56.98,0 2.46,7.29 6.8,8.72 13.74,8.95l457.77 0 0 54.18 -1000 0z"></path>
</clipPath>
</svg>
    <ul>
              <li class="menu-item bottom-menu-item bottom-menu-item-3">
                      <a href="https://"><span class="links-text">Заказы</span></a>
                  </li>
              <li class="menu-item bottom-menu-item bottom-menu-item-4">
                      <a href="https://#.#/#"><span class="links-text">Избраное</span></a>
                  </li>
              <li class="menu-item bottom-menu-item bottom-menu-item-6 active">
                      <a href="https://#.#/#"><span class="links-text"><img src="https://i.pinimg.com/originals/c3/02/04/c30204f957f4fe37edbab59c0942444e.jpg" class="m_avatar"><br><s>день добрый
                      </s>user</span></a>
                  </li>
              <li class="menu-item bottom-menu-item bottom-menu-item-7">
                      <a href="https://#.#/#"><span class="links-text">Contact</span></a>
                  </li>
              <li class="menu-item bottom-menu-item bottom-menu-item-8">
                      <a href="https://#.#/#"><span class="links-text">Выход</span></a>
                  </li>
          </ul>
  </div> 
  </body>
  </html>

принскрины с эмуляции разных устройств и их положения:
65119f3c3b419623354926.jpeg
65119f4c934c1735470814.jpeg
65119f8d43b0d869313691.jpeg
Но этот метод не работает, помогите может есть другой путь масштабирования?
  • Вопрос задан
  • 66 просмотров
Подписаться 1 Средний 6 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы