SVG, статика против абсолюта и относительная, и координаты

mobile svg coordinates

387 просмотра

1 ответ

Я должен начать с извинения за свою неспособность понять то, что можно описать только как логику. У меня есть фотошоп предложенного макета. Вот снимок:

Планировка:

введите описание изображения здесь

У меня нет примера кода. Это потому, что я не могу написать код, если не знаю, как к нему подойти. Что приводит меня к:

Я пытаюсь создать наложенное навигационное меню SVG (достигается как красный прямоугольник + трапециевидный многоугольник), которое всегда находится внизу страницы и выскакивает при нажатии / касании, чтобы отобразить расширенные параметры меню. Из того, что я прочитал и понял, использование абсолютных (я подразумеваю здесь «статические») значений для определения положения (пиксели против процента) - плохой дизайн из-за сильно различающихся разрешений и DPI на многих устройствах. Я попробовал простой пример в редакторе Try Me в W3, чтобы понять, как я буду располагать красный прямоугольник. Я использовал:

<svg>
   <rect width="100%" height="10%" x="0%" y="90%" style="fill:#ff0000;" />
</svg>

Это помещает красный прямоугольник, охватывающий всю ширину страницы (независимо от разрешения) внизу, не обрезая прямоугольник за пределами области просмотра. Успех! Правильно..? Ну .. меню не просто прямоугольник. В центре, где будет отображаться значок меню гамбургера, будет многоугольный трапециевидный «бугорок». Это привело к моей проблеме. Полигон определяется координатами. И координаты абсолютные (или статические?). Определяется в пикселях или дюймах или различных других единицах. Это не поддерживает процент от того, что я прочитал, и я не уверен, что это то, что я хотел бы в любом случае. Использование процентов означает, что прямоугольник будет растягиваться, чтобы заполнить все «10%» высоты области просмотра. На рабочем столе он будет тоньше, чем на мобильном в портретной. Это также означает, что многоугольник не обязательно будет центрирован,

Я иду об этом неправильно. Помогите найти правильную логику для размещения этой страницы. Честно говоря, после этого динамическая загрузка содержимого внизу кажется легкой частью.

К вашему сведению, я бы хотел как можно больше избегать JS и плагинов. Я имею в виду, что я не хочу использовать их вообще. Уточнение: если этого можно избежать.

Я был бы более чем рад уточнить тошноту. Хотя это первый раз, когда я активно использую SO, и ранее мне показывали это только через поиск в Google.

РЕДАКТИРОВАТЬ: я спрашиваю в контексте работы с SVG, так как это то, что у меня проблемы с поиском надлежащей документации. Я нахожу посты в блоге и «загрузите этот код / ​​плагин для достижения этого эффекта» вместо концептуальных описаний того, как добиться этих эффектов. Я кодировал сайты (личные, а не профессиональные), когда инструментами были HTML4 и CSS2. Тогда вам не нужно было беспокоиться о мобильных телефонах. Вы могли бы работать в пределах обычно используемых разрешений и соотношений сторон (16: 9 и 4: 3 были в значительной степени это). Но теперь эти устройства имеют сильно различающиеся плотности пикселей и методы рендеринга, а также 2 аспектных соотношения (книжный и альбомный). Я иду от фона в довольно статичных веб-страницах к мощным веб-страницам с мощным морфием.

TLDR: как сделать SVG? Как поместить эту трапецию в центр и сохранить ее ширину / высоту независимо от области просмотра. Кроме того, если я должен избегать абсолютных значений (определяя высоту прямоугольника в пикселях) , как мне поддерживать постоянную высоту и правильное позиционирование абсолютно позиционированного многоугольника с относительными значениями?

EDIT2: Спасибо, Пол! Это мне очень помогло !! Возможность увидеть код и объяснить, почему и при каких обстоятельствах он работает или не работает, позволяет мне понять, как используется этот вид инструмента. Особенно когда это объясняется в контексте с моими собственными идеями. Версия CSS также очень полезна. Я никогда не использовал его за пределами базового стиля элементов. Оба ответа превосходны.

Автор: TruthSerum Источник Размещён: 08.11.2019 11:24

Ответы (1)


0 плюса

Решение

Вам не нужен SVG для этого. То, чего вы хотите достичь, очень легко сделать с помощью CSS.

var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");

tabbutton.addEventListener("click", function() {
  tabcontainer.classList.toggle("open");
});
.container
{
  width: 500px;
  height: 500px;
  position: relative;
  background-color: black;
  overflow: hidden;
}

.tabcontainer
{
  position: absolute;
  width: 100%;
  bottom: -44px;
}

.tabcontainer.open
{
  bottom: 0px;
}

.tabbutton
{
  width:100px;
  height: 0;
  margin: 0 auto;
  border-bottom: solid 20px red;
  border-left: solid 16px transparent;
  border-right: solid 16px transparent;
  text-align: center;
  cursor: pointer;
}

.tabbutton I
{
  color: white;
}

.tabbody
{
  width: 100%;
  height: 60px;
  background-color: red;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  
  
  <div class="tabcontainer">
    <div class="tabbutton"><i class="fa fa-bars"></i></div>
    <div class="tabbody"></div>
  </div>
</div>

Использование SVG

Как правило, все в SVG масштабируется, если SVG масштабируется. Это может вызвать проблемы, когда люди хотят создавать отзывчивые документы SVG на странице.

Однако с некоторыми конкретными макетами SVG можно делать то, что вы хотите. В частности, это когда у вас есть простые конструкции с элементами, которые должны сидеть по углам или по центру с одной из сторон.

Вот версия вышеупомянутого примера только для CSS, который использует SVG для вкладки.

Как это работает, так это то, что мы используем функцию, в которой, если соотношение сторон содержимого (определенного с помощью viewBox) отличается от SVG (определенного с помощью widthи height), содержимое будет автоматически масштабироваться и центрироваться.

Итак, здесь мы определяем кнопку размером 132x20 и помещаем ее в SVG с размером 100% x 20. Где «100%» здесь - ширина контейнера / страницы. Поскольку соотношение сторон отличается, <polygon>представление кнопки будет автоматически отцентрировано по горизонтали.

var tabcontainer = document.querySelector(".tabcontainer");
var tabbutton = document.querySelector(".tabbutton");

tabbutton.addEventListener("click", function() {
  tabcontainer.classList.toggle("open");
});
.container
{
  width: 100%;
  height: 500px;
  position: relative;
  background-color: black;
  overflow: hidden;
}

.tabcontainer
{
  position: absolute;
  width: 100%;
  bottom: -44px;
}

.tabcontainer.open
{
  bottom: 0px;
}

.tabbutton
{
  fill: red;
  cursor: pointer;
}

.tabbody
{
  fill: red;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
  
  
  <svg width="100%" height="80" class="tabcontainer">
    <svg width="100%" height="20" viewBox="0 0 132 20" class="tabbutton">
      <polygon points="16,0, 116,0, 132,20, 0,20"/>
      <g transform="translate(66,0)" fill="white">
        <rect x="-8" y="4" width="16" height="3"/>
        <rect x="-8" y="9" width="16" height="3"/>
        <rect x="-8" y="14" width="16" height="3"/>
      </g>
    </svg>
    <rect y="20" width="100%" height="60" fill="red" class="tabbody"/>
  </svg>
</div>

Автор: Paul LeBeau Размещён: 21.08.2016 08:14
Вопросы из категории :
32x32