Начало работы с SVG - Как написать SVG от руки

внешний интерфейс SVG
Начало работы с SVG - Как написать SVG от руки

Добро пожаловать в команду веб-разработчиков Futu,несоответствие

Когда редактор впервые пришел в компанию, возникла необходимость сделать графическую анимацию, и я хотел использовать для этого картинки. Прочитав требования, Toobug сказал, что это можно сделать с помощью SVG. В то время редактор ничего не знал о SVG. Тубаг посмотрел на мое невинное выражение и ничего не сказал. У меня есть книга«Суть SVG»(Автор: It's Toobug), бери и смотри, учись и делай.

Ну, суть SVG я посмотрел через неделю, и теперь это запись.

Поэтому сегодня редактор не просит всех покупать книги, я просто надеюсь, что эта вводная статья по SVG, переведенная нашей командой Уиллом Ваном, поможет вам начать работу с SVG.

текст

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

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

В этом уроке мы рассмотрим почеркSVG, но я не собираюсь утомлять вас статьей, которая просто выбрасывает кучу связанных форм и свойств. Вместо этого вы научитесь писать от руки, выполняяSVG, создав 6 значков, перечисленных на изображении в начале этого урока (Онлайн-пример). Во время этого процесса вы будете использовать почеркSVGНеобходимы все основные элементы.

Говоря об этих основных элементах, давайте кратко рассмотрим каждый из них.

这些是你即将创建的图标
Это иконки, которые вы собираетесь создать

базовыйSVGэлемент

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

  • <svg>Обертывает и определяет весь вектор.<svg>Метки для векторов то, что они есть<html>Теги предназначены для веб-страницы.
  • <line>Создайте прямую линию.
  • <polyline>Создание полилиний.
  • <rect>Создайте прямоугольник.
  • <ellipse>Создавайте круги и эллипсы.
  • <polygon>Создание полигонов.
  • <path>Создавайте произвольные формы, указывая точки и линии между точками.
  • <defs>Определите повторно используемый граф. Изначально<defs>Содержимое внутри невидимо.<defs>Метки для векторов то, что они есть<head>Теги предназначены для веб-страницы.
  • <g>Комбинируйте несколько фигур. Поместите объединенную форму в<defs>чтобы его можно было использовать повторно.
  • <symbol>Похож на комбо, но с некоторыми дополнительными функциями. обычно помещают в<defs>Этикетки легко использовать повторно.
  • <use>Залезай<defs>Объект повторного использования, определенный в и вSVGотображается в.

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

начальный файл

Прежде чем мы начнем, с этогоРепозиторий GitHubВозьмите стартовый файл. Вы можете загрузить ZIP-файл или просто локально клонировать репозиторий.

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

когда вы открываетеStarter Filesфайлы в каталогеhandcodedsvg.html, вы должны увидеть что-то вроде изображения ниже:

起始文件

xиyОбзор значений

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

Обычно используемое представление точкиxценность иyСокращение для значения(x, y). Например,xЗначение на оси10,существуетyЗначение на оси50Точки можно записать как(10, 50). Я буду использовать это сокращение время от времени в этом уроке.

Заметили две самые толстые линии в нашей сетке? мы будемSVGВерхний левый угол линии совмещен с местом, где встречаются две линии. Следовательно, этот перекресток будет у нас.SVGПредставитель в Китаеx=0иy=0,Сейчас(0, 0)позиция.

сетка фон

Расстояние между каждой самой тонкой линией сетки10px, линии средней толщины на расстоянии друг от друга100px. Итак, если мы хотим переместить объект вниз с одной линии средней толщины на другую линию средней толщины, мы просто пишемyЗначение на оси увеличивается100px.

Если это все еще звучит немного неясно, не волнуйтесь, так как мы создаемSVGВы поймете, когда значки действительно сработают.

дефолтSVGстиль

Обратите внимание, что в начальномHTMLВ файле есть некоторые встроенныеCSSУстанавливает стиль по умолчанию для значка, который мы собираемся создать.

svg {
  stroke: #000;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Вышеупомянутый CSS устанавливает нашу иконку без отступов, вес5pxнарисовано черными линиями, со сглаженными углами.

1. НастройкаSVG

создать любойSVGПервый шаг – записать<svg></svg>элемент. что вы ожидаете от своегоSVGВсе отображаемое должно быть помещено внутри этого тега. Есть несколько свойств, которые можно использовать для этого элемента, но для простоты мы будем использовать только ширину и высоту.

Добавьте следующий код в ваш HTML-документ<body>Перейти к этикетке:

<svg width="750" height="500">

</svg>

Примечание: в нашем стартовом файлеCSSбудет ли этоSVGСмещение вниз и вправо100px, что гарантируетSVGразмещается на пересечении двух самых толстых линий фоновой сетки. в этом урокеCodePenЗначения в демо также могут немного отличаться — но не стесняйтесь ими манипулировать.

2. Создать左对齐значок

Начнем с использования<line>элемент создает это左对齐Значок для запуска:

左对齐图标

вы будете использоватьline4 атрибута элемента:

  • x1: координата начальной точки по горизонтальной оси
  • y1: Координата вертикальной оси начальной точки
  • x2: Координата горизонтальной оси конечной точки
  • y2: Координата вертикальной оси конечной точки

Подводя итог, вы должны использовать свойстваx1иy1Чтобы задать начальную точку линии, используйте свойствоx2иy2для установки конечной точки линии.

Давайте создадим первую строку нашего значка, ту, что вверху. Мы собираемся сделать линию длинной45px, однако мы используем5pxТолстые и тонкие штрихи добавят несколько дополнительных пикселей за пределами наших линий. Итак, нам нужно сместить линию в правый нижний угол.3pxчтобы убедиться, что всеstrokeНи один из полученных дополнительных пикселей не обрезается.

По вышеуказанным причинам мыxкоординаты оси3иyкоординаты оси3Начнем нашу линию с . Мы можем использовать свойстваx1="3" y1="3"установить начальную точку линии как(3, 3).

Мы собираемся сделать линию длинной45px, поэтому в начальной точкеxзначение координат оси3добавить45получитьx2значение48. Мы хотим, чтобы линия заканчивалась в одном и том же месте по горизонтальной оси, поэтому установитеy2равный3, то есть сy1равное значение. по атрибутуx2="48" y2="3"Конечная точка линии установлена(48, 3).

Полный код для этой первой строки должен выглядеть так:

<line x1="3" y1="3" x2="48" y2="3"></line>

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

Теперь мы можем добавить следующие три строки к нашей иконке. В конечном итоге мы намерены провести четыре линии. 1-я и 3-я длина провода45px, вторая и четвертая длины проводов62px. Мы также хотим, чтобы между каждой строкой16pxинтервал по вертикали.

Мы можем получить этот значок с помощью следующего кода:

<line x1="3" y1="3" x2="48" y2="3"></line>
<line x1="3" y1="19" x2="65" y2="19"></line>
<line x1="3" y1="35" x2="48" y2="35"></line>
<line x1="3" y1="51" x2="65" y2="51"></line>

Примечание: для каждой строкиyзначение с16pxУвеличьте, чтобы создать желаемый интервал по вертикали.

Еще раз взгляните на превью вашего браузера, и вы должны увидеть все четыре строки. Вы также можете прямо подcodepenСреднийПравитьSVG:

Детали кода:codepen.io/new4/

Прокомментируйте свой значок, прежде чем мы продолжим

С этим кодом ваша первая иконка готова. Мы готовы перейти к следующему значку, мы хотим создать этот значок в том же месте на сетке, но сейчас左对齐Иконка занимает это место. Итак, теперь вам нужно закомментировать его код, чтобы очистить место. Мы вернемся и восстановим закомментированный код позже, когда превратим значок в повторно используемую часть.

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

3. Создайте插入значок

Для этого значка давайте использовать прямые линии<line>Элемент полилинии, производный от элемента: то есть<polyline>. Мы будем использовать это, чтобы создать каретку, указывающую вправо.

插入符

<polyline>Элементы имеют только один атрибут:points. Здесь вы будете использовать пары чисел для установки ряда точек. Отрезки линий между точками рисуются автоматически. Пары значений просто записываются друг за другом в атрибуте точки. Запятая может быть использована, но не обязательна. Для удобочитаемости вы также можете захотеть написать каждую пару значений в строке вашего кода.

мы начнем наш插入значок, то есть(3, 3), что гарантирует, что концы штрихов и линий не будут обрезаны. Мы хотим переместить вторую точку вправо и вниз25px, то мы устанавливаем его как(30,28). Наша третья точка должна быть выровнена по вертикали с первой при движении вниз.25px, поэтому он должен быть установлен в(3,53).

Вы можете добавить эти точки в<polyline>изpointsсвойства следующим образом:

<polyline points="
  3 3
  30 28
  3 53
"></polyline>

Если вам нужен более краткий код, вы также можете написать приведенный выше код как:

<polyline points="3 3, 30 28, 3 53"></polyline>

или

<polyline points="3 3 30 28 3 53"></polyline>

Взгляните на предварительный просмотр вашего браузера, и вы увидите插入Отображение иконок: еще одна иконка готова!

Детали кода:codepen.io/new4/

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

4. Создайте浏览器значок

Теперь, когда у нас есть линии, давайте начнем с прямоугольника (<rect>), чтобы начать создавать некоторые фигуры. мы будем сочетать его с некоторыми<line>объединить, чтобы создать浏览器значок.

浏览器

Прямоугольники и квадраты можно пройти через<rect>элементы для создания.<rect>Есть 4 свойства, которые требуют значения:

  • x: верхний левыйxзначение координат оси
  • y: верхний левыйyзначение координат оси
  • width: ширина прямоугольника
  • height: высота прямоугольника

Примечание: вы также можете использовать свойстваrxиryчтобы задать угловой радиус прямоугольника.

Мы собираемся создать прямоугольник с верхним левым углом, который имеет3pxСмещение также позволяет избежать усечения штриха, поэтому мы будем использоватьx="3" y="3"стоимость имущества. мы хотим, чтобы он был широким80px,высокий60px, поэтому мы используемwidth="80" height="60"стоимость имущества.

Таким образом, наш полный код прямоугольника должен быть:

<rect x="3" y="3" width="80" height="60"></rect>

Сохраните код и просмотрите его в браузере. Вы должны увидеть аккуратный маленький прямоугольник.

Теперь все, что нам нужно сделать, это добавить горизонтальную линию вверху и вертикальную линию возле верхнего левого угла, как вы видели на изображении в начале этого раздела. Мы будем использовать тот же процесс, что и раньше, для рисования сегментов линий, полной浏览器Код значка должен выглядеть так:

<rect x="3" y="3" width="80" height="60"></rect>
<line x1="3" y1="19" x2="83" y2="19"></line>
<line x1="20" y1="3" x2="20" y2="17"></line>

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

Детали кода:codepen.io/new4/

5. Создайте警示значок

Теперь, когда мы можем управлять созданием прямоугольника, давайте попробуем использовать<ellipse>. Мы будем использовать два<ellipse>и<line>создать это警示значок.

警示

Подобно прямоугольнику,<ellipse>Элементы также требуют 4 свойства, однако эти свойства не такие, как у прямоугольников. Мы используем горизонтальный и вертикальный радиусы вместо ширины и высоты, а также позиционируем по центру вместо указания левого верхнего угла.

  • cx: Координата положения центра по оси X
  • cy: координата положения центра по оси Y
  • rx: Радиус по оси x, то есть разделит график на верхнюю и нижнюю части
  • ry: Радиус по оси Y, то есть разделит график на левую и правую части.

мы хотим широкий80pxвысокий80pxявляется идеальной окружностью, а это означает, что ее радиус по обеим осям равен40px. мы используемrx="40" ry="40"чтобы установить это значение.

Мы также хотим, чтобы круг был на уровне двух самых толстых линий на графике. Пусть наш круг и широк, и высок80px, то положение, в котором находится центр окружности, равно40px. При этом, во избежание обрезания значка, необходимо3px, то центр окружности находится на двух осях.43pxместо. мы используем атрибутыcx="43" cy="43"чтобы установить это значение.

Сложив вместе эти установленные значения свойств, мы получим следующий код:

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

Проверьте предварительный просмотр в браузере, и теперь вы должны увидеть кружок на своей странице.

Теперь мы собираемся добавить второй круг, создав точку внизу восклицательного знака. Мы создадим его таким же образом, с той лишь разницей, что мы будем использовать встроенный стиль для установки черной заливки:

<ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>

Наконец, нам просто нужно добавить восклицательный знак к другому сегменту линии. Опять же, мы используем тот же метод, который мы использовали для создания сегментов линий ранее, с той лишь разницей, что мы будем использовать встроенный стиль, чтобы изменить ширину обводки от5pxувеличить до8px.

警示Полный код значка выглядит следующим образом:

Детали кода:codepen.io/new4/

6. Создайте播放значок

Теперь, когда у нас есть относительно фиксированные формы, такие как прямоугольники и овалы, мы готовы к использованию.<polygon>элементы для создания собственных форм. От восьмиугольников до пентаграмм мы можем использовать этот элемент для создания нужных нам многоугольников. Однако давайте проясним ситуацию и пока создадим треугольник. мы будем сочетать его с<ellipse>элементы объединяются для создания播放значок:

播放

<polygon>элементы и<polyline>Элементы почти одинаковые. у них есть только одинpointsсвойство, которое принимает форму пары значений, чтобы установить каждую точку для формирования формы. Отличие в том, что полилиния<polyline>не замкнутый, а многоугольный<polygon>автоматически закрывается.

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

<ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>

Теперь давайте создадим полигон. Мы разместим три точки, и между этими точками будут автоматически сгенерированы отрезки для создания треугольника. точка будет(35,23),(60,43)и(35,63). Итак, наш код полигона будет:

<polygon points="35 23, 60 43, 35 63" />

播放Полный код значка выглядит следующим образом:

Детали кода:codepen.io/new4/

7. Создайте下载значок

Сейчас мы изучим самую сложную, но в то же время самую гибкую генерациюSVGГрафический метод, т.е.<path>элемент. Создание пути немного похоже на создание многоугольника, отображая только часть вашей фигуры за раз. Однако на пути вы создаете каждую точку напрямую, настраиваете каждую линию, и у вас также есть возможность создавать кривые между точками вместо прямых линий.

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

下载

Технически, вы могли бы использовать многоугольники для создания фигуры выше, но стрелки отлично помогают нам понять, как работает элемент пути.

мы будем использовать только<path>свойстваd.dпредставлятьdata, где вы определите все точки и линии пути. В этом свойстве команды для установки путевых точек и создания линий между точками задаются такими командами, какMилиLпредоставляется такая единственная буква, за которой следует наборxи/илиyкоординировать.

Таких команд много, но эта статья только знакомит<path>использования, мы просто рассмотрим некоторые команды, которые вы действительно можете использовать при написании кода вручную.

  • Mозначает перейти к (moveto). оно используетxценность иyзначение, чтобы указать начальную точку нового пути. Думайте об этом, как о наведении указателя мыши на точку на холсте, чтобы подготовиться к рисованию. Заглавная букваMУказывает на переход к набору абсолютных координат (строчныеmПредставляет собой перемещение к относительному набору координат).
  • LУказывает подчеркивание на (lineto). Нарисуйте линию от текущей позиции до новой позиции. Заглавная букваLУказывает на переход к набору абсолютных координат (строчныеlПредставляет собой перемещение к относительному набору координат).
  • Zпредставляет собой закрытый путь. Замкните фигуру, нарисовав прямую линию между текущей точкой и начальной точкой пути.

Вы обязательно должны взглянуть на эти три команды (и значки, которые мы создадим с их помощью), чтобы начать работу.<path>Элементарное чтение. Чтобы действительно освоить его, вы можете ознакомиться со всем путемЗаказ.

пиши свой下载значок

быть правым下载Чтобы закодировать путь к значку, рекомендуется сначала добавить пустой элемент пути:

<path d="
 
"></path>

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

  • Сначала переходим к точке(18, 3), где начинается наша стрелка. Для этого необходимо указать свойства пути.dдобавить командуM 18 3.
  • Затем мы хотим использоватьLкоманда начать с начальной точки вдольxНарисуйте ось28pxотрезок. Чтобы выполнить это действие, мы даем свойствоdДобавьте вторую команду:L 46 3. Проверьте предварительный просмотр в браузере, и вы увидите горизонтальную черту.
  • теперь используйтеL 46 40рисовать прямо вниз37pxлиния.
  • затем используйтеL 61 40иди прямо направо15px.
  • Далее мы хотим начать создавать точки стрелок. Нам нужно провести диагональную линию в нижний левый угол. мы используемL 32 68закончи это.
  • затем используйтеL 3 40Нарисуйте диагональную линию в верхнем левом углу.
  • Теперь мы используемL 18 40Давайте проведем линию вправо, чтобы завершить нашу стрелку.
  • Чтобы сделать нашу фигуру замкнутой, нам не нужно рисовать линию, указав точку. Все, что нам нужно сделать, это добавитьZкоманда, она автоматически закроет нашу фигуру.

Окончательный код значка стрелки выглядит следующим образом:

<path d="
  M 18 3
  L 46 3
  L 46 40
  L 61 40
  L 32 68
  L 3 40
  L 18 40
  Z
"></path>

Об использовании<path>Дополнительную информацию можно найти в цитируемой статье, прикрепленной в конце этой статьи.

Детали кода:codepen.io/new4/

8. Добавить<defs>элемент

Мы закончили программировать 6 иконок, теперь мы можемSVGготовы разместить и повторно использовать их.

Для этого мы будем использовать наш код из 6 значков (который в настоящее время закомментирован) с<defs></defs>Заверните:

<defs>
<!-- 到目前为止,你创建的所有图标都在这里 -->
</defs>

Это сообщит системе, что все значки, которые мы сделали до сих пор, по умолчанию скрыты, пока мы их явно не используем.

Теперь вы можете раскомментировать каждый значок, и они не будут отображаться на странице.

9. Используйте<g>Создать составной объект

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

Чтобы преобразовать одну из наших иконок в композицию, все, что нам нужно сделать, это использовать метку<g></g>чтобы обернуть его. Чтобы сделать эту комбинацию пригодной для использования, нам также нужно придать ей уникальныйID.

Например:

<g id="leftalign">
    <!-- 左对齐图标 -->
    <line x1="3" y1="3" x2="48" y2="3"></line>
    <line x1="3" y1="19" x2="65" y2="19"></line>
    <line x1="3" y1="35" x2="48" y2="35"></line>
    <line x1="3" y1="51" x2="65" y2="51"></line>
</g>

использовать<g></g>Оберните 3 значка, которые вы создали в начале, и добавьте уникальныйID,следующее:

<g id="leftalign">
    <!-- 左对齐图标 -->
    <line x1="3" y1="3" x2="48" y2="3"></line>
    <line x1="3" y1="19" x2="65" y2="19"></line>
    <line x1="3" y1="35" x2="48" y2="35"></line>
    <line x1="3" y1="51" x2="65" y2="51"></line>
</g>

<g id="rightcaret">
    <!-- 插入图标 -->
    <polyline points="
    3 3
    30 28
    3 53
    "></polyline>
</g>

<g id="browser">
    <!-- 浏览器图标 -->
    <rect x="3" y="3" width="80" height="60"></rect>
    <line x1="3" y1="19" x2="83" y2="19"></line>
    <line x1="20" y1="3" x2="20" y2="17"></line>
</g>

10. Использование<use>расставлять комбинации

существует<defs>Внутри элемента у нас теперь есть три значка, определенные как группы, мы собираемсяSVGиспользуй их. Чтобы использовать их, все, что нам нужно сделать, это добавить<use>элемент (убедитесь,<defs>элемент снаружи и после него), и установитеhrefатрибут указывает на нужный значокID.

Например, добавьте следующий код для использования左对齐значок:

<use href="#leftalign"></use>

указавxиyзначение для размещения значка в определенном месте:

<use href="#leftalign" x="100" y="100"></use>

Код для добавления всех трех значков и их разделения выглядит следующим образом:

<use href="#leftalign" x="100" y="100"></use>
<use href="#rightcaret" x="300" y="100"></use>
<use href="#browser" x="500" y="100"></use>

Проверьте свой браузер, и вы должны увидеть три таких значка:

组合

11. ИспользованиеsymbolsСоздать объект шаблона

В дополнение к композиции вы также можете использовать шаблоны для определения своих значков. Шаблоны почти такие же, как и композиции, но вы получаете дополнительные настройки для управления окном просмотра (viewbox) и соотношение сторон.

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

Мы создаем наш шаблон так же, как мы создали композицию, но обернем код для наших последних трех значков в<symbol></symbol>в шаблоне. Нам также нужно добавить уникальный к каждому шаблонуID.

Но нам также нужно добавитьviewBoxсвойства. Это свойство позволяет нам определить, какой должна быть видимая часть каждого шаблона. Когда браузер имеет доступ к этой информации, он может правильно масштабировать и упорядочивать шаблоны.

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

от нашего警示Иконка запускается, ее ширина и высота86px, поэтому мы устанавливаем егоviewBoxСтоимость свойства0 0 86 86,следующее:

<symbol id="alert" viewBox="0 0 86 86">
    <!-- 警示图标 -->
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
    <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

播放Ширина и высота значка также86px,下载Ширина значка64pxвысокий71px. Таким образом, соответствующий код для нашего шаблона значка должен быть таким:

<symbol id="alert" viewBox="0 0 86 86">
    <!-- 警示图标 -->
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
    <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
</symbol>

<symbol id="play" viewBox="0 0 86 86">
    <!-- 播放图标 -->
    <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
    <polygon points="35 23, 60 43, 35 63" />
</g>

<symbol id="download" viewBox="0 0 64 71">
    <!-- 下载图标 -->
    <path d="
    M 18 3
    L 46 3
    L 46 40
    L 61 40
    L 32 68
    L 3 40
    L 18 40
    Z
    "></path>
</symbol>

12. Использование<use>разместить шаблон

Теперь мы можем использовать значок нашего шаблона точно так же, как нашу композицию. Однако мы также предоставим атрибуты ширины и высоты, которые были установлены как100pxзначок:

<use href="#alert" x="100" y="200" width="100" height="100"></use>
<use href="#play" x="300" y="200" width="100" height="100"></use>
<use href="#download" x="500" y="200" width="100" height="100"></use>

Вы увидите каждый значок на основе шаблона, аккуратно дополненный и центрированный по длине и ширине.100pxв пространстве:

模板

Попробуйте использовать комбинированный значок на основе<use>Добавьте атрибуты ширины и высоты к элементам. Вы обнаружите, что ничего не изменилось. Это связано с тем, что браузеры полагаются наviewBoxзначение (комбинация не имеет этого значения), чтобы определить, как масштабировать значок.

Суммировать

Вот полный код:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Hand Coded SVG</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      background: #e9e9e9;
    }

    body {
      margin: 0;
      text-align: center;
    }

    .grid {
      width: 750px;
      height: 500px;
      margin: 0 auto;
      padding-top: 100px;
      padding-left: 100px;
      background-image: url('grid.png');
      position: relative;
    }

    .grid::before {
      content: "";
      border-left: 1px solid #7c7cea;
      position: absolute;
      top: 0;
      left: 100px;
      width: 750px;
      height: 600px;
    }

    .grid::after {
      content: "";
      border-top: 1px solid #7c7cea;
      position: absolute;
      top: 100px;
      left: 0;
      width: 850px;
      height: 500px;
    }

    svg {
      stroke: rgb(0, 0, 0);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
  </style>
</head>

<body>
  <div class="grid">
    <svg width="750" height="500">
      <defs>
        <g id="leftalign">
          <!-- Left align icon made with lines -->
          <line x1="3" y1="3" x2="48" y2="3"></line>
          <line x1="3" y1="19" x2="65" y2="19"></line>
          <line x1="3" y1="35" x2="48" y2="35"></line>
          <line x1="3" y1="51" x2="65" y2="51"></line>
        </g>

        <g id="rightcaret">
          <!-- Right caret icon made with a polyline -->
          <polyline points="
            3 3
            30 28
            3 53
          "></polyline>
        </g>

        <g id="browser">
          <!-- Browser icon made with rectangle and lines -->
          <rect x="3" y="3" width="80" height="60"></rect>
          <line x1="3" y1="19" x2="83" y2="19"></line>
          <line x1="20" y1="3" x2="20" y2="17"></line>
        </g>

        <symbol id="alert" viewBox="0 0 86 86">
          <!-- Alert icon made with ellipses and a line -->
          <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
          <ellipse style="fill:black;" cx="43" cy="65" rx="5" ry="5"></ellipse>
          <line style="stroke-width: 8;" x1="43" y1="19" x2="43" y2="48"></line>
        </symbol>

        <symbol id="play" viewBox="0 0 86 86">
          <!-- Play icon made with ellipse and polygon -->
          <ellipse cx="43" cy="43" rx="40" ry="40"></ellipse>
          <polygon points="35 23, 60 43, 35 63" />
          </g>

          <symbol id="download" viewBox="0 0 64 71">
            <!-- Download icon made with path -->
            <path d="
                M 18 3
                L 46 3
                L 46 40
                L 61 40
                L 32 68
                L 3 40
                L 18 40
                Z
            "></path>
          </symbol>
      </defs>
      <use href="#leftalign" x="100" y="100"></use>
      <use href="#rightcaret" x="300" y="100"></use>
      <use href="#browser" x="500" y="100"></use>
      <use href="#alert" x="100" y="200" width="100" height="100"></use>
      <use href="#play" x="300" y="200" width="100" height="100"></use>
      <use href="#download" x="500" y="200" width="100" height="100"></use>
    </svg>
  </div>
</body>

</html>

Это касается почеркаSVGСуть раскрыта! Подведем итог тому, что мы узнали:

  • установите свой<svg>элемент, чтобы обернуть всю вашу графику.
  • использовать<line>и<polyline>для создания линий.
  • использовать<rect>, <ellipse>и<polygon>для создания замкнутых фигур.
  • использовать<path>для создания любой формы, которую вы хотите.
  • использовать<g>комбинировать фигуры.
  • Для комбинаций, требующих дополнительных функций<symbol>
  • использовать<defs>Элементы определяют композиции и шаблоны.
  • использовать<use>элементы для размещения определенных композиций и шаблонов.

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

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

Ссылки по теме


оригинал:How to Hand Code SVG

автор:Kezz Bracey

Переводчик: Уилл Ван