Добро пожаловать в команду веб-разработчиков 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>
элемент создает это左对齐
Значок для запуска:
вы будете использоватьline
4 атрибута элемента:
-
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
, и вы уверены, что можете написать от руки часть своей графики. Приложения в стиле дизайна по-прежнему являются жизнеспособным подходом для более сложной графики, но вы можете многое сделать с имеющимися в вашем распоряжении строительными блоками и получить преимущества скорости и контроля рукописного кода.
Ссылки по теме
- Complete SVG element reference
<svg>
element reference<line>
element reference<polyline>
element reference<rect>
element reference<ellipse>
element reference<polygon>
element reference<path>
element referenced
attribute reference<defs>
element reference<g>
element reference<use>
element reference<symbol>
element reference
оригинал:How to Hand Code SVG
автор:Kezz Bracey
Переводчик: Уилл Ван