Latest web development tutorials

SVG Справочное руководство

SVG элемент

элемент объяснение свойство
<a> Создать ссылку вокруг SVG элемента XLink: показать
XLink: приводить в действие
XLink: HREF
мишень
<AltGlyph> Позволяет объекту текста управления, чтобы оказывать специальные данные символов х
Y
дх
ду
вращать
glyphRef
формат
XLink: HREF
<AltGlyphDef> Она определяется как последовательность символов, чтобы заменить ID
<AltGlyphItem> Заменить определение серии символов, как кандидата ID
<Animate> Динамическое изменение свойств с течением времени Имя_атрибута = "имя целевого атрибута"
от = "начальное значение"
к = "Конечное значение"
дур = "Продолжительность"
RepeatCount = "время анимации будет происходить."
<AnimateColor> В течение долгого времени, определение преобразования цветов по = "Относительное смещение значения"
от = "начальное значение"
к = "Конечное значение"
<AnimateMotion> Так что элемент перемещается вдоль траектории движения calcMode = "режим анимации интерполяция может быть 'дискретное', 'линейный', 'прошелся', 'сплайн"
Путь = "путь движения"
Ключевые точки = "по пути движения объекта настоящего времени должен быть перемещен далеко."
вращать = "применить преобразование поворота."
XLink: HREF = "URI ссылается на элемент <путь>, который определяет траекторию движения."
<AnimateTransform> Анимация целевой элемент преобразования свойство, что делает управления анимацией панорамирование, масштабирование, поворот, наклон или по = "Относительное смещение значения"
от = "начальное значение"
к = "Конечное значение"
тип = "преобразованный тип, значение которого меняется с течением времени может быть 'перевести', 'масштаб', 'поворот', 'skewX', 'skewY'"
<Круг> Определение круга СХ = "по оси Х координата окружности."
CY = "Y-ось координата окружности."
г = "радиус окружности." Обязательно.

+ Показать атрибуты: цвет, FillStroke, графики
<ClipPath> Используется для скрытия объектов, расположенных за пределами участка отсечения путь. Рисование и то, что не определяет, что называется чертеж штампа отсечения путь клип путь = "ссылки и ссылки отсечения пересекают пути отсечения путь."
clipPathUnits = "UserSpaceOnUse 'или' ObjectBoundingBox". Второе значение Childern границы объекта, используя небольшую часть блока маски (по умолчанию: "UserSpaceOnUse") "
<Color-профиль> Описание указанный цвет профиля (при использовании файла стиля CSS) локальная = "цвет профиля сохраняется локально уникальный идентификатор"
имя = ""
рендеринг намерения = "авто | перцептивного | относительного колориметрического | насыщения | абсолютного колориметрический"
XLink: HREF = "Профиль ICC ресурса URI"
<Курсор> Определите независимый от платформы пользовательский курсор х = "ось х левый верхний угол курсора (по умолчанию 0)."
у = "ось у верхнего левого угла курсора (по умолчанию 0)."
XLink: HREF = "Использовать изображение курсора URI
<Defs> опорный элемент контейнера
<Описание изделия> Чистые элементы в тексте описания SVG - не как часть графического объекта для отображения. Агенты пользователей могут отображаться в виде всплывающей подсказки
<Ellipse> Определение эллипса СХ = "Овал оси х координат"
су = "овал ось у координат"
гх = "вдоль оси х радиуса эллипса." Обязательный параметр.
гу = "продолговатые по радиусу оси у." Обязательный параметр.

