SVG рисует адаптивный ромб

Добро пожаловать в мой публичный аккаунт: фронтенд-детектив

Недавно увидел в мышлении такую ​​задачку: надо нарисовать ромбик с адаптивным размером, а еще есть окантовка, что вообще очень часто встречается в блок-схемах, а эффект такой

Если границы нет, используйтеCSS clip-pathТак же очень удобно вырезать ромбовидную форму, но с бордюром не так просто обращаться (обычно имитируется вложением одного слоя или проекции, но эффект не очень) Вот метод SVG, который полностью использует функции масштабирования для достижения этого эффекта

1. Откуда берется SVG?

SVG обычно не требует рукописного кода (за исключением нескольких основных фигур) и обычно может быть сгенерирован дизайнерским программным обеспечением (SVG предназначен для машин в начале проектирования, что очень неблагоприятно для чтения человеком). Например, я рисую здесь с помощью Figma (подойдет один полигон), подойдет любой размер

Затем я получил этот SVG

<svg width="167" height="90" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码

Эффект в браузере следующий

Во-вторых, характеристики масштабирования SVG.

Теперь SVG имеет размер по умолчанию, если вы вручную измените размер SVG по умолчанию, как показано ниже.

Есть ли аналогичный object-fit:containэффект? Если вы хотите, чтобы вся тротуарная плитка была покрыта, что делать с принудительной растяжкой? Здесь вам нужно использовать атрибут масштабирования SVG.сохранитьAspectRatio, указывающее правилоviewBox масштабирования , когда фактический размер SVG не соответствует размеру, что несколько похоже на комбинацию и . Здесь много значений, значение по умолчанию — xMidYMid , что означает принудительное пропорциональное масштабирование и выравнивание по центру.object-fitobject-position

Если вы заинтересованы, вы можете обратиться к этой статье:Понимание видового экрана SVG, viewBox, масштабирования saveAspectRatio, дело очень подробное

Здесь нам не нужно пропорциональное масштабирование, мы можем напрямую установить его равным none

<svg preserveAspectRatio="none">
...
</svg>
复制代码

Эффект следующий

3. Масштабирование обводки SVG

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

Есть ли способ сделать штрих не масштабируемым с размерами SVG? Конечно есть! В SVG есть атрибутвекторный эффектВы можете контролировать обводку, чтобы не увеличивать масштаб, и всегда сохранять размер по умолчанию.Если вам интересно, вы можете обратиться к этой статье.Масштабирование векторного эффекта CSS и штриха SVG, здесь нужно только pathдобавить атрибуты vector-effect="non-scaling-stroke", указывающие, что обводка не следует масштабированию, следующим образом

<svg preserveAspectRatio="none">
	<path vector-effect="non-scaling-stroke">...</path>
</svg>
复制代码

Таким образом реализуется ромб адаптивного размера, и обводка не масштабируется.Полный код SVG выглядит следующим образом

<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" fill-opacity="0.6" stroke="#FFB200" stroke-width="2"/>
</svg>
复制代码

В-четвертых, встроенный base64 SVG

Обычно такая графика больше подходит в качестве фонового изображения (код SVG плохо смотрится на странице). Удивительно, но после преобразования SVG в base64 вышеперечисленные функции все еще существуют. Здесь мы используем г-на Чжан СиньсюйОнлайн-инструмент сжатия и слияния SVG,следующим образом

После преобразования просто используйте этот base64 непосредственно в качестве фона.

div{
  background: url('data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSIwIDAgMTY3IDkwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIHZlY3Rvci1lZmZlY3Q9Im5vbi1zY2FsaW5nLXN0cm9rZSIgZD0iTTIuMTA4IDQ1TDgzLjUgMS4xMzYgMTY0Ljg5MiA0NSA4My41IDg4Ljg2NCAyLjEwOCA0NXoiIGZpbGw9IiNGRkVDQzciIGZpbGwtb3BhY2l0eT0iLjYiIHN0cm9rZT0iI0ZGQjIwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')
}
复制代码

Таким образом получается адаптивный алмазный фон.

Конечно, после преобразования в base64 цвет не может быть изменен в реальном времени, и его нужно заменить целиком.

Полный код доступенАлмаз SVG

В-пятых, резюмируя

Из этого примера мы можем видеть естественные преимущества SVG, особенно функцию масштабирования штриха.Если вы используете CSS для его рисования, предполагается, что вы столкнетесь с множеством проблем. Вот краткое изложение пунктов реализации:

1. SVG обычно рисуется и экспортируется с помощью программного обеспечения для дизайна, рукописный ввод не требуется.
2. SVG по умолчанию поддерживает исходный масштаб, а правила масштабирования можно изменить с помощью saveAspectRatio.
3. Толщина обводки SVG по умолчанию будет масштабироваться с общим размером, а исходный размер можно сохранить с помощью настройки векторного эффекта.
4. SVG по-прежнему имеет указанные выше характеристики после преобразования в base64 и больше подходит для использования в качестве фонового изображения.

SVG всегда был более выгоден в графическом рисовании, особенно для таких геометрических фигур, которые более гибки в масштабировании и адаптивны.Если реализация CSS сложна, рассмотрите SVG. Наконец, если вы считаете, что это хорошо и полезно для вас, пожалуйста, поставьте лайк, добавьте в закладки и перешлите ❤❤❤

Добро пожаловать в мой публичный аккаунт: фронтенд-детектив