Мощный вперед к SVG

JavaScript SVG
Мощный вперед к SVG

Автор: Bumpman - Нуан Нуан

SVG означает Масштабируемая векторная графика Масштабируемая векторная графика, использующая формат XML для определения графики.

1. Отображение SVG

SVG широко используется благодаря мощным функциям SVG.

1.1 Вектор

Контур метро Шэньчжэня можно нарисовать, используя характеристики векторов SVG:

深圳地铁

1.2, иконочный шрифт

SVG можно преобразовать в iconfont по определенным правилам:

截图来自iconfont.cn

1.3, посторонний объект

используя SVGforeignObjectЭтикетка реализует функцию скриншота, принцип:foreignObjectВставьте HTML-элементы внутрь:

<svg xmlns="http://www.w3.org/2000/svg">
	<foreignObject width="120" height="60">
		<p style="font-size:20px;margin:0;">凹凸实验室 欢迎您</p>
	</foreignObject>
</svg>

Процесс реализации скриншота:

  1. Сначала объявите базовый шаблон svg, этому шаблону нужна базовая информация описания, самое главное, он имеет<foreignObject></foreignObject>Эта пара этикеток;
  2. Вставьте шаблон шаблона DOM для отображенияforeignObjectТы сможешь;
  3. использоватьBlobпостроить объект svg;
  4. использоватьURL.createObjectURL(svg)Выньте URL-адрес.

1.4. SVG СМИЛ

Поскольку редактор WeChat не позволяет встраивать<style><script><a>Ярлыки, используя SVG SMIL, официальный аккаунт WeChat можно использовать для творческого графического и текстового оформления макета, включая анимацию и взаимодействие. Но также обратите внимание, что в теге не допускается использование идентификатора, иначе он будет отфильтрован или заменен.

После нажатия «Bump Lab» поверните на 360 градусов вокруг центра «Bump Lab», и оно появится через 0,5 секунды после нажатия.aotu.io/, анимация выполняется только один раз.

На следующем рисунке показана демонстрация цикла GIF:

SVG SMIL

код показывает, как показано ниже:

<svg width="360" height="300" xmlns="http://www.w3.org/2000/svg">
    <g>
        <!-- 点击后 运行transform旋转动画，restart="never"表示只运行一次 -->
        <animateTransform attributeName="transform" type="rotate" begin="click" dur="0.5s" from="0 100 80" to="360 100 80"  fill="freeze" restart="never" />
        <g>
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">
                凹凸实验室
            </text>
        </g>
        <g style="opacity: 0;">
            <!-- 同一个初始位置以及大致的宽高，触发点击事件 -->
            <text font-family="microsoft yahei" font-size="20" x="50" y="80">https://aotu.io/</text>
            <!-- 点击后 运行transform移动动画，改变文本的位置 -->
            <animateTransform attributeName="transform" type="translate" begin="click" dur="0.1s" to="0 40"  fill="freeze" restart="never" />
            <!-- 点击0.5秒后 运行opacity显示动画 -->
            <animate attributeName="opacity" begin="click+0.5s" from="0" to="1" dur="0.5s" fill="freeze" restart="never" />
        </g>
    </g>
</svg>

Вышеизложенное - мое общее впечатление от SVG. Недавнее развитие спроса снова освежило мое сознание, то есть SVG реализует непропорциональное масштабирование, а апплет не поддерживает обработку тегов SVG. Позвольте мне объяснить это ниже.

2. SVG реализует непропорциональное масштабирование

Известный iconfont можно масштабировать, изменяя размер шрифта, но это пропорциональное масштабирование, так как же добиться непропорционального масштабирования SVG? Как масштабировать кролика без чешуи, как показано на изображении ниже?

兔子非比例缩放

Ключевые моменты: Реализация непропорционального масштабирования в основном включает в себя три точки знаний: окно просмотра, окно просмотра и saveAspectRatio.Комбинация окна просмотра и окна просмотра может реализовать функцию масштабирования, а комбинация окна просмотра и сохраненияAspectRatio может реализовать непропорциональную функцию.

2.1, видовой экран

viewportУказывает размер видимой области SVG.viewportТак же, как и размер экрана нашего монитора, он скрыт за областью, начало координат находится в верхнем левом углу, ось x горизонтально вправо, ось y вертикально вниз.

viewport

Через CSS-подобные свойстваwidth,heightУкажите размер представления:

<svg width="400" height="200"></svg>

2.2, вьюбокс

