Форум | Последние учебники веб-разработки
 

SVG Справка


SVG Elements

Элемент Описание Атрибуты
<a> Создает ссылку вокруг SVG элементов xlink:show
xlink:actuate
xlink:href
target
<altGlyph> Обеспечивает контроль над глифов, используемых для визуализации определенных данных символов x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> Определяет набор символов для подстановки id
<altGlyphItem> Определяет набор кандидатов глиф замен id
<animate> Определяет, как атрибут элемента меняется с течением времени attributeName="the name of the target attribute"
by="a relative offset value"
from="the starting value"
to="the ending value"
dur="the duration"
repeatCount="the number of time the animation will take place"
<animateMotion> Вызывает элемент, на который ссылается двигаться вдоль траектории движения calcMode="the interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'"
path="the motion path"
keyPoints="how far along the motion path the object shall move at the moment in time"
rotate="applies a rotation transformation"
xlink:href="an URI reference to the <path> element which defines the motion path"
<animateTransform> Анимирует атрибут преобразования на целевом элементе, что позволяет анимации контролировать перемещение, масштабирование, вращение и / или наклоне by="a relative offset value"
from="the starting value"
to="the ending value"
type="the type of transformation which is to have its values change over time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle> Определяет круг cx="the x-axis center of the circle"
cy="the y-axis center of the circle"
r="The circle's radius". Required.

+ presentation attributes:
Color, FillStroke, Graphics
<clipPath> Отсечение прятать то, что обычно будет нарисован. Трафарет, который определяет, что является и что не нарисованный называется вырезка путь clip-path="the referenced clipping path is intersected with the referencing clipping path"
clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of children a fraction of the object bounding box which uses the mask (default: 'userSpaceOnUse') "
<color-profile> Задает описание цвета профиля (если документ оформлен с использованием CSS) local="the unique ID for a locally stored color profile"
name=""
rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric"
xlink:href="the URI of an ICC profile resource"
<cursor> Определяет независимый от платформы пользовательский курсор x="the x-axis top-left corner of the cursor (default is 0) "
y="the y-axis top-left corner of the cursor (default is 0) "
xlink:href="the URI of the image to use as the cursor
<defs> Контейнер для указанных элементов  
<desc> Текстовое описание только для контейнерных элементов или графических элементов в SVG (ПА могут отображать текст в виде всплывающей подсказки)  
<ellipse> Определяет эллипс cx="the x-axis center of the ellipse"
cy="the y-axis center of the ellipse"
rx="the length of the ellipse's radius along the x-axis". Required.
ry="the length of the ellipse's radius along the y-axis". Required.

+ presentation attributes:
Color, FillStroke, Graphics
<feBlend> Составляет два объекта вместе в соответствии с определенным режимом смешивания mode="the image blending modes: normal|multiply|screen|darken|lighten"
in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="the second input image to the blending operation"
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-фильтр. Выполняет "fattening" или "thinning" на исходном графике  
feOffset SVG-фильтр. Перемещает изображение относительно его текущей позиции  
fePointLight SVG-фильтр.  
feSpecularLighting SVG-фильтр.  
feSpotLight SVG-фильтр.  
feTile SVG-фильтр.  
feTurbulence SVG-фильтр.  
filter Контейнер для эффектов фильтра  
font Определяет шрифт  
font-face Описывает характеристики шрифта  
font-face-format 
font-face-name 
font-face-src 
font-face-uri 
foreignObject 
<g> Используется для группировки элементов вместе id="the name of the group"
fill="the fill color for the group"
opacity="the opacity for the group"

+ presentation attributes:
All
glyph Определяет графику для данного глифа  
glyphRef Определяет возможный символ для использования  
hkern 
<image> Определяет изображение x="the x-axis top-left corner of the image"
y="the y-axis top-left corner of the image"
width="the width of the image". Required.
height="the height of the image". Required.
xlink:href="the path to the image". Required.

+ presentation attributes:
Color, Graphics, Images, Viewports
<line> Определяет строку x1="the x start point of the line"
y1="the y start point of the line"
x2="the x end point of the line"
y2="the y end point of the line"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<linearGradient> Определяет линейный градиент. Линейные градиенты заполнить объект с помощью вектора, и может быть определена как по горизонтали, вертикали или угловых градиентов. id="the unique id used to reference this pattern. Required to reference it"
gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') "
gradientTransform="the transformation to apply to the gradient"
x1="the x start point of the gradient vector (number or % - 0% is default) "
y1="the y start point of the gradient vector. (0% default) "
x2="the x end point of the gradient vector. (100% default) "
y2="the y end point of the gradient vector. (0% default) "
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<marker> Маркеры могут быть размещены на вершинах линии, полилинии, полигоны и пути. Эти элементы могут использовать marker атрибуты "marker-start" , "marker-mid" и "маркера" конец " , который унаследует по умолчанию , или может быть установлен в 'None' или URI из определенного маркера. Вы должны сначала определить маркер, прежде чем вы можете ссылаться на него через его URI. Любой вид формы можно поместить внутрь маркера. Они нарисованы на верхней части элемента, к которому они присоединены markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used then one unit equals one stroke width. Otherwise, the marker does not scale and uses the the same view units as the referencing element (default 'strokeWidth') "
refx="the position where the marker connects with the vertex (default 0) "
refy="the position where the marker connects with the vertex (default 0) "
orient="'auto' or an angle to always show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex (default 0) "
markerWidth="the width of the marker (default 3) "
markerHeight="the height of the marker (default 3) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "

+ presentation attributes:
All
<mask> Маскирование представляет собой сочетание значений непрозрачности и отсечение. Как и отсечения можно использовать формы, текст или пути, чтобы определить участки маски. По умолчанию состояние маски полностью прозрачен, которая является противоположностью плоскости отсечения. Графика в маске устанавливает, как непрозрачные участки маски являются maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Set whether the clipping plane is relative the full view port or object (default: 'objectBoundingBox') "
maskContentUnits="Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse') "
x="the clipping plane of the mask (default: -10%) "
y="the clipping plane of the mask (default: -10%) "
width="the clipping plane of the mask (default: 120%) "
height="the clipping plane of the mask (default: 120%) "
metadata Задает метаданные  
missing-glyph 
mpath 
<path> Определяет путь d="a set of commands which define the path"
pathLength="If present, the path will be scaled so that the computed path length of the points equals this value"
transform="a list of transformations"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<pattern> Определяет координаты, которые вы хотите вид, чтобы показать и размер представления. Затем вы добавляете формы в ваш шаблон. Картина повторяется , когда край вид коробки (viewing area) ударил id="the unique id used to reference this pattern." Required.
patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern."
patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'"
patternTransform="allows the whole pattern to be transformed"
x="pattern's offset from the top-left corner (default 0) "
y="pattern's offset from the top-left corner. (default 0) "
width="the width of the pattern tile (default 100%) "
height="the height of the pattern tile (default 100%) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "
xlink:href="reference to another pattern whose attribute values are used as defaults and any children are inherited. Recursive"
 
<polygon> Определяет графический элемент, который содержит, по меньшей мере, три стороны points="the points of the polygon. The total number of points must be even". Required.
fill-rule="part of the FillStroke presentation attributes"

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<polyline> Определяет любую форму, которая состоит только из прямых линий points="the points on the polyline". Required.

+ presentation attributes:
Color, FillStroke, Graphics, Markers
<radialGradient> Определяет радиальный градиент. Радиальные градиенты создаются принимая круг и плавно изменяя значения между остановками градиента от точки фокусировки к внешнему радиусу. gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') "
gradientTransform="the transformation to apply to the gradient"
cx="the center point of the gradient (number or % - 50% is default) "
cy="the center point of the gradient. (50% default) "
r="the radius of the gradient. (50% default) "
fx="the focus point of the gradient. (0% default) "
fy="The focus point of the gradient. (0% default) "
spreadMethod="'pad' or 'reflect' or 'repeat'"
xlink:href="Reference to another gradient whose attribute values are used as defaults and stops included. Recursive"
<rect> Определяет прямоугольник x="the x-axis top-left corner of the rectangle"
y="the y-axis top-left corner of the rectangle"
rx="the x-axis radius (to round the element) "
ry="the y-axis radius (to round the element) "
width="the width of the rectangle". Required.
height="the height of the rectangle" Required.

+ presentation attributes:
Color, FillStroke, Graphics
script Контейнер для сценариев (eg, ECMAScript)  
set Устанавливает значение атрибута в течение определенного времени  
<stop> Остановки для градиента offset="the offset for this stop (0 to 1/0% to 100%) ". Required.
stop-color="the color of this stop"
stop-opacity="the opacity of this stop (0 to 1) "
style Позволяет таблицы стилей для встраивания непосредственно в содержание SVG  
<svg> Создает фрагмент документа SVG x="top left corner when embedded (default 0) "
y="top left corner when embedded (default 0) "
width="the width of the svg fragment (default 100%) "
height="the height of the svg fragment (default 100%) "
viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) "
preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid) "
zoomAndPan="'magnify' or 'disable'. Magnify option allows users to pan and zoom your file (default magnify) "
xml="outermost <svg> element needs to setup SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""

+ presentation attributes:
All
switch 
symbol 
<text> Определяет текст x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. If there are additional characters after the positions run out they are placed after the last character. 0 is default"
y="a list of y-axis positions. (see x) . 0 is default"
dx="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) "
dy="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) "
rotate="a list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value"
textLength="a target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length) "
lengthAdjust="tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'"

+ presentation attributes:
Color, FillStroke, Graphics, FontSpecification, TextContentElements
textPath 
title Текст только для описания элементов в SVG - не отображается как часть графики. Агенты пользователей могут отображать текст в виде всплывающей подсказки  
<tref> Ссылки на любой <text> элемент в SVG документа и использовать его Identical to the <text> element
<tspan> Идентичный <text> элемент , но могут быть вложены в текстовые теги и внутри себя Identical to the <text> element
+ in addition:
xlink:href="Reference to a <text> element"
<use> Использует URI для ссылки на <г>, <svg> или другой графический элемент с уникальным идентификатором атрибута и повторить его. Копия только ссылка на оригинал настолько только оригинал существует в документе. Любое изменение к оригиналу влияет на все копии. x="the x-axis top-left corner of the cloned element"
y="the y-axis top-left corner of the cloned element"
width="the width of the cloned element"
height="the height of the cloned element"
xlink:href="a URI reference to the cloned element"

+ presentation attributes:
All
view 
vkern