Не маштабируется 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> |
<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>
принскрины с эмуляции разных устройств и их положения:
Но этот метод не работает, помогите может есть другой путь масштабирования?
Дополнительно:
сделайте так что бы ваш код можно было воспроизвести
<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> |
<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>
?
.bottom-menu { position: fixed; bottom: 0; z-index: 100; overflow-x: hidden; height: 82px; width: 1000px; left: 50%; transform: translateX(-50%); } |
.bottom-menu { position: fixed; bottom: 0; z-index: 100; overflow-x: hidden; height: 82px; width: 1000px; left: 50%; transform: translateX(-50%); }
Тут вставлено выравнивание по середине фиксированного блока и проставлена абсолютная ширина. Для разных разрешений можно добавить разные svg для для резки.
Ну и вставлять ненужный svg в код как-то не очень красиво. Вот такое правило
.bottom-menu { clip-path: path("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"); } |
.bottom-menu { clip-path: path("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"); }
позволяет сделать примерно то же самое. Да и менять контуры для резки меню в медиа-секции станет удобнее.
Есть более другие способы рисования всяких круглоэлементов, с помощью linear-gradient и radial-gradient. Вот тут я творчески утащил отсюда же какой-то интересный мне пример. Если не обращать внимание на "круглость" перехода от активного элемента к нективному - все, примерно, такое как тут надо.
<html > <head> <style> html, body { backgraund: #000; position: relative; margin: 0; height: 1500px; } .container { position: fixed; left:0; top:0; } #myVideo { width: 100vw; } .overlay { display: block; position: absolute; left:0px; width: 100%; height: 100%; top: 0; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script> <p class="txt" style="font-size:24px; color:dodgerblue; text-align:center"> Scroll </p> <div class="container"> <div class="bottom-menu bottom-menu-336" id="myVideo"> <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> <svg class="overlay" viewBox="0 0 100vw 100vh" preserveAspectRatio="xMidYMid slice"> <defs> <mask id="knockout" maskContentUnits="objectBoundingBox"> <rect x="0" y="0" width="1" height="1" fill="white"></rect> <g fill="black" data-0="transform: translate(0.5px,0.5px) scale(0.0003) translate(-49px,-49px);" data-250p="transform: translate(0.5px,0.5px) scale(0.04) translate(-49px,-49px);" style="transform: translate(0.5px, 0.5px) scale(0.0003) translate(-49px, -49px);" class="skrollable skrollable-between"> <path fill="black" fill-opacity="0.549020" d="M0 81.99l0 -54.18 197.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.95l197.77 0 0 54.18 -480 0z"/> </g> </mask> </defs> <rect x="0" y="0" width="100vw" height="100vh" fill="gray" mask="url(#knockout)"></rect> </svg> </div> <script> $(document).ready(function() { var s = skrollr.init(); constants: { knockout: '250p' } }) </script> </body> </html> |
<html > <head> <style> html, body { backgraund: #000; position: relative; margin: 0; height: 1500px; } .container { position: fixed; left:0; top:0; } #myVideo { width: 100vw; } .overlay { display: block; position: absolute; left:0px; width: 100%; height: 100%; top: 0; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script> <p class="txt" style="font-size:24px; color:dodgerblue; text-align:center"> Scroll </p> <div class="container"> <div class="bottom-menu bottom-menu-336" id="myVideo"> <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> <svg class="overlay" viewBox="0 0 100vw 100vh" preserveAspectRatio="xMidYMid slice"> <defs> <mask id="knockout" maskContentUnits="objectBoundingBox"> <rect x="0" y="0" width="1" height="1" fill="white"></rect> <g fill="black" data-0="transform: translate(0.5px,0.5px) scale(0.0003) translate(-49px,-49px);" data-250p="transform: translate(0.5px,0.5px) scale(0.04) translate(-49px,-49px);" style="transform: translate(0.5px, 0.5px) scale(0.0003) translate(-49px, -49px);" class="skrollable skrollable-between"> <path fill="black" fill-opacity="0.549020" d="M0 81.99l0 -54.18 197.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.95l197.77 0 0 54.18 -480 0z"/> </g> </mask> </defs> <rect x="0" y="0" width="100vw" height="100vh" fill="gray" mask="url(#knockout)"></rect> </svg> </div> <script> $(document).ready(function() { var s = skrollr.init(); constants: { knockout: '250p' } }) </script> </body> </html>
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы понять, почему не масштабируется SVG в clip-path, нужно учитывать несколько возможных причин и проверить следующие аспекты:
1. Проверьте правильность указания размеров SVG и clip-path. Убедитесь, что у SVG и clip-path заданы корректные размеры и соотношения сторон.
2. Убедитесь, что у SVG и clip-path правильно указаны координаты и размеры обрезки. Проверьте, что область обрезки в clip-path не выходит за границы SVG.
3. Проверьте, что у SVG и clip-path правильно указаны единицы измерения. Убедитесь, что все размеры заданы в одной и той же единице измерения (например, пикселях).
4. Проверьте, что у SVG и clip-path правильно указаны атрибуты viewBox и preserveAspectRatio. Эти атрибуты могут влиять на масштабирование SVG и clip-path.
5. Проверьте, что у SVG и clip-path нет других стилей или атрибутов, которые могут влиять на масштабирование. Убедитесь, что нет непредвиденных CSS правил или JavaScript скриптов, которые могут изменять размеры элементов.
Проанализировав все эти аспекты, вы сможете выявить причину проблемы с масштабированием SVG в clip-path и найти соответствующее решение. Если проблема не решается, обратитесь за помощью к сообществу разработчиков для получения дополнительной поддержки и советов.