+ Показать атрибуты: цвет, FillStroke, графики
<FeBlend> Использование различных режимов смешивания для синтеза двух объектов вместе Mode = "режимы наложения изображения: нормальный | умножать | экран | темнеют | осветлить"
в = "идентифицирован как данный фильтр сырья на входе: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <фильтр-примитивно-ссылка>"
in2 = "второго входного изображения операция смешивания."
feColorMatrix SVG-фильтр. Подходят матрица преобразования
feComponentTransfer SVG-фильтр. покомпонентная данные Исполнение переназначение
feComposite SVG Фильтры
feConvolveMatrix SVG Фильтры
feDiffuseLighting SVG Фильтры
feDisplacementMap SVG Фильтры
feDistantLight SVG-фильтр. Определение источника света
feFlood SVG Фильтры
feFuncA SVG-фильтр. Дочерние элементы feComponentTransfer
feFuncB SVG-фильтр. Дочерние элементы feComponentTransfer
feFuncG SVG-фильтр. Дочерние элементы feComponentTransfer
feFuncR SVG-фильтр. Дочерние элементы feComponentTransfer
feGaussianBlur SVG-фильтр. Исполнительный Гауссово размывание изображения
feImage SVG-фильтр.
feMerge SVG-фильтр. Построенный на вершине каждого другого слоя изображения
feMergeNode SVG-фильтр. Дочерние элементы feMerge
feMorphology SVG-фильтр. Реализация "откорма" или "прореживания" источника Graphics
feOffset SVG-фильтр. По сравнению с текущей позиции движущегося изображения
fePointLight SVG Фильтры
feSpecularLighting SVG Фильтры
feSpotLight SVG Фильтры
feTile SVG Фильтры
feTurbulence SVG Фильтры
фильтр Эффекты Контейнерный фильтр
шрифт Пользовательские шрифты
шрифт-лицо Опишите характеристики шрифта
шрифт-лицом формат
шрифта-имя-лица
шрифт-лицо-SRC
шрифта лицом URI
foreignObject
<G> Контейнерный элемент для комбинации связанных элементов ID = "название группы."
заполнить = "цвет заливки группы."
Непрозрачность = "Группа непрозрачности"

+ Показать свойства:
все
глиф Для заданного иероглиф пользовательской графики
glyphRef Определение Pictograph может быть использовано
hkern
<Изображение> Пользовательские изображения х = "по оси Х координата верхнего левого угла изображения."
Y = "Y-ось координаты верхнего левого угла изображения."
ширина = "ширина изображения." обязательно.
высота = "высота изображения." обязательно.
XLink :. HREF = "путь изображения" обязательно.

+ Показать свойства:
Цвет, графика, изображения, ВЭкрана
<Line> Определить линию x1 = "X-координата начальной точки прямой линии."
y1 = "Y координаты начальной точки по прямой линии."
x2 = "х-координата прямой линии конечной точки."
у2 = "Y координата прямой линии конечной точки."

+ Показать свойства:
Цвет, FillStroke, графика, маркеры
<LinearGradient> Определим линейный градиент. С помощью линейного градиента заполнения векторных объектов, и могут быть определены как горизонтальной, вертикальной или угол градиента. ID = "атрибут ID может определить уникальное имя для градиента. ссылки должны"
gradientUnits = " 'UserSpaceOnUse' или 'ObjectBoundingBox'. Используйте окно просмотра или объект для определения относительного положения вектора точки. (по умолчанию 'ObjectBoundingBox)"
gradientTransform = "применяется для изменения градиента"
x1 = "х начальной точки вектор градиента (по умолчанию 0%)"
y1 = "Y точки вектор градиента старт (по умолчанию 0%)"
x2 = "конец градиента вектора х. (по умолчанию 100%)"
у2 = "конец градиента вектора у. (по умолчанию 0%)"
spreadMethod = "" подушечка "или" отражать "или" повторение "
XLink: HREF = "ссылка на другой градиент, значения которого атрибут используются в качестве значения по умолчанию и остановки включены рекурсивным."
<Маркер> Метка может быть размещена на вершине линии, ломаные линии, многоугольники, и путей. Эти элементы могут быть использованы maeker свойство "maeker-старт", "maeker-середине" и "maeker-конец", Наследование по умолчанию, или может быть установлен в URI "нет" или определенных тегов. Необходимо определить тэг, прежде чем он может ссылаться на URI. Любой вид формы, вы можете поставить метки на внутренней стороне. Когда они черпают элементы, чтобы прикрепить их к началу markerUnits = "strokeWidth" или "UserSpaceOnUse". Если strokeWidth ", то использование блока равна ширине хода. В противном случае, не используйте один и тот же вид тега масштаба блока в качестве опорного элемента (по умолчанию 'strokeWidth')"
refx = "соединения вершин место маркер (по умолчанию 0)."
refy = "место маркера вершинные соединения (по умолчанию 0)."
Orient = " 'Авто' всегда угол знака дисплея." Авто "будет рассчитываться под углом таким образом, что X-ось вершины касательной (по умолчанию 0)
markerWidth = "ширина отмечен (по умолчанию 3)."
markerHeight = "высота отмечен (по умолчанию 3)."
Viewbox = "точки" увидеть "это SVG область рисования. 4 значения, разделенные пробелами или запятыми. (мин х, у мин, ширина, высота)"