Значение viewBox имеет 4 числа: x, y, ширина, высота. Где x: абсцисса левого верхнего угла, y: ордината левого верхнего угла, width: ширина, height: высота. Начало координат по умолчанию находится в верхнем левом углу, ось X направлена ​​горизонтально вправо, а ось Y направлена ​​вертикально вниз.

<svg width="400" height="200" viewBox="0 0 200 100"></svg>

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

理解 viewport 与 viewbox
(Источник изображения:SVG Research Road (23) — Общие сведения об области просмотра и окне просмотра)

2.3, сохранить соотношение сторон

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

如何非比例缩放

2.3.1 Определение

preserveAspectRatioОбъект действия –viewBox, способ использования следующий:

preserveAspectRatio="[defer] <align> [<meetOrSlice>]"
// 例如 preserveAspectRatio="xMidYMid meet"

Среди них отложить в настоящее время не в центре внимания, игнорировать его на данный момент, в основном понятьalignа такжеmeetOrSliceИспользование:

  • align: состоит из двух существительных, которые обозначают выравнивание направлений x и y окна просмотра и окна просмотра соответственно.
стоимость имея в виду
xMin viewport и viewBox выровнены по левому краю
xMid viewport и viewBox выровнены по оси x по центру
xMax viewport и viewBox выровнены по правому краю
YMin Окно просмотра выравнивается по верхнему краю окна просмотра. Обратите внимание, что буква Y пишется с большой буквы.
YMid viewport 和 viewBox y轴中心点对齐。 Обратите внимание, что буква Y пишется с большой буквы.
YMax ViewPort и ViewBox выровнены. Обратите внимание, что буква Y пишется с большой буквы.
  • meetOrSlice: Указывает, как поддерживать соотношение высоты и ширины. Существует три значения: совмещение, срез и отсутствие.
    • meet- По умолчанию, сохраняйте соотношение сторон, чтобы масштабировать viewBox по размеру области просмотра, может быть оставшееся пустое пространство.
    • slice- Сохраняйте соотношение сторон и увеличивайте масштаб, чтобы заполнить окно просмотра в небольшом направлении, а лишняя часть обрезается.
    • none- Искажайте соотношение сторон, чтобы полностью соответствовать области просмотра.
2.3.2 Примеры

Пример 1:preserveAspectRatio="xMidYMid meet"Указывает, что зеленая рамка совмещена с центральной точкой в ​​направлениях x и y дисплея;

xMidYMin slice

Пример 2:preserveAspectRatio="xMidYMin slice"Указывает, что зеленая рамка выровнена с центральной точкой в ​​направлении x дисплея, а верхний край в направлении Y выровнен, а лишняя часть скрыта после увеличения пропорции до заполнения дисплея;

例子2

Пример 3:preserveAspectRatio="xMidYMid slice"Указывает, что зеленая рамка совмещена с центральной точкой в ​​направлениях x и y дисплея, а лишняя часть скрыта после увеличения пропорции до заполнения дисплея;

例子3

Пример 4:preserveAspectRatio="none"Несмотря ни на что, просто масштабируйте зеленую рамку по желанию, чтобы заполнить дисплей; это ответ на непропорциональное масштабирование.

例子4

3. Что делать, если апплет не поддерживает теги svg

Апплет WeChat официально не поддерживает теги SVG, но решение спасти страну равнозначно внедрению тега SVG само по себе: с помощью встроенного апплетаCanvasвизуализатор, вCaxреализовано вSVGПодмножество стандарта, использующееJSXилиHTM（Hyperscript Tagged Markup）описыватьSVGструктурное поведение.

今天，小程序正式支持 SVG

Но сегодня я хочу поговорить о другом. Мы знаем, что хотя апплет не поддерживает теги SVG, он поддерживает преобразование svg в base64 какbackground-imageизurl,Такие какbackground-image: url("data:image/svg+xml.......).

Но у меня все еще есть требование изменить цвет каждого пути SVG в любое время, то есть цвет можно настроить:

随时更改 SVG 每个路径的颜色

Base64 наверняка качает слишком много мороки, нет лучшего способа сделать что-то?Непосредственно прилагается к ответу: для графики SVG, а также для лучшей реализации является прямое использование кода формата SVG XML без преобразования base64.

3.1. Кодировка URL

Чтобы напрямую использовать код формата SVG XML, сначала поймитеData URIформат.Ключевой момент: base64 является необязательным параметром, когда он не указан,<data>Будет использовать кодировку URL.

3.1.1 Начало работы

Процентное кодирование, также известное как URL-кодирование, представляет собой механизм кодирования для контекстно-зависимых унифицированных указателей ресурсов (URL).

Принцип: символ ASCII = % + двузначный код ASCII (шестнадцатеричный). Например, код ASCII, соответствующий символу a, равен 0x61, а затем URL-кодируется для получения %61.

3.1.2, сжатие кодировки URL

Предисловие:

Data URIв формате<data>Также можно полностью использовать кодировку URL, например.encodeURIComponent('<svg version="1.1" viewBox= …</svg>'). Однако по сравнению с исходным SVG до экранирования читабельность намного хуже, а занимаемая площадь также больше. Если вы хорошо разбираетесь в кодировании URL,<data>Это не должно быть все закодировано.

текст:

В документе RFC3986 указано, что в URL разрешены только незарезервированные символы и все зарезервированные символы.

  • Незарезервированные символы: включая английские буквы (a-zA-Z), цифры (0-9), -_.~ 4 специальных символа. Процентное кодирование не требуется для незарезервированных символов.
  • Зарезервированные символы: символы со специальным значением:/?#[]@(отдельный протокол URL, хост, путь и т. д. компоненты) и!$&'()*+,;=(Он используется для разделения каждого компонента, например, символ & используется для разделения запроса на несколько пар ключ-значение).
  • Запрещенные символы или небезопасные символы: размещение в URL-адресе может вызвать двусмысленность программы разрешения, поэтому для этой части требуется процентный код, например%,空格,双引号",尖号 <>и т.п.

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

  • Обработка JS относительно проста, используйте замену для замены символов, которые необходимо закодировать, в основном достаточно заменить следующие символы:
svgToUrl (svgData) {
    encoded = encoded
      .replace(/<!--(.*)-->/g, '') // 亲测必须去掉注释
      .replace(/[\r\n]/g, ' ') // 亲测最好去掉换行
      .replace(/"/g, `'`) // 单引号是保留字符，双引号改成单引号减少编码
      .replace(/%/g, '%25')
      .replace(/&/g, '%26')
      .replace(/#/g, '%23')
      .replace(/{/g, '%7B')
      .replace(/}/g, '%7D')
      .replace(/</g, '%3C')
      .replace(/>/g, '%3E')
    return `data:image/svg+xml,${encoded}`
  }

  • При использовании в CSS строки SVG могут быть заменены тремя API от Sass версии 3.3 и выше.

    1. str_insert(string, insert, index): от$stringпервый$indexвставить символ$insert;
    2. str_index(string, substring): вернуть$substringсуществует$stringпервое место в
    3. str_slice(string, start_at, end_at = nil): возврат от персонажа$stringБ$start_atначать$end_atНовая строка для завершения.

    Предшественники уже подвели итоги, можно переходить кhttps://github.com/leeenx/sass-svg/blob/master/sass-encodeuri.scssСм. полный код.

3.2, сжатие SVG

SVGO

Как правило, SVG экспортируется из Sketch, там много лишнего кода, по возможности рекомендуется использовать именно его.SVGOСжать исходный объем SVG, например, удалив новые строки, повторяющиеся пробелы, удалив объявления документов, удалив комментарии, удалив описания описаний и т. д.

4. Резюме

Сила SVG в том, что он неожиданный, крутой и необычный.

Будь то причудливая верстка официальной учетной записи WeChat, тег ForeignObject реализует скриншоты, реализует непропорциональное масштабирование, или фоновое изображение напрямую использует код формата SVG XML, или анимация пути, анимация штриха, графическая обрезка, фильтры и т. д. о том, что не упомянуто выше., вы можете играть новые трюки.

Из одного атрибута SVG можно сделать статью. Можно сказать, что изучение SVG бросает вызов самому себе. Добро пожаловать в очередь на изучение SVG.

5. Справочное содержание Рекомендуемая литература

Три взгляда на SVG Web Motion

Тайна кодирования URL

Выяснилось, что встроенные изображения SVG в CSS имеют лучшую форму, чем Base64.

Супер мощная анимация анимации SVG SMIL

Подробно научим вас интерактивной SVG-разработке официальной страницы учетной записи WeChat.

Приложения, такие как введение SVG и скриншоты

Добро пожаловать в блог Bump Labs:aotu.io

Или обратите внимание на официальный аккаунт AOTULabs и время от времени публикуйте статьи:

image

Категории