English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Руководство по SVG собирает часто используемые элементы SVG, а также методы использования свойств элементов и подробные параметры использования, описания и т.д.
| элемент | описание | атрибут |
|---|---|---|
| <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="имя целевого свойства" from="起始值" to="结束值" dur="длительность" repeatCount="количество повторений анимации времени" |
| <animateColor> | определение цветовой трансформации в зависимости от времени | by="相对偏移值" from="起始值" to="结束值" |
| <animateMotion> | перемещение элемента по траектории действия | calcMode="метод интерполяции анимации. Может быть 'discrete',"
"linear", "paced", "spline" path="путь движения" keyPoints="расстояние, на которое объект должен переместиться по пути движения в текущий момент времени" rotate="применение вращательного преобразования" xlink:href="URI-ссылка на элемент <path>, который определяет путь движения" |
| <animateTransform> | Анимация предыдущего целевого элемента преобразования свойств, чтобы контролировать анимацию перемещения, масштабирования, вращения или наклона | by="相对偏移值" from="起始值" to="结束值" type="类型的转换其值是随时间变化。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | 定义一个圆 | cx="圆的x轴坐标" cy="圆的y轴坐标" r="圆的半径". 必需. + 显示属性：颜色，FillStroke，图形 |
| <clipPath> | 用于隐藏位于剪切路径以外的对象部分。定义绘制什么和什么不绘制的模具被称为剪切路径 | clip-path="引用剪贴路径和引用剪贴路径交叉" clipPathUnits="userSpaceOnUse'或'objectBoundingBox"。第二个值childern一个对象的边框，会使用掩码的一小部分单位（默认："userSpaceOnUse"）" |
| <color-profile> | 指定颜色配置文件的说明（使用CSS样式文件时） | local="本地存储颜色配置文件唯一ID" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="ICC配置文件资源URI" |
| <cursor> | 定义一个独立于平台的自定义光标 | x="x轴左上角光标（默认为0）" y="y轴的左上角光标（默认为0）" xlink:href="使用光标图像URI |
| <defs> | 引用的元素容器 | |
| <desc> | Чистый текстовый опись элементов SVG - не как часть графики для отображения. Пользовательский агент будет отображать его как подсказку | |
| <ellipse> | 定义一个椭圆 | cx="椭圆x轴坐标" cy="椭圆y轴坐标" rx="沿x轴椭圆形的半径"。必需。 ry="沿y轴长椭圆形的半径"。必需。 + 显示属性：颜色，FillStroke，图形 |
| <feBlend> | 使用不同的混合模式将两个对象合成在一起 | mode="图像混合模式：normal|multiply|screen|darken|lighten" in="标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" 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 фильтр. Выполняет "утолщение" или "уменьшение" источника | |
| 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="имя группы" fill="цвет заливки группы" opacity="некая неопределенность группы" + Свойства显现: Все |
| glyph | Определение графического элемента для заданного иероглифа | |
| glyphRef | Определение возможных иероглифов для использования | |
| hkern | ||
| <image> | Определение изображения | x="координата x верхнего левого угла изображения" y="координата y верхнего левого угла изображения" width="ширина изображения". Обязателен. height="высота изображения". Обязателен. xlink:href="путь к изображению". Обязателен. + Свойства显现: Цвет, Графика, Изображения, Вьюпорты |
| <line> | определение линии | x1="координата x начала прямой" y1="координата y начала прямой" x2="координата x конца прямой" y2="координата y конца прямой" + Свойства显现: Цвет, FillStroke, Графика, Маркеры |
| <linearGradient> | определение линейного градиента. Через использование векторного линейного градиента для заливки объектов и их можно определить как горизонтальные, вертикальные или угловые градиенты. | id="атрибут id может определить уникальное имя для градиента. Ссылка должна быть" gradientUnits="'userSpaceOnUse' или 'objectBoundingBox'. Используйте рамку просмотра или объект для определения относительных векторных точек. (по умолчанию 'objectBoundingBox')" gradientTransform="применение преобразования к градиенту" x1="точка старта векторной градиентной оси x (по умолчанию 0%)" y1="точка старта векторной градиентной оси y (по умолчанию 0%)" x2="конец векторной градиентной оси x. (по умолчанию 100%)" y2="конец векторной градиентной оси y. (по умолчанию 0%)" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="ссылка на другой градиент, атрибуты которого используются в качестве по умолчанию включены defaults и stops. Рекурсивно |
| <marker> | маркер может быть размещен на вершинах прямой, ломаной, многоугольника и пути. Эти элементы могут использовать атрибуты "marker-start", "marker-mid" и "marker-end", наследующиеся по умолчанию или установленные в "none" или определенный URI маркера. Вы должны сначала определить маркер, затем можно ссылаться на него через его URI. Любая форма может содержать маркер внутри. Они добавляются к верху при рисовании элементов | markerUnits="strokeWidth' или 'userSpaceOnUse'. Если 'strokeWidth', то используется единица, равная ширине штриха. В противном случае, масштаб маркера не будет использовать ту же визуальную единицу в качестве элемента ссылки (по умолчанию 'strokeWidth') refx="положение вершины маркера для соединения (по умолчанию 0") refy="положение вершины маркера для соединения (по умолчанию 0") orient="'auto' всегда отображает угол маркера. "auto" вычисляет угол, чтобы значение тангенса вершины X оси (по умолчанию 0) markerWidth="ширина маркера (по умолчанию 3") markerHeight="высота маркера (по умолчанию 3") viewBox="各点"看到"这个SVG绘图区域。由空格或逗号分隔的4个值。(min x, min y, width, height)" + presentation attributes: Все |
| <mask> | 度屏蔽是一种不透明度值的组合和裁剪。像裁剪，您可以使用图形，文字或路径定义掩码的部分。一个掩码的默认状态是完全透明的，也就是裁剪平面的对面的。在掩码的图形设置掩码的不透明部分 | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'.设定裁剪面是否是相对完整的视窗或对象（默认：'objectBoundingBox'）" maskContentUnits="第二个掩码相对对象的图形位置使用百分比'userSpaceOnUse'或'objectBoundingBox'（默认：'userSpaceOnUse'）" x="裁剪面掩码（默认值：-10％）" y="裁剪面掩码（默认值：-10％）" width="裁剪面掩码（默认是：120％）" height="裁剪面掩码（默认是：120％）" |
| metadata | 指定元数据 | |
| missing-glyph | ||
| mpath | ||
| <path> | 定义一个路径 | d="定义路径指令" pathLength="如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度" transform="转换列表" + Свойства显现: Цвет, FillStroke, Графика, Маркеры |
| <pattern> | 定义坐标，你想要的视图显示和视图的大小。然后添加到您的模式形状。该模式命中时重复视图框的边缘（可视范围） | id="用于引用这个模式的唯一ID。"必需的。 patternUnits="userSpaceOnUse'或'objectBoundingBox"。第二个值X，Y，width，height 一个会使用模式对象的边框的小部分，单位（％）。" patternContentUnits="'userSpaceOnUse'或 'objectBoundingBox'" patternTransform="允许整个表达式进行转换" x="模式的偏移量，来自左上角（默认为0）" y="模式的偏移量，来自左上角（默认为0）" width="模式平铺的宽度（默认为100％）" height="模式平铺的高度（默认为100％）" viewBox="各点"看到"这个SVG绘图区域。由空格或逗号分隔的4个值。(min x, min y, width, height)" xlink:href="Другой шаблон, значения свойств по умолчанию и любые подклассы могут наследовать. Рекурсивно" |
| <polygon> | Определите графическую фигуру, содержащую как минимум три стороны | points="точки многоугольника. Количество точек должно быть четным". Обязателен. fill-rule="Показывает часть FillStroke для демонстрации свойств" + Свойства显现: Цвет, FillStroke, Графика, Маркеры |
| <polyline> | Определите произвольную форму, состоящую только из линий | points="точки" на линии. Обязателен. + Свойства显现: Цвет, FillStroke, Графика, Маркеры |
| <radialGradient> | Определите радиальный градиент. Радиальный градиент создает круг | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Используйте видоэлемент или объект для определения векторных точек относительного положения. (по умолчанию 'objectBoundingBox')" gradientTransform="Преобразование, применяемое к градиенту" cx="Центр градиента (число или % - 50% по умолчанию)" cy="Центр градиента. (по умолчанию 50%)" r="Радиус градиента. (по умолчанию 50%)" fx="Фокус градиента. (по умолчанию 0%)" fy="Фокус градиента. (по умолчанию 0%)" spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="Указание на другой градиент, его значения свойств используются по умолчанию. Рекурсивно" |
| <rect> | Определите прямоугольник | x="Ось X верхнего левого угла прямоугольника" y="Ось Y верхнего левого угла прямоугольника" rx="Радиус по оси X (элемент round)" ry="Радиус по оси Y (элемент round)" width="Ширина прямоугольника. Обязателен." height="Высота прямоугольника. Обязателен." + Свойства显现: Цвет, FillStroke, Графика |
| script | Контейнер скрипта. (например, ECMAScript) | |
| set | Установите значение属性 для указанного времени | |
| <stop> | Остановки градиента | offset="Смещение остановки (от 0 до 1/от 0% до 100%). Смотрите также stop-color="Цвет этого stop" stop-opacity="Непрозрачность этого Stop (от 0 до 1)" |
| style | Позволяет напрямую嵌入 таблицу стилей в содержимое SVG | |
| <svg> | Создание фрагмента документа SVG | x="Вставка в верхний левый угол (по умолчанию 0)" y="Вставка в верхний левый угол (по умолчанию 0)" width="Ширина фрагмента SVG (по умолчанию 100%)" height="Высота SVG фрагмента (по умолчанию 100%)" viewBox="Пункт seen" этой области SVG-рисования. Четыре значения, разделённые пробелом или запятой. (min x, min y, ширина, высота)" preserveAspectRatio="'none' или любые 9 комбинации 'xVALYVAL', где VAL - 'min', 'mid' или 'max'. По умолчанию none" zoomAndPan="'масштабирование' или 'отключить'. Опция масштабирования позволяет пользователю масштабировать и перемещать ваш файл (по умолчанию Масштабирование )" xml="Внешний элемент <svg> требует установки SVG и его пространства имён: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" + Свойства显现: Все |
| switch | ||
| symbol | ||
| <text> | Определение текста | x="Позиция по оси X списка. В тексте позиция n-го символа по оси x в n-ом месте. Если есть дополнительные символы, они будут расположены после последнего символа. 0 по умолчанию" y="Позиция по оси Y списка. 0 по умолчанию (/reference x )" dx="Перемещение в списке длины символов относительно абсолютного положения последнего нарисованного знака (/reference x )" dy="Перемещение в списке длины символов относительно абсолютного положения последнего нарисованного знака ( 参考 x )" rotate="Список вращения. nth-ое вращение - nth-й символ. Дополнительные символы не имеют последнего значения вращения" textLength="SVG просмотрщик будет пытаться отобразить интервал между текстом или текстовый целевой размер с корректировкой глифов. По умолчанию: длина обычного текста" lengthAdjust="Информирует просмотрщика, если указана длина, попробуйте изменить её для отображения текста. Эти значения - 'spacing' и 'spacingAndGlyphs'" + Свойства显现: Цвет, Заполнение и Рисование, Графика, Спецификация шрифта, Элементы текстового содержимого |
| textPath | ||
| title | Чистый текстовый опись элементов SVG - не как часть графики для отображения. Пользовательский агент будет отображать его как подсказку | |
| <tref> | Упоминание любого элемента <text> в документе SVG и повторное использование | Однообразные элементы <TEXT> |
| <tspan> | Элемент эквивалентен <text>, но может содержать текстовые маркеры внутри и внутри себя | Идентичен элементу <text> + Кроме того: xlink:href="ссылка на <TEXT> элемент" |
| <use> | Использование URI для ссылки на <G>, <svg> или другие элементы с уникальным идентификатором и повторяющимися графическими элементами. Клонирован элемент является оригиналом, поэтому оригинал в файле является только справкой. Любые изменения в оригинале влияют на все копии. | x="координата X верхнего левого угла клонированного элемента" y="координата Y верхнего левого угла клонированного элемента" width="ширина клонированного элемента" height="высота клонированного элемента" xlink:href="URI-ссылка на клонированный элемент" + Свойства显现: Все |
| view | ||
| vkern |