+ Представление атрибутов:
все
<Маска> Экранирование представляет собой сочетание не-резки и значений прозрачности. Как и кадрирование, вы можете использовать некоторые графики, текст или путь определяется маску. По умолчанию состояние маски является полностью прозрачным, то есть противоположность отсекающего плоскости. В непрозрачной части маски шаблон настройки маски maskUnits = "." UserSpaceOnUse 'или' ObjectBoundingBox 'установлен ли плоскость отсечения относительно неповрежденными окно или объект (по умолчанию:' ObjectBoundingBox ') "
maskContentUnits = "положение относительно объекта второй шаблон маски по процентному 'UserSpaceOnUse' или 'ObjectBoundingBox' (по умолчанию: 'UserSpaceOnUse')"
х = "плоскости отсечения маски (по умолчанию: -10%)."
у = "плоскости отсечения маски (по умолчанию: -10%)."
ширина = "плоскости отсечения маски (по умолчанию: 120%)."
высота = "плоскости отсечения маски (по умолчанию: 120%)."
метаданные Указано метаданные
недостающий-глиф
mpath
<Путь> Определить путь d = "путь определенные команды"
длина пути = "Если есть, то путь будет масштабироваться для того, чтобы вычислить эквивалентное значение указывает на длину этого пути"
преобразование = "Список преобразования"

+ Показать свойства:
Цвет, FillStroke, графика, маркеры
<Шаблон> DET, размер вы хотите, чтобы посмотреть дисплеи и представления. Затем добавьте к вашей форме режима. Эта картина повторяется ударил край зрения коробки (видимый диапазон) ID = "уникальный идентификатор используется для ссылки на этот шаблон." требуется.
patternUnits = "UserSpaceOnUse 'или' ObjectBoundingBox". Второе значение X, Y, ширина, высота рамы режим с использованием небольшой части объекта, блок (%). "
patternContentUnits = " 'UserSpaceOnUse' или 'ObjectBoundingBox'"
patternTransform = "позволяет все выражение для преобразования"
х = "Режим смещения от верхнего левого угла (по умолчанию 0)."
у = "режим смещения от верхнего левого угла (по умолчанию 0)."
ширина = "Ширина диаграммы направленности плитки (по умолчанию 100%)."
высота = "высота рисунок плитки (по умолчанию 100%)."
Viewbox = "точки" увидеть "это SVG область рисования. 4 значения, разделенные пробелами или запятыми. (мин х, у мин, ширина, высота)"
XLink: HREF = "Еще одна модель, свойство имеет значение по умолчанию, и любой подкласс может наследовать рекурсию."
<Polygon> Определяет чертеж содержит по меньшей мере три стороны точки = "точка многоугольника. Общее число точек должно быть четным." Обязательный параметр.
заполнить правило = "раздел FillStroke атрибут презентации"

+ Показать свойства:
Цвет, FillStroke, графика, маркеры
<Polyline> Определить любую форму только прямые точки полилинии = "точка". Обязательный параметр.

+ Показать свойства:
Цвет, FillStroke, графика, маркеры
<RadialGradient> Определение радиоактивного постепенно. Создать радиальным градиентом круг gradientUnits = " 'UserSpaceOnUse' или 'ObjectBoundingBox'. Используйте окно просмотра или объект для определения относительного положения точек вектора. (по умолчанию 'ObjectBoundingBox)"
gradientTransform = "применяется для преобразования градиентов"
сх = "центральная точка градиента (цифры или% - 50% по умолчанию)."
су = "центральная точка градиента. (по умолчанию 50%)."
г = "Постепенное радиус. (по умолчанию 50%)."
FX = "средоточием градиента. (по умолчанию 0%)"
FY = "средоточием градиента. (по умолчанию 0%)"
spreadMethod = "" подушечка "или" отражать "или" повторение "
XLink: HREF = "ссылка на другой градиент которого значение свойства в качестве рекурсии по умолчанию."
<Прямоугольный> Определить прямоугольник х = "ось х верхний левый угол прямоугольника."
Y = "ось у верхнего левого угла прямоугольника."
гх = "Радиус (круглый элемент) ось х."
Ry = "радиус оси у (круглый элемент)"
ширина = "ширина прямоугольника." Обязательный параметр.
высота = "высота прямоугольника." Обязательный параметр.

+ Показать свойства:
Цвет, FillStroke, Графика
скрипт Контейнер Script. (Такие, как ECMAScript)
комплект Установка значения свойства в течение заданного времени
<Стоп> Градиент остановка смещение = "Стоп Offset (0-1 / 0% до 100%)." Справочник
стоп-цвет = "цвет эта остановка"
стоп-непрозрачность = "Остановить непрозрачность из (0-1)."
стиль Таблицы стилей могут быть встроены непосредственно в содержание SVG
<SVG> Создать фрагмент SVG документа х = "встроенный в верхнем левом углу (по умолчанию 0)."
у = "встроенный в верхнем левом углу (по умолчанию 0)."
ширина = "ширина фрагмента SVG (по умолчанию 100%)."
высота = "высота SVG фрагмента (по умолчанию 100%)."
Viewbox = "точки" видели "в этом SVG области рисования. 4 значения, разделенные пробелами или запятыми. (мин х, мин у, ширина, высота)"
preserveAspectRatio = " 'ни' или 'любой' xVALYVAL девять комбинаций, VAL не" мин "," середина "или" максимум ". (по умолчанию нет)"
zoomAndPan = " 'Magnify' или 'опция disable'.Magnify позволяет пользователям панорамирование и масштабирование файлов (по умолчанию)" возвеличивать
= "Элемент наружный <SVG> и его необходимо установить SVG пространство имен: Xmlns =" ​​XML http://www.w3.org/2000/svg~~HEAD=dobj~~number=plural "Xmlns: XLink =" HTTP: //www.w3. орг / 1999 / XLink "XML: пространство =" сохранить ""

+ Показать свойства:
все
переключатель
символ
<Текст> Определить текст х = "список X - .. Положение вала в тексте в месте расположения первых п символов п-й оси х, если есть лишние символы позади, утомлен после последней позиции знака они размещены 0 по умолчанию."
Y = "Y-оси положение списка. (см х) 0 является значением по умолчанию."
дх = "движутся относительно нарисованный последний символ в длине списка символов в абсолютной позиции (см х)"
ду = "движутся относительно нарисованный последний символ в длине списка символов в абсолютной позиции (см х)"
вращать = "вращающийся список п-го вращения п первых символов. дополнительные символы не дают окончательного значения спина"
textLength = "SVG Viewer попытается показать интервал между / шрифта текста или отрегулировать длину целевого текста (по умолчанию: нормальная длина текста)."
lengthAdjust = "говорит зрителю, если вы попытаетесь указать длину регулировать для отображения текста. Эти два значения" разнос "и" spacingAndGlyphs "

+ Показать свойства:
Цвет, FillStroke, Графика, FontSpecification, TextContentElements
textPath
название Чистые элементы в тексте описания SVG - не как часть графического объекта для отображения. Агенты пользователей могут отображаться в виде всплывающей подсказки
<Треф> Обратитесь к любому SVG документа элемента <текст> и повторное использование Тот же элемент <TEXT>
<Tspan> Элемент эквивалентно <текст>, но он может быть вложен в самом тексте и внутреннего знака Идентичный элемент <текст>
+ Дополнительно:
XLink: HREF = "ссылка на элемент <текст>"
<Использование> URI ссылка используя свойство <G>, <> или SVG другой имеет уникальный идентификатор и повторяющиеся графические элементы. Скопируйте исходный элемент, поэтому наличие исходного файла только ссылка. Оригинал влияет на какие-либо изменения во всех экземплярах. х = "верхний левый элемент оси х клона"
у = "верхний левый элемент клон Y-ось"
ширина = "клонированием ширина элемента"
высота = "высота клонировании элемента"
XLink: HREF = "URI ссылки Клонирование элемент"

+ Показать свойства:
все
вид
vkern