From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- files/ru/web/svg/attribute/onload/index.html | 5 - files/ru/web/svg/element/a/index.html | 151 ++++++++++++ files/ru/web/svg/element/animate/index.html | 81 +++++++ files/ru/web/svg/element/animatemotion/index.html | 112 +++++++++ files/ru/web/svg/element/circle/index.html | 109 +++++++++ files/ru/web/svg/element/defs/index.html | 101 ++++++++ files/ru/web/svg/element/ellipse/index.html | 129 +++++++++++ files/ru/web/svg/element/feblend/index.html | 115 ++++++++++ files/ru/web/svg/element/foreignobject/index.html | 119 ++++++++++ files/ru/web/svg/element/g/index.html | 98 ++++++++ files/ru/web/svg/element/image/index.html | 94 ++++++++ files/ru/web/svg/element/index.html | 253 +++++++++++++++++++++ files/ru/web/svg/element/line/index.html | 104 +++++++++ files/ru/web/svg/element/lineargradient/index.html | 105 +++++++++ files/ru/web/svg/element/path/index.html | 98 ++++++++ files/ru/web/svg/element/pattern/index.html | 125 ++++++++++ files/ru/web/svg/element/polygon/index.html | 95 ++++++++ files/ru/web/svg/element/radialgradient/index.html | 108 +++++++++ files/ru/web/svg/element/rect/index.html | 115 ++++++++++ files/ru/web/svg/element/svg/index.html | 119 ++++++++++ files/ru/web/svg/element/text/index.html | 211 +++++++++++++++++ files/ru/web/svg/element/use/index.html | 126 ++++++++++ files/ru/web/svg/tutorial/basic_shapes/index.html | 144 ++++++++++++ .../svg/tutorial/basic_transformations/index.html | 98 ++++++++ files/ru/web/svg/tutorial/introduction/index.html | 44 ++++ files/ru/web/svg/tutorial/positions/index.html | 48 ++++ files/ru/web/svg/tutorial/svg_and_css/index.html | 213 +++++++++++++++++ .../index.html" | 98 -------- .../index.html" | 44 ---- .../index.html" | 144 ------------ .../index.html" | 48 ---- .../a/index.html" | 151 ------------ .../animate/index.html" | 81 ------- .../animatemotion/index.html" | 112 --------- .../circle/index.html" | 109 --------- .../defs/index.html" | 101 -------- .../ellipse/index.html" | 129 ----------- .../feblend/index.html" | 115 ---------- .../foreignobject/index.html" | 119 ---------- .../g/index.html" | 98 -------- .../image/index.html" | 94 -------- .../index.html" | 253 --------------------- .../line/index.html" | 104 --------- .../lineargradient/index.html" | 105 --------- .../path/index.html" | 98 -------- .../pattern/index.html" | 125 ---------- .../polygon/index.html" | 95 -------- .../radialgradient/index.html" | 108 --------- .../rect/index.html" | 115 ---------- .../svg/index.html" | 119 ---------- .../text/index.html" | 211 ----------------- .../use/index.html" | 126 ---------- 52 files changed, 3115 insertions(+), 2907 deletions(-) delete mode 100644 files/ru/web/svg/attribute/onload/index.html create mode 100644 files/ru/web/svg/element/a/index.html create mode 100644 files/ru/web/svg/element/animate/index.html create mode 100644 files/ru/web/svg/element/animatemotion/index.html create mode 100644 files/ru/web/svg/element/circle/index.html create mode 100644 files/ru/web/svg/element/defs/index.html create mode 100644 files/ru/web/svg/element/ellipse/index.html create mode 100644 files/ru/web/svg/element/feblend/index.html create mode 100644 files/ru/web/svg/element/foreignobject/index.html create mode 100644 files/ru/web/svg/element/g/index.html create mode 100644 files/ru/web/svg/element/image/index.html create mode 100644 files/ru/web/svg/element/index.html create mode 100644 files/ru/web/svg/element/line/index.html create mode 100644 files/ru/web/svg/element/lineargradient/index.html create mode 100644 files/ru/web/svg/element/path/index.html create mode 100644 files/ru/web/svg/element/pattern/index.html create mode 100644 files/ru/web/svg/element/polygon/index.html create mode 100644 files/ru/web/svg/element/radialgradient/index.html create mode 100644 files/ru/web/svg/element/rect/index.html create mode 100644 files/ru/web/svg/element/svg/index.html create mode 100644 files/ru/web/svg/element/text/index.html create mode 100644 files/ru/web/svg/element/use/index.html create mode 100644 files/ru/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/ru/web/svg/tutorial/basic_transformations/index.html create mode 100644 files/ru/web/svg/tutorial/introduction/index.html create mode 100644 files/ru/web/svg/tutorial/positions/index.html create mode 100644 files/ru/web/svg/tutorial/svg_and_css/index.html delete mode 100644 "files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" delete mode 100644 "files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" delete mode 100644 "files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" delete mode 100644 "files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/a/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animate/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animatemotion/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/circle/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/defs/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/ellipse/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/feblend/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/foreignobject/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/g/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/image/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/line/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/lineargradient/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/path/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/pattern/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/polygon/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/radialgradient/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/rect/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/svg/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" delete mode 100644 "files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/use/index.html" (limited to 'files/ru/web/svg') diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html deleted file mode 100644 index b6a5d49ea2..0000000000 --- a/files/ru/web/svg/attribute/onload/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: onload -slug: Web/SVG/Attribute/onload ---- -

Link not exist

diff --git a/files/ru/web/svg/element/a/index.html b/files/ru/web/svg/element/a/index.html new file mode 100644 index 0000000000..97c2daf793 --- /dev/null +++ b/files/ru/web/svg/element/a/index.html @@ -0,0 +1,151 @@ +--- +title: a +slug: Web/SVG/Элемент/a +tags: + - SVG +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

SVG элемент <a> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.

+ +

Элемент <a> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Ссылка в фигуре -->
+  <a href="/docs/Web/SVG/Element/circle">
+    <circle cx="50" cy="40" r="35"/>
+  </a>
+
+  <!-- Ссылка в тексте -->
+  <a href="/docs/Web/SVG/Element/text">
+    <text x="50" y="90" text-anchor="middle">
+      &lt;circle&gt;
+    </text>
+  </a>
+</svg>
+ +
/* Так как SVG не предоставляет визуальных стилей по-умолчанию для ссылок,
+   будет лучше задать самостоятельно */
+
+@namespace svg url(http://www.w3.org/2000/svg);
+/* Необходимо выделить только SVG элементы <a>, но не HTML.
+   Смотрите предупреждение ниже */
+
+svg|a:link, svg|a:visited {
+  cursor: pointer;
+}
+
+svg|a text,
+text svg|a {
+  fill: blue; /* Даже для текста SVG использует заливку */
+  text-decoration: underline;
+}
+
+svg|a:hover, svg|a:active {
+  outline: dotted 1px blue;
+}
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+ +
+

Поскольку этот элемент разделяет своё имя с элементом HTML <a>, выбор a через CSS или querySelector может выбрать не тот тип элемента. Попробуйте правило @namespace, чтобы разделять их.

+
+
+ +

Атрибуты

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.
+ Тип: <string> ;Значение по-умолчанию: none;Анимируем: нет
+
{{SVGAttr("href")}}
+
{{Glossary("URL")}} или фрагмент URL для перехода.
+ Тип: <URL> ; Значение по-умолчанию: none; Анимируем: да
+
{{htmlattrxref("hreflang", "a")}}
+
URL на человеческом языке или фрагмент URL для перехода.
+ Тип: <string>; Значение по-умолчанию: none; Анимируем: да
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
Разделённый пробелами список URL при переходе по которым браузер будет отправлять POST запросы с телом PING (в фоне). Обычно используется для трекинга.
+ Тип: <list-of-URLs>; Значение по-умолчанию: none; Анимируем: нет
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
Какой referrer отправить при получении {{Glossary("URL")}}.
+ Тип: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Значение по-умолчанию: none; Анимируем: нет
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
Отношение между целевым объектом и объектом link.
+ Тип: <list-of-Link-Types> ; Значение по-умолчанию: none; Анимируем: да
+
{{SVGAttr("target")}}
+
Где отобразить переход {{Glossary("URL")}}.
+ Тип: _self|_parent|_top|_blank|<name> ; Значение по-умолчанию: _self; Анимируем: да
+
{{htmlattrxref("type", "a")}}
+
{{Glossary("MIME type")}} для ссылки URL.
+ Тип: <string> ; Значение по-умолчанию: none; Анимируем: да
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.
+ Тип: <URL> ; Значение по-умолчанию: none; Анимируем: да
+
+ +

Глобальные аттрибуты

+ +
+
Core Attributes
+
Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Document element event attributes, Graphical event attributes
+
Presentation Attributes
+
Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink Attributes
+
Наиболее используемые: {{SVGAttr("xlink:title")}}
+
ARIA Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Интерфейс DOM

+ +

Этот элемент реализует интерфейс SVGAElement.

+ +

Примечания к использованию

+ +

{{svginfo}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Изначальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("svg.elements.a")}}

diff --git a/files/ru/web/svg/element/animate/index.html b/files/ru/web/svg/element/animate/index.html new file mode 100644 index 0000000000..90988b58f8 --- /dev/null +++ b/files/ru/web/svg/element/animate/index.html @@ -0,0 +1,81 @@ +--- +title: +slug: Web/SVG/Элемент/animate +tags: + - NeedsUpdate + - SVG + - SVG Animation + - svg анимация +translation_of: Web/SVG/Element/animate +--- +
{{SVGRef}}
+ +

 Тег <animate> может быть помещен внутри какой-то фигуры, например,  <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.

+ +

Использование

+ +

{{svginfo}}

+ +

Пример

+ +

» animate.svg

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Атрибуты элемента

+ + + +

DOM интерфейс

+ +

Элемент реализует SVGAnimateElement интерфейс .

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('SVG1.1', 'animate.html#AnimateElement', '<animate>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Поддерживаемые браузеры

+ + + +

{{Compat("svg.elements.animate")}}

+ +

 

diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..3b1259dcb3 --- /dev/null +++ b/files/ru/web/svg/element/animatemotion/index.html @@ -0,0 +1,112 @@ +--- +title: +slug: Web/SVG/Элемент/animateMotion +tags: + - SVG + - svg анимация + - Элемент +translation_of: Web/SVG/Element/animateMotion +--- +
{{SVGRef}}
+ +

Элемент <animateMotion> вызывает перемещение ссылочного элемента вдоль пути движения.

+ +

Контекст использования

+ +

{{svginfo}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Собственные атрибуты

+ +
    +
  • {{SVGAttr("calcMode")}}
    • +
  • {{SVGAttr("path")}}
    • +
  • {{SVGAttr("keyPoints")}}
    • +
  • {{SVGAttr("rotate")}}
    • +
  • {{SVGAttr("origin")}}
    • +
+ +

DOM интерфейс

+ +

Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.

+ +

Пример

+ +

SVG

+ +
<?xml version="1.0"?>
+<svg width="120" height="120" viewBox="0 0 120 120"
+    xmlns="http://www.w3.org/2000/svg" version="1.1"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Рисуем серый контур движения с двумя
+       маленькими кружками в ключевых точках -->
+  <path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none"
+        d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" />
+  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
+  <circle cx="110" cy="10" r="3" fill="lightgrey"  />
+
+  <!-- Рисуем красный круг, который будет перемещаться
+       вдоль траектории движения. -->
+  <circle cx="" cy="" r="5" fill="red">
+
+  <!-- Определяем анимацию пути движения -->
+    <animateMotion dur="6s" repeatCount="indefinite">
+      <mpath xlink:href="#theMotionPath"/>
+    </animateMotion>
+  </circle>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample("Пример", 120, 120)}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Без изменений
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

Совместимость с браузерами

+ + + +

{{Compat("svg.elements.animateMotion")}}

+ +

Смотрите также

+ +
    +
  • {{SVGElement("mpath")}}
    • +
diff --git a/files/ru/web/svg/element/circle/index.html b/files/ru/web/svg/element/circle/index.html new file mode 100644 index 0000000000..3f1907b3bf --- /dev/null +++ b/files/ru/web/svg/element/circle/index.html @@ -0,0 +1,109 @@ +--- +title: +slug: Web/SVG/Элемент/circle +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

Элемент circle — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.

+ +

Информация

+ +

{{svginfo}}

+ +

Пример

+ + + +
<?xml version="1.0"?>
+<svg viewBox="0 0 120 120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="60" cy="60" r="50"/>
+</svg>
+ + + +

» circle.svg

+ +

Атрибуты

+ +

Унаследованные

+ + + +

Особые

+ +
    +
  • {{ SVGAttr("cx") }}
    • +
+ +

Координата центра окружности по оси x.

+ +
    +
  • {{ SVGAttr("cy") }}
    • +
+ +

Координата центра окружности по оси y.

+ +
    +
  • {{ SVGAttr("r") }}
    • +
+ +

Радиус окружности.

+ +

Интерфейс DOM

+ +

Этот элемент реализует интерфейс {{ domxref("SVGCircleElement") }}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('SVG2', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG1.1')}}Исходное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("svg.elements.circle")}}

+ + + +

Смотри также

+ + diff --git a/files/ru/web/svg/element/defs/index.html b/files/ru/web/svg/element/defs/index.html new file mode 100644 index 0000000000..0312b05e34 --- /dev/null +++ b/files/ru/web/svg/element/defs/index.html @@ -0,0 +1,101 @@ +--- +title: +slug: Web/SVG/Элемент/defs +tags: + - NeedsUpdate + - SVG + - Контейнер SVG + - Элемент +translation_of: Web/SVG/Element/defs +--- +
{{SVGRef}}
+ +

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

+ +

Создание подобных элементов внутри элемента <defs> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.

+ +

<defs> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.

+ +

Контекст использования

+ +

{{svginfo}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфичные атрибуты

+ +

Нет

+ +

Интерфейс DOM 

+ +

Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.

+ +

Пример

+ +
<svg width="80px" height="30px" viewBox="0 0 80 30"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <linearGradient id="Gradient01">
+      <stop offset="20%" stop-color="#39F" />
+      <stop offset="90%" stop-color="#F3F" />
+    </linearGradient>
+  </defs>
+
+  <rect x="10" y="10" width="60" height="10"
+        fill="url(#Gradient01)" />
+</svg>
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "struct.html#Head", "<defs>")}}{{Spec2("SVG2")}}Без изменений
{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}{{Spec2("SVG1.1")}}Первоначальное определение
+ +

Браузерная совместимость

+ + + +

{{Compat("svg.elements.defs")}}

+ +

 

+ +

Связанные темы

+ +
    +
  • {{SVGElement("use")}}
    • +
diff --git a/files/ru/web/svg/element/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..f04083c1e1 --- /dev/null +++ b/files/ru/web/svg/element/ellipse/index.html @@ -0,0 +1,129 @@ +--- +title: +slug: Web/SVG/Элемент/ellipse +tags: + - NeedsUpdate +translation_of: Web/SVG/Element/ellipse +--- +
{{SVGRef}}
+ +

Элемент ellipse — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.

+ +
+

Сам по себе элемент ellipse не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45°), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.

+
+ + + + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="100" cy="50" rx="100" ry="50" />
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, '100%')}}

+ + + +

Атрибуты

+ + + +
+
{{SVGAttr("cx")}}
+
Позиция эллипса по x.
+ Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
+
{{SVGAttr("cy")}}
+
Позиция эллипса по y.
+ Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
+
{{SVGAttr("rx")}}
+
Радиус эллипса по x.
+ Тип значения: auto|<length>|<percentage> ;Значение по умолчанию: auto; Можно анимировать: да
+
{{SVGAttr("ry")}}
+
Радиус эллипса по y.
+ Тип значения: auto|<length>|<percentage> ; Значение по умолчанию: auto; Можно анимировать: да
+
{{SVGAttr("pathLength")}}
+
Этот атрибут позволяет установить длину всего пути.
+ Тип значения: <number> ; Значение по умолчани: нет; Можно анимировать: да
+
+ + +
+

Обратите внимание: Начиная с SVG2, cx, cy, rx и ry это Геометрические свойства. Это означает, что они могут быть использованы как CSS свойства элемента.

+
+ +

Глобальные Атрибуты

+
+
Основные атрибуты
+
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты стиля
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Условные атрибуты
+
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Аттрибуты событий
+
Глобальные атрибуты событий, Атрибуты графических событий
+
Атрибуты представления
+
Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA-Атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto,aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label,aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable,aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly,aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ + + + + +

Информация

+ +

{{svginfo}}

+ + + +

Пример

+ +

» ellipse.svg

+ +

Интерфейс DOM

+ +

Этот элемент реализует интерфейс {{ domxref("SVGEllipseElement") }}.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСостояниеКомментарий
{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG1.1')}}Исходное определение
+ +

Поддержка браузерами

+ + + +

{{Compat("svg.elements.ellipse")}}

+ + + +

Смотри также

+ +
    +
  • {{SVGElement("circle")}}
    • +
diff --git a/files/ru/web/svg/element/feblend/index.html b/files/ru/web/svg/element/feblend/index.html new file mode 100644 index 0000000000..acd3547dcd --- /dev/null +++ b/files/ru/web/svg/element/feblend/index.html @@ -0,0 +1,115 @@ +--- +title: +slug: Web/SVG/Элемент/feBlend +tags: + - фильтры +translation_of: Web/SVG/Element/feBlend +--- +
{{SVGRef}}
+ +

SVG фильтр примитивна  <feBlend> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом  {{SVGAttr("mode")}}.

+ +

Используемый контекст

+ +

{{svginfo}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специальные атрибуты

+ +
    +
  • {{SVGAttr("in")}}
    • +
  • {{SVGAttr("in2")}}
    • +
  • {{SVGAttr("mode")}}
    • +
+ +

DOM Interface

+ +

Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}.

+ +

Пример

+ +

SVG

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <filter id="spotlight">
+      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
+          flood-color="green" flood-opacity="1"/>
+      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
+    </filter>
+  </defs>
+
+  <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png"
+      x="10%" y="10%" width="80%" height="80%"
+      style="filter:url(#spotlight);"/>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample("Example", 200, 200)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Filters 1.0", "#feBlendElement", "<feBlend>")}}{{Spec2("Filters 1.0")}}Аутсорсинг режимов наложения на{{SpecName("Compositing", "#ltblendmodegt")}}
{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}{{Spec2("SVG1.1")}}Первое определение
+ +

Поддержка браузерами

+ + + +

{{Compat("svg.elements.feBlend")}}

+ +

Смотрите также

+ +
    +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • SVG tutorial: Filter effects
    • +
diff --git a/files/ru/web/svg/element/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..64e32d019f --- /dev/null +++ b/files/ru/web/svg/element/foreignobject/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/SVG/Элемент/foreignObject +translation_of: Web/SVG/Element/foreignObject +--- +
{{SVGRef}}
+Элемент <foreignObject> SVG позволяет включать другое пространство имен XML.
+В контексте браузера это, скорее всего, XHTML / HTML.
+ +
+ + +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    polygon { fill: black }
+
+    div {
+      color: white;
+      font:18px serif;
+      height: 100%;
+      overflow: auto;
+    }
+  </style>
+
+  <polygon points="5,5 195,10 185,185 10,195" />
+
+  <!-- Типичный пример использования: встраивание HTML-текста в SVG -->
+  <foreignObject x="20" y="20" width="160" height="160">
+  <!--
+В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать,
+но это обязательно в контексте документа SVG
+   -->
+    <div xmlns="http://www.w3.org/1999/xhtml">
+    - Смолчал хозяин, да и то, что мог сказать
+    - Мне невдомёк, но во владениях чертога
+    Поможет дом срубить да судьбы вам связать.
+    Не веришь ежли - испроси у Бога...
+    </div>
+  </foreignObject>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 150, '100%')}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr("height")}}
+
Этот атрибут определяет высоту прямоугольника.
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("width")}}
+
Этот атрибут определяет ширину прямоугольника.
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("x")}}
+
Этот атрибут определяет координату x контейнера svg.
+ Это не влияет на внешние элементы SVG.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
Этот атрибут определяет координату Y контейнера SVG.
+ Это не влияет на внешние элементы SVG.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +
+

Note: Starting with SVG2 x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

+
+ +

Глобальные атрибуты

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Примечания по использованию

+ +

{{svginfo}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Совместимость браузера

+ + + +

{{Compat("svg.elements.foreignObject")}}

diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.html new file mode 100644 index 0000000000..c425f3c5b8 --- /dev/null +++ b/files/ru/web/svg/element/g/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/SVG/Элемент/g +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/g +--- +
{{SVGRef}}
+ +

Элемент g используется для группировки других SVG элементов. Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.

+ +

Контекст использования

+ +

{{svginfo}}

+ +

Пример

+ +
<svg viewBox="0 0 95 50"
+     xmlns="http://www.w3.org/2000/svg">
+   <g stroke="green" fill="white" stroke-width="5">
+     <circle cx="25" cy="25" r="15"/>
+     <circle cx="40" cy="25" r="15"/>
+     <circle cx="55" cy="25" r="15"/>
+     <circle cx="70" cy="25" r="15"/>
+   </g>
+</svg>
+
+ +

{{EmbedLiveSample("Example",220,130)}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфичные атрибуты

+ +

Нет специфичных атрибутов.

+ +

Интерфейс DOM

+ +

Этот элемент реализует  SVGGElement интерейс.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#GElement', '<g>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#Groups', '<g>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Поддержка браузерами

+ + + +

{{Compat("svg.elements.g")}}

+ + + +

Смотрите также:

+ + + +
    +
  • {{SVGElement("use")}}
    • +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("symbol")}}
    • +
  • SVG элемент g
    • +
diff --git a/files/ru/web/svg/element/image/index.html b/files/ru/web/svg/element/image/index.html new file mode 100644 index 0000000000..e417a4ac65 --- /dev/null +++ b/files/ru/web/svg/element/image/index.html @@ -0,0 +1,94 @@ +--- +title: +slug: Web/SVG/Элемент/image +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/image +--- +
{{SVGRef}}
+ +

Элемент <image> позволяет включить растровые изображения в SVG документ.

+ +

Usage context

+ +

{{svginfo}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфичные атрибуты

+ +
    +
  • {{SVGAttr("x")}}
    • +
  • {{SVGAttr("y")}}
    • +
  • {{SVGAttr("width")}}
    • +
  • {{SVGAttr("height")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
  • {{SVGAttr("preserveAspectRatio")}}
    • +
+ +

DOM Interface

+ +

This element implements the SVGImageElement interface.

+ +

Пример

+ +

Базовый рендеринг PNG изображения в качестве объекта SVG:

+ +

SVG

+ +
<svg width="200" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
+</svg>
+
+ +

Результат

+ +

{{EmbedLiveSample("Пример", 250, 260)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("svg.elements.image")}}

diff --git a/files/ru/web/svg/element/index.html b/files/ru/web/svg/element/index.html new file mode 100644 index 0000000000..b65942e344 --- /dev/null +++ b/files/ru/web/svg/element/index.html @@ -0,0 +1,253 @@ +--- +title: Справочник SVG элементов +slug: Web/SVG/Элемент +tags: + - SVG + - SVG Reference + - Руководство +translation_of: Web/SVG/Element +--- +

« SVG / Справочник SVG атрибутов »

+ +

SVG элементы

+ +
A + +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
  • {{SVGElement("altGlyphDef")}}
    • +
  • {{SVGElement("altGlyphItem")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+B C + +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
  • {{SVGElement("cursor")}}
    • +
+D + +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
  • {{SVGElement("discard")}}
    • +
+E + +
    +
  • {{SVGElement("ellipse")}}
    • +
+F + +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("font")}}
    • +
  • {{SVGElement("font-face")}}
    • +
  • {{SVGElement("font-face-format")}}
    • +
  • {{SVGElement("font-face-name")}}
    • +
  • {{SVGElement("font-face-src")}}
    • +
  • {{SVGElement("font-face-uri")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+G + +
    +
  • {{SVGElement("g")}}
    • +
  • {{SVGElement("glyph")}}
    • +
  • {{SVGElement("glyphRef")}}
    • +
+H + +
    +
  • {{SVGElement("hatch")}}
    • +
  • {{SVGElement("hatchpath")}}
    • +
  • {{SVGElement("hkern")}}
    • +
+I + +
    +
  • {{SVGElement("image")}}
    • +
+J K L + +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+M + +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("mesh")}}
    • +
  • {{SVGElement("meshgradient")}}
    • +
  • {{SVGElement("meshpatch")}}
    • +
  • {{SVGElement("meshrow")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("missing-glyph")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+N O P + +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+Q R + +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+S + +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("solidcolor")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+T + +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+U + +
    +
  • {{SVGElement("unknown")}}
    • +
  • {{SVGElement("use")}}
    • +
+V — Z + +
    +
  • {{SVGElement("view")}}
    • +
  • {{SVGElement("vkern")}}
    • +
+
+ +

Элементы SVG по категориям

+ +

Элементы анимации

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

Базовые фигуры

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Контейнеры

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

+ +

Элементы описания

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

Фильтры

+ +

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

+ +

Элементы шрифта

+ +

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

+ +

Градиентные элементы

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

Графические элементы

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} 

+ +

Элементы ссылки на графику

+ +

{{SVGElement("mesh")}}, {{SVGElement("use")}}

+ +

Источники света

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} 

+ +

Непрозрачные элементы

+ +

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} 

+ +

Элементы сервера печати

+ +

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} 

+ +

Отличительные элементы

+ +

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} 

+ +

Элементы формы

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

Структурные элементы

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

Элементы текстового контента

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Текстовые контентные дочерние элементы

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

Некатегоризированные элементы

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} 

+ +

Смотрите также

+ + + +

 

+ +

 

diff --git a/files/ru/web/svg/element/line/index.html b/files/ru/web/svg/element/line/index.html new file mode 100644 index 0000000000..b7f75c6a96 --- /dev/null +++ b/files/ru/web/svg/element/line/index.html @@ -0,0 +1,104 @@ +--- +title: +slug: Web/SVG/Элемент/line +tags: + - SVG +translation_of: Web/SVG/Element/line +--- +
 {{SVGRef}}
+ +

Элемент <line> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+
+  <!-- Если вы не укажете цвет контура,
+       линия не будет видна -->
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr('x1')}}
+
Определяет координату начальной точки линии по оси x .
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr('x2')}}
+
Определяет координату конечной точки линии по оси x.
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr('y1')}}
+
Определяет координату начальной точки линии по оси y.
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr('y2')}}
+
Определяет координату конечной точки линии по оси y.
+ Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
+
{{SVGAttr("pathLength")}}
+
Определяет общую длину пути в пользовательских единицах.
+ Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
+
+ +

Глобальные атрибуты

+ +
+
Основные атрибуты
+
В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты оформления (стилей) 
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Атрибуты условной обработки
+
В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты события
+
Глобальные атрибуты события, Графические атрибуты события
+
Атрибуты презентации
+
В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Атрибуты ARIA
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Поддержка браузерами

+ + + +

{{Compat("svg.elements.line")}}

+ +

 

+ +

Смотрите также:

+ + diff --git a/files/ru/web/svg/element/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..37ab6a334d --- /dev/null +++ b/files/ru/web/svg/element/lineargradient/index.html @@ -0,0 +1,105 @@ +--- +title: +slug: Web/SVG/Элемент/linearGradient +tags: + - NeedsUpdate + - SVG + - SVG градиент + - Справка + - Элемент +translation_of: Web/SVG/Element/linearGradient +--- +
{{SVGRef}}
+ +

Элемент <linearGradient> SVG позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.

+ +

Контекст использования

+ +

{{svginfo}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфические атрибуты

+ +
    +
  • {{SVGAttr("gradientUnits")}}
    • +
  • {{SVGAttr("gradientTransform")}}
    • +
  • {{SVGAttr("x1")}}
    • +
  • {{SVGAttr("y1")}}
    • +
  • {{SVGAttr("x2")}}
    • +
  • {{SVGAttr("y2")}}
    • +
  • {{SVGAttr("spreadMethod")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

DOM интерфейс

+ +

Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.

+ +

Пример

+ +
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="MyGradient">
+            <stop offset="5%"  stop-color="green"/>
+            <stop offset="95%" stop-color="gold"/>
+        </linearGradient>
+    </defs>
+
+    <rect fill="url(#MyGradient)"
+          x="10" y="10" width="100" height="100"/>
+</svg>
+ +

{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

Совместимость с браузером

+ +
+ + +

{{Compat("svg.elements.linearGradient")}}

+
+ +

Смотрите также

+ +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("stop")}}
    • +
diff --git a/files/ru/web/svg/element/path/index.html b/files/ru/web/svg/element/path/index.html new file mode 100644 index 0000000000..7dc97ca989 --- /dev/null +++ b/files/ru/web/svg/element/path/index.html @@ -0,0 +1,98 @@ +--- +title: +slug: Web/SVG/Элемент/path +translation_of: Web/SVG/Element/path +--- +
{{SVGRef}}
+ +

Элемент <path> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10,30
+           A 20,20 0,0,1 50,30
+           A 20,20 0,0,1 90,30
+           Q 90,60 50,90
+           Q 10,60 10,30 z"/>
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr("d")}}
+
Этот атрибут определяет форму.
+ Тип значения: <string> ; Значеие по умолчанию: ''; Анимирование: Да
+
{{SVGAttr("pathLength")}}
+
Этот атрибут позволяет указывать общую длину в пользовательских единицах.
+ Тип значения: <number> ; Значеие по умолчанию:нет; Анимирование: Да
+
+ +

Глобальные атрибуты

+ +
+
Атрибуты ядра
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты стиля
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Атрибуты условной обработки
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты событий
+
Атрибуты глобальных событий, Атрибуты графических событий
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Использование

+ +

{{svginfo}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ХарактеристикиСтатусКоммент
{{SpecName("SVG Paths", "#PathElement", "<path>")}}{{Spec2("SVG Paths")}}
{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Совместимость браузера

+ +

div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.

+ +

{{Compat("svg.elements.path")}}

+ +

Смотрите также

+ +
    +
  • SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • +
  • The MDN SVG "Getting Started" tutorial : Path
    • +
diff --git a/files/ru/web/svg/element/pattern/index.html b/files/ru/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..2d572737d3 --- /dev/null +++ b/files/ru/web/svg/element/pattern/index.html @@ -0,0 +1,125 @@ +--- +title: +slug: Web/SVG/Элемент/pattern +tags: + - SVG +translation_of: Web/SVG/Element/pattern +--- +
{{SVGRef}}
+Элемент <pattern> определяет графический объект, который может быть перерисован с повторяющимися координатами x и y («мозаичным»), чтобы покрыть область.
+ +

+На ссылку <pattern> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других графических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном. 
+ +
 
+ +
+ + +
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
+      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
+    </pattern>
+  </defs>
+
+  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
+  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
+</svg>
+ +

{{EmbedLiveSample('Exemple', 150, '100%')}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr("height")}}
+
Этот атрибут определяет высоту плитки шаблона.
+ Value type: <length>|<percentage>; Default value: 0; Animatable: yes
+
{{SVGAttr("href")}}
+
Этот атрибут по умолчанию ссылается на пример шаблона для <pattern>
+ Value type: <URL>; Default value: none; Animatable: yes
+
{{SVGAttr("patternContentUnits")}}
+
Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. 
+ Value type: userSpaceOnUse|objectBoundingBox; Default value: userSpaceOnUse; Animatable: yes +

Сноска: Этот атрибут не действует, если в элементе <pattern> указан атрибут viewBox.

+
+
{{SVGAttr("patternTransform")}}
+
Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.
+ Value type: <transform-list>; Default value: none; Animatable: yes
+
{{SVGAttr("patternUnits")}}
+
Этот атрибут определяет систему координат для атрибутов x, y, width и height. 
+ Value type: userSpaceOnUse|objectBoundingBox; Default value: objectBoundingBox; Animatable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.
+ Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
+
{{SVGAttr("viewBox")}}
+
Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.
+ Value type: <list-of-numbers> ; Default value: none; Animatable: yes
+
{{SVGAttr("width")}}
+
Этот атрибут определяет ширину плитки шаблона.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("x")}}
+
Этот атрибут определяет смещение координаты x мозаичного изображения.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <pattern>.
+ Value type: <URL>; Default value: none; Animatable: yes +

Сноска: Для браузеров, реализующих href, если заданы как href, так и xlink:href, xlink:href будет игнорироваться, используя только href.

+
+
{{SVGAttr("y")}}
+
Этот атрибут определяет смещение координат y мозаичного элемента.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +

Глобальные атрибуты

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
XLink Attributes
+
Most notably: {{SVGAttr("xlink:title")}}
+
+ +

Нотации

+ +

{{svginfo}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
ХарактеристикиСтатусКоммент
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Совместимость браузера

+ + + +

{{Compat("svg.elements.pattern")}}

diff --git a/files/ru/web/svg/element/polygon/index.html b/files/ru/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..b1baf626a3 --- /dev/null +++ b/files/ru/web/svg/element/polygon/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/SVG/Элемент/polygon +tags: + - SVG +translation_of: Web/SVG/Element/polygon +--- +
{{SVGRef}}
+ +

Элемент <polygon> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.

+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Example of a polygon with the default fill -->
+  <polygon points="0,100 50,25 50,75 100,0" />
+
+  <!-- Example of the same polygon shape with stroke and no fill -->
+  <polygon points="100,100 150,25 150,75 200,0"
+            fill="none" stroke="black" />
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr('points')}}
+
Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.
+ Тип значения: <number>+ ; Значение по умолчанию: ""; Анимируемый: да
+
{{SVGAttr("pathLength")}}
+
Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.
+ Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
+
+ +

Global attributes

+ +
+
Основные атрибуты
+
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Атрибуты стилизации
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Условные атрибуты
+
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты событий
+
Атрибуты глобальных событий, Атрибуты графических событий
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG2')}}No change
{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Совместимость с браузерами

+ + + +

{{Compat("svg.elements.polygon")}}

+ +

Смотрите также

+ +
    +
  • Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • +
diff --git a/files/ru/web/svg/element/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..04906d4fd5 --- /dev/null +++ b/files/ru/web/svg/element/radialgradient/index.html @@ -0,0 +1,108 @@ +--- +title: +slug: Web/SVG/Элемент/radialGradient +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/radialGradient +--- +
{{SVGRef}}
+ +

Элемент <radialGradient> SVG позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.

+ +

Контекст использования

+ +

{{svginfo}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфические атрибуты

+ +
    +
  • {{SVGAttr("gradientUnits")}}
    • +
  • {{SVGAttr("gradientTransform")}}
    • +
  • {{SVGAttr("cx")}}
    • +
  • {{SVGAttr("cy")}}
    • +
  • {{SVGAttr("r")}}
    • +
  • {{SVGAttr("fx")}}
    • +
  • {{SVGAttr("fy")}}
    • +
  • {{SVGAttr("fr")}}
    • +
  • {{SVGAttr("spreadMethod")}}
    • +
  • {{SVGAttr("xlink:href")}}
    • +
+ +

DOM интерфейс

+ +

Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс.

+ +

Пример

+ +

SVG

+ +
<svg width="120" height="120" viewBox="0 0 120 120"
+   xmlns="http://www.w3.org/2000/svg">
+
+  <defs>
+    <radialGradient id="exampleGradient">
+      <stop offset="10%" stop-color="gold"/>
+      <stop offset="95%" stop-color="green"/>
+    </radialGradient>
+  </defs>
+
+  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample("Example", 120, 120)}}

+ +

Характеристики

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG2')}}Добавлен атрибут fr
{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

Совместимость с браузером

+ + + +

 

+ +

Смотрите также

+ +
    +
  • {{SVGElement("linearGradient")}}
    • +
diff --git a/files/ru/web/svg/element/rect/index.html b/files/ru/web/svg/element/rect/index.html new file mode 100644 index 0000000000..8e4b7c9af7 --- /dev/null +++ b/files/ru/web/svg/element/rect/index.html @@ -0,0 +1,115 @@ +--- +title: +slug: Web/SVG/Элемент/rect +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

<rect>  - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.

+ +

Контекст использования

+ + + + + + + + + + + + + + + + +
КатегорияПростая фигура, Графический элемент
Разрешенное содержимоеЛюбое количество указанных элементов в любом порядке:
+ Элементы анимации »
+ Элементы описания »
Нормативный документSVG 1.1 (2ое издание)
+ +

Пример

+ +

Простой пример использования rect

+ +

 

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="100" height="100"/>
+</svg>
+ +

 

+ +

» rect-1.svg

+ +

<rect> со скругленными углами

+ +

 

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewBox="0 0 120 120"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10"
+        width="100" height="100"
+        rx="15" ry="15"/>
+
+</svg>
+ +

» rect-2.svg

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специальные атрибуты

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("rx") }}
    • +
  • {{ SVGAttr("ry") }}
    • +
+ +

DOM Интерфейс

+ +

Данный элемент реализует интерфейс SVGRectElement .

+ +

Совместимость с браузерами

+ +

 

+ + + +

{{Compat("svg.elements.rect")}}

+ +

 

+ +

Смотрите также

+ +
    +
  • {{ SVGElement("path") }}
    • +
diff --git a/files/ru/web/svg/element/svg/index.html b/files/ru/web/svg/element/svg/index.html new file mode 100644 index 0000000000..12e37bee9d --- /dev/null +++ b/files/ru/web/svg/element/svg/index.html @@ -0,0 +1,119 @@ +--- +title: +slug: Web/SVG/Элемент/svg +translation_of: Web/SVG/Element/svg +--- +
{{SVGRef}}
+ +

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

+ +
+

Примечание. Атрибут xmlns требуется только для самого внешнего элемента svg документов SVG. Это не нужно для внутренних элементов svg или внутри документов HTML.

+
+ +
+ + +
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
+  <circle cx="50" cy="50" r="40" />
+  <circle cx="150" cy="50" r="4" />
+
+  <svg viewBox="0 0 10 10" x="200" width="100">
+    <circle cx="5" cy="5" r="4" />
+  </svg>
+</svg>
+ +

{{EmbedLiveSample('Exeemple', 150, '100%')}}

+
+ +

Атрибуты

+ +
+
{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}
+
The minimum SVG language profile that the document requires.
+ Value type: <string> ; Default value: none; Animatable: no
+
{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}
+
Язык сценариев по умолчанию, используемый фрагментом SVG.
+ Value type: <string> ; Default value: application/ecmascript; Animatable: no
+
{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}
+
Язык таблицы стилей по умолчанию, используемый фрагментом SVG.
+ Value type: <string> ; Default value: text/css; Animatable: no
+
{{SVGAttr("height")}}
+
Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.)
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("preserveAspectRatio")}}
+
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
+ Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
+
{{SVGAttr("version")}} {{deprecated_inline('svg2')}}
+
Какая версия SVG используется для внутреннего содержимого элемента.
+ Value type: <number> ; Default value: none; Animatable: no
+
{{SVGAttr("viewBox")}}
+
Координаты области просмотра SVG для текущего фрагмента SVG.
+ Value type: <list-of-numbers> ; Default value: none; Animatable: yes
+
{{SVGAttr("width")}}
+
Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.)
+ Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("x")}}
+
The displayed x coordinate of the svg container. No effect on outermost svg elements.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("y")}}
+
The displayed y coordinate of the svg container. No effect on outermost svg elements.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
+ +
+

Примечание. Начиная с SVG2, x, y, width и height являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.

+
+ +

Глобальные атрибуты

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
Aria атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Примечания по использованию

+ +

{{svginfo}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Кросс-браузерность

+ + + +

{{Compat("svg.elements.svg")}}

diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html new file mode 100644 index 0000000000..d63d1b47dd --- /dev/null +++ b/files/ru/web/svg/element/text/index.html @@ -0,0 +1,211 @@ +--- +title: +slug: Web/SVG/Элемент/ +tags: + - NeedsUpdate + - SVG + - SVG text +translation_of: Web/SVG/Element/text +--- +
{{SVGRef}}
+ +

SVG элемент <text> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <text> можно применить градиент, шаблон, окантовку, маску или фильтр.

+ +

Текст не будет отображаться, если он не находится внутри SVG элемента <text>. Это отличается от сокрытия по умолчанию, поскольку установка свойства display не отображает текст.

+ +

Пример

+ +
+ + +
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .small { font: italic 13px sans-serif; }
+    .heavy { font: bold 30px sans-serif; }
+
+    /* Обратите внимание, что цвет текста задается с помощью        *
+     * fill свойства, а свойство color используется только для HTML */
+    .Rrrrr { font: italic 40px serif; fill: red; }
+  </style>
+
+  <text x="20" y="35" class="small">Мой</text>
+  <text x="60" y="35" class="heavy">кот</text>
+  <text x="60" y="55" class="small">очень</text>
+  <text x="100" y="55" class="Rrrrr">Сердит!</text>
+</svg>
+
+
+ +

{{EmbedLiveSample('Пример', 150, '100%')}}

+ +

Атрибуты

+ +

Глобальные атрибуты

+ + + +

Специфические атрибуты

+ +
    +
  • {{SVGAttr("х")}}
    • +
  • {{SVGAttr("у")}}
    • +
  • {{SVGAttr("dх")}}
    • +
  • {{SVGAttr("dy")}}
    • +
  • {{SVGAttr("rotate")}}
    • +
  • {{SVGAttr("textLength")}}
    • +
  • {{SVGAttr("text-anchor")}}
    • +
  • {{SVGAttr("lengthAdjust")}}
    • +
+ +

Интерфейс DOM

+ +

Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.

+ +

Примеры

+ +

Основы использования элемента <text>

+ +

SVG

+ +
+
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .mal { font: italic 16px sans-serif; }
+    .hey { font: bold 26px sans-serif; fill: #6de;}
+  </style>
+  <text x="0" y="68" class="mal">- Привет,</text>
+  <text x="110" y="40" class="hey">Сахалин!</text>
+</svg>
+
+
+ +

Результат

+ +

{{EmbedLiveSample('SVG', 150, '100%')}}

+ +

Изменение направления написания текста.

+ +

Направление написания SVG-текста можно сменить на обратное, применив трансформацию.

+ +

SVG

+ +
+
+
+<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);}
+    .hey {font: bold 26px sans-serif; fill: #6de;}
+  </style>
+  <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)">
+    Пример ротации</text>
+  <text x="180" y="40" class="hey">SVG-текста.</text>
+</svg>
+
+
+
+
+ +

Результат

+ +

{{EmbedLiveSample('Реверс', 200, '100%')}}

+ +

Цвет текста

+ +

Цвет текста в SVG-элементе <text> может быть изменён посредством свойства fill="[color]" внутри элемента <text>.

+ +

SVG

+ +
+
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .gri {font: italic 16px sans-serif; fill: #6dd;}
+      .red {font: bold 26px sans-serif; fill: #d66;}
+    </style>
+    <text class="gri" x="10" y="30">Цвет текста</text>
+    <text class="red" x="120" y="30">SVG.</text>
+</svg>
+
+
+ +

Результат

+ +

{{EmbedLiveSample('SVG_3', 200, '100%')}}

+ +

Применение CSS-стилей к содержимому элемента <text>.

+ +

Содержимое SVG элемента <text> может быть стилизовано как обычный текст в HTML.

+ +

SVG

+ +
+
  <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
+    <style>
+      .stil {font: italic 16px sans-serif;}
+      .list {font: bold 26px sans-serif;}
+    </style>
+    <text class="stil" x="10" y="30">Стиль текста</text>
+    <text class="list" x="140" y="30">SVG.</text>
+</svg>
+
+
+ +

Результат

+ +

{{EmbedLiveSample('SVG_4', 200, '100%')}}

+ +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('SVG2', 'text.html#TextElement', '<text>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}{{Spec2('SVG1.1')}}Начальное определение
+ +

Таблица составлена по информации из этого источника.

+ +

Совместимость с браузером

+ + + +

{{Compat("svg.elements.text")}}

+ +

Контекст использования

+ +

{{Svginfo}}

+ +

Связь

+ +
    +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.html new file mode 100644 index 0000000000..12d7007932 --- /dev/null +++ b/files/ru/web/svg/element/use/index.html @@ -0,0 +1,126 @@ +--- +title: +slug: Web/SVG/Элемент/use +tags: + - SVG + - SVG Графика + - Ссылка + - Элемент +translation_of: Web/SVG/Element/use +--- +
{{SVGRef}}
+ +

Элемент <use> берёт элементы из SVG-документа и дублирует их где-то еще.

+ +
+ + +
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
+  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
+  <use href="#myCircle" x="10" fill="blue"/>
+  <use href="#myCircle" x="20" fill="white" stroke="red"/>
+  <!--
+  В данном случае атрибут stroke="red" будет игнорироваться, так как
+  ранее он был задан непосредственно для фигуры круга с id "myCircle".
+  Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не
+  переопределяют значения, заданные у предка.
+  Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke".
+  -->
+</svg>
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +

Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент use, подобно элементам <template> в HTML 5.
+
+ Большинство атрибутов use не переопределяют те, что уже заданы у элемента, на который use ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). Только атрибуты {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}} и {{SVGAttr("href")}} элемента use будут переопределять те, что были заданы у элемента, на который use ссылается. Однако к элементу use будут применены любые другие атрибуты, не заданные у элемента, на который use ссылается.
+
+ Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании CSS для стилизации элемента use и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование CSS-наследования.
+
+ По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.

+ +
+

Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее,  на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

+
+ +

Атрибуты

+ +
+
{{SVGAttr("href")}}
+
Ссылка на элемент/фрагмент, который нужно продублировать.
+ Тип значения: <URL> ; Значение по умолчанию: none; Анимируется: да
+
{{SVGAttr("xlink:href")}}
+
{{Deprecated_Header("SVG2")}}<IRI>-ссылка на элемент/фрагмент, который нужно продублировать.
+ Тип значения: <IRI> ; Значение по умолчанию: none; Анимируется: да
+
{{SVGAttr("x")}}
+
Координата "x" элемента use.
+ Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
+
{{SVGAttr("y")}}
+
Координата "y" элемента use.
+ Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
+
{{SVGAttr("width")}}
+
Ширина элемента use.
+ Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
+
{{SVGAttr("height")}}
+
Высота элемента use.
+ Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
+
+ +
+

Примечание: Начиная с SVG2, x, y, width, и height являются Свойствами Геометрии, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.

+
+ +

Глобальные атрибуты

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Атрибуты Событий
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
+
ARIA Атрибуты
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
XLink Атрибуты
+
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}
+
+ +

Примечание по использованию

+ +

{{svginfo}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Браузерная совместимость

+ + + +

{{Compat("svg.elements.use")}}

diff --git a/files/ru/web/svg/tutorial/basic_shapes/index.html b/files/ru/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..e95fd31f68 --- /dev/null +++ b/files/ru/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,144 @@ +--- +title: Основные Фигуры +slug: Web/SVG/Tutorial/Основные_Фигуры +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

+ +

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

+ +

Основные формы

+ +

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+ +
Замечание: Атрибуты stroke, stroke-width и fill описываются в рукодстве далее.
+ +

Прямоугольники

+ +

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

+ +
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+ +
+
x
+
Положение x верхнего левого угла прямоугольника.
+
y
+
Положение y верхнего левого угла прямоугольника.
+
width
+
Ширина прямоугольника
+
height
+
Высота прямоугольника
+
rx
+
Радиус x углов прямоугольника
+
ry
+
Радиус y углов прямоугольника
+
+ +

Окружность

+ +

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

+ +
<circle cx="25" cy="75" r="20"/>
+ +
+
r
+
Радиус окружности.
+
cx
+
Положение x центра окружности.
+
cy
+
Положение y центра окружности.
+
+ +

Эллипс

+ +

Ellipse - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

+ +
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+ +
+
rx
+
Радиус x эллипса.
+
ry
+
Радиус y эллипса.
+
cx
+
Положение x центра эллипса.
+
cy
+
Положение y центра эллипса.
+
+ +

Линия

+ +

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечне точки линии.

+ +
<line x1="10" x2="50" y1="110" y2="150"/>
+ +
+
x1
+
Положение x точки 1.
+
y1
+
Положение y точки 1.
+
x2
+
Положение x точки 2.
+
y2
+
Положение y точки 2.
+
+ +

Ломаная линия

+ +

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

+ +
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+ +
+
точки
+
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".
+
+ +

Многоугольник

+ +

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента <rect/> в случаях, когда необходимо большая гибкость.

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
точки
+
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).
+
+ +

Путь

+ +

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

+ +
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+ +
+
d
+
Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.
+
+ +
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git a/files/ru/web/svg/tutorial/basic_transformations/index.html b/files/ru/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..6aa2b20b16 --- /dev/null +++ b/files/ru/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,98 @@ +--- +title: Базовые трансформации +slug: Web/SVG/Tutorial/Базовые_Преобразования +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
+ +

Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете  назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:

+ +
+
<svg width="30" height="10">
+    <g fill="red">
+        <rect x="0" y="0" width="10" height="10" />
+        <rect x="20" y="0" width="10" height="10" />
+    </g>
+</svg>
+
+
+ +

{{ EmbedLiveSample('two_blocks', '30', '10', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

Все последующие преобразования суммируются в атрибуте преобразования элемента transform . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.

+ +

Перемещения

+ +

Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется translate().

+ +
<svg width="40" height="50" style="background-color:#bff;">
+    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+</svg>
+
+ +

Пример генерирует прямоугольник, перемещенный в точку  (30,40) вместо точки (0,0).

+ +

{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

если второе значение не задано, то оно приравнивается 0.

+ +

Вращение

+ +

Вращение элементов - это достаточно типичная задача. Используйте  rotate() для этого:

+ +
<svg width="31" height="31">
+    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
+</svg>
+
+ +

Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задается в градусах.

+ +

{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

Смещение углов

+ +

Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажен.

+ +

Масштабирование

+ +

scale() изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масшабирования по оси Х, а второй - по оси Y.  Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, 0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.

+ +

Комплексные перемещения с matrix()

+ +

Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

+ +

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

+ +

См. конкретный пример документации SVG. Подробную информацию об этом свойстве можно найти в SVG Рекомендациях.

+ +

Эффекты на системе координат

+ +

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

+ +
<svg width="100" height="100">
+    <g transform="scale(2)">
+        <rect width="50" height="50" />
+    </g>
+</svg>
+
+ +

В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как userSpaceOnUse.

+ +

{{ EmbedLiveSample('Effects_on_Coordinate_Systems', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +

Встраивание SVG в SVG

+ +

В отличие от HTML, SVG позволяет встравивать другие svg элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя viewBox, width иheight внутреннего svg элемнта.

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+ +

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

+ +

{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

+ +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
diff --git a/files/ru/web/svg/tutorial/introduction/index.html b/files/ru/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..0ecb1c5f1c --- /dev/null +++ b/files/ru/web/svg/tutorial/introduction/index.html @@ -0,0 +1,44 @@ +--- +title: Введение +slug: Web/SVG/Tutorial/Введение +tags: + - SVG + - Руководство +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}

+ +

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

+ +

В 1999 году, после конкурса нескольких форматов, SVG был включен в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

+ +

Базовые компоненты

+ +

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента {{ SVGElement('svg') }} и нескольких основных форм, которые вместе обеспечивают построение рисунка.  Кроме того, есть элемент {{ SVGElement('g') }}, который используется для группировки нескольких основных форм вместе.

+ +

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

+ +

До начала работы

+ +

Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

+ +

SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

+ +

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

+ +
    +
  • Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).
    • +
  • Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.
    • +
+ +

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

+ +

Особенности SVG

+ +

Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

+ +

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

+ +

Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

+ +

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

diff --git a/files/ru/web/svg/tutorial/positions/index.html b/files/ru/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..7a660c2d0f --- /dev/null +++ b/files/ru/web/svg/tutorial/positions/index.html @@ -0,0 +1,48 @@ +--- +title: Расположение (позиции) +slug: Web/SVG/Tutorial/Позиции +tags: + - SVG + - 'SVG:Руководство' +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

Сетка

+ +

SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется canvas (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.

+ +

Пример:

+ +

Элемент

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.

+ +

Что такое "пиксели"?

+ +

В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.

+ +

Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента svg:

+ +
<svg width="100" height="100">
+
+ +

Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут viewBox определяет часть этого полотна, которая будет отображаться. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.

+ +

Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется системой пользовательских координат. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.

+ +

Цитата из SVG 1.1 специфирования иллюстрирует это:

+ +
+

[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)

+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

diff --git a/files/ru/web/svg/tutorial/svg_and_css/index.html b/files/ru/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..a69c4281af --- /dev/null +++ b/files/ru/web/svg/tutorial/svg_and_css/index.html @@ -0,0 +1,213 @@ +--- +title: SVG и CSS +slug: Web/Guide/CSS/Getting_started/SVG_и_CSS +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +
{{CSSTutorialTOC}}
+ +

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG.

+ +

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

+ +

Это вторая секция Части II Руководство по CSS.
+ Предыдущая секция: JavaScript
+ Следующая секция: Данные XML

+ +

Общая информация: SVG

+ +

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

+ +

SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.

+ +

Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.

+ +

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

+ + + + + + + + +
Немного подробностей
+

На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference, для информации о поддержке отдельных элементов.

+ +

В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.

+ +

Более подробная информация о SVG в Mozilla, представлена на станице SVG в этой wiki.

+
+ +

За дело: Демонстрация SVG

+ +

Создайте новый документ SVG, как обычный текстовый файл, doc8.svg. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

+ +
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" version="1.1"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+ +

Создайте новый файл CSS, style8.css. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

+ +
/*** SVG demonstration ***/
+
+/* page */
+svg {
+  background-color: beige;
+  }
+
+#heading {
+  font-size: 24px;
+  font-weight: bold;
+  }
+
+#caption {
+  font-size: 12px;
+  }
+
+/* flower */
+#flower:hover {
+  cursor: crosshair;
+  }
+
+/* gradient */
+#fade-stop-1 {
+  stop-color: blue;
+  }
+
+#fade-stop-2 {
+  stop-color: white;
+  }
+
+/* outer petals */
+#outer-petals {
+  opacity: .75;
+  }
+
+#outer-petals .segment-fill {
+  fill: azure;
+  stroke: lightsteelblue;
+  stroke-width: 1;
+  }
+
+#outer-petals .segment-edge {
+  fill: none;
+  stroke: deepskyblue;
+  stroke-width: 3;
+  }
+
+#outer-petals .segment:hover > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .segment-edge {
+  stroke: slateblue;
+  }
+
+/* inner petals */
+#inner-petals .segment-fill {
+  fill: yellow;
+  stroke: yellowgreen;
+  stroke-width: 1;
+  }
+
+#inner-petals .segment-edge {
+  fill: none;
+  stroke: yellowgreen;
+  stroke-width: 9;
+  }
+
+#inner-petals .segment:hover > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+ +

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

+ +

Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:

+ + + + + + + +
SVG demonstration
+ +

Примечания к демонстрации:

+ +
    +
  • Документ SVG привязывается к таблице стилей общепринятым способом.
    • +
  • SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.
    • +
+ + + + + + + + +
Задание
Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.
+ +

Посмотреть решение к этому заданию.

+ +

Что дальше?

+ +

В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML

diff --git "a/files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" "b/files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" deleted file mode 100644 index 6aa2b20b16..0000000000 --- "a/files/ru/web/svg/tutorial/\320\261\320\260\320\267\320\276\320\262\321\213\320\265_\320\277\321\200\320\265\320\276\320\261\321\200\320\260\320\267\320\276\320\262\320\260\320\275\320\270\321\217/index.html" +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Базовые трансформации -slug: Web/SVG/Tutorial/Базовые_Преобразования -translation_of: Web/SVG/Tutorial/Basic_Transformations ---- -
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
- -

Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с {{SVGElement("g")}} элементом. С его помощью вы можете  назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель. Например:

- -
-
<svg width="30" height="10">
-    <g fill="red">
-        <rect x="0" y="0" width="10" height="10" />
-        <rect x="20" y="0" width="10" height="10" />
-    </g>
-</svg>
-
-
- -

{{ EmbedLiveSample('two_blocks', '30', '10', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

- -

Все последующие преобразования суммируются в атрибуте преобразования элемента transform . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.

- -

Перемещения

- -

Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определенным атрибутам. Для этого используется translate().

- -
<svg width="40" height="50" style="background-color:#bff;">
-    <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
-</svg>
-
- -

Пример генерирует прямоугольник, перемещенный в точку  (30,40) вместо точки (0,0).

- -

{{ EmbedLiveSample('Translation', '40', '50', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

- -

если второе значение не задано, то оно приравнивается 0.

- -

Вращение

- -

Вращение элементов - это достаточно типичная задача. Используйте  rotate() для этого:

- -
<svg width="31" height="31">
-    <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
-</svg>
-
- -

Данный пример показывает квадрат который повернули на 45 градусов. Значение для rotate() задается в градусах.

- -

{{ EmbedLiveSample('Rotation', '31', '31', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

- -

Смещение углов

- -

Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажен.

- -

Масштабирование

- -

scale() изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масшабирования по оси Х, а второй - по оси Y.  Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, 0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.

- -

Комплексные перемещения с matrix()

- -

Все приведенные выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

- -

{xnewCoordSys=axprevCoordSys+cyprevCoordSys+eynewCoordSys=bxprevCoordSys+dyprevCoordSys+f\left\{ \begin{matrix} x_{\mathrm{prevCoordSys}} = a x_{\mathrm{newCoordSys}} + c y_{\mathrm{newCoordSys}} + e \\ y_{\mathrm{prevCoordSys}} = b x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + f \end{matrix} \right.

- -

См. конкретный пример документации SVG. Подробную информацию об этом свойстве можно найти в SVG Рекомендациях.

- -

Эффекты на системе координат

- -

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

- -
<svg width="100" height="100">
-    <g transform="scale(2)">
-        <rect width="50" height="50" />
-    </g>
-</svg>
-
- -

В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как userSpaceOnUse.

- -

{{ EmbedLiveSample('Effects_on_Coordinate_Systems', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

- -

Встраивание SVG в SVG

- -

В отличие от HTML, SVG позволяет встравивать другие svg элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя viewBox, width иheight внутреннего svg элемнта.

- -
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
-  <svg width="100" height="100" viewBox="0 0 50 50">
-    <rect width="50" height="50" />
-  </svg>
-</svg>
-
- -

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

- -

{{ EmbedLiveSample('Embedding_SVG_in_SVG', '100', '100', '', 'Web/SVG/Tutorial/Basic_Transformations') }}

- -
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
diff --git "a/files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" "b/files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" deleted file mode 100644 index 0ecb1c5f1c..0000000000 --- "a/files/ru/web/svg/tutorial/\320\262\320\262\320\265\320\264\320\265\320\275\320\270\320\265/index.html" +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Введение -slug: Web/SVG/Tutorial/Введение -tags: - - SVG - - Руководство -translation_of: Web/SVG/Tutorial/Introduction ---- -

{{ PreviousNext("Web/SVG/Руководство", "Web/SVG/Руководство/Введение") }}

- -

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

- -

В 1999 году, после конкурса нескольких форматов, SVG был включен в W3C, однако полностью ратифицирован не был. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования SVG является его медленная загрузка . При этом SVG дает некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

- -

Базовые компоненты

- -

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента {{ SVGElement('svg') }} и нескольких основных форм, которые вместе обеспечивают построение рисунка.  Кроме того, есть элемент {{ SVGElement('g') }}, который используется для группировки нескольких основных форм вместе.

- -

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

- -

До начала работы

- -

Существует ряд приложений для рисования, такие как Inkscape, который свободный и использует SVG в качестве родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

- -

SVG поддерживается всеми современными браузерами и даже, в некоторых случаях, паре их устаревших версий. Достаточно полную таблицу поддерживающих браузеров можно найти в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

- -

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

- -
    -
  • Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).
    • -
  • Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.
    • -
- -

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

- -

Особенности SVG

- -

Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модульности для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

- -

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

- -

Существовали планы для спецификации SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

- -

{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}

diff --git "a/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" "b/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" deleted file mode 100644 index e95fd31f68..0000000000 --- "a/files/ru/web/svg/tutorial/\320\276\321\201\320\275\320\276\320\262\320\275\321\213\320\265_\321\204\320\270\320\263\321\203\321\200\321\213/index.html" +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Основные Фигуры -slug: Web/SVG/Tutorial/Основные_Фигуры -tags: - - SVG - - 'SVG:Руководство' -translation_of: Web/SVG/Tutorial/Basic_Shapes ---- -

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

- -

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

- -

Основные формы

- -

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

- -

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-
-  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
-  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
-
-  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
-  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
-      stroke="orange" fill="transparent" stroke-width="5"/>
-
-  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
-      stroke="green" fill="transparent" stroke-width="5"/>
-
-  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
-</svg>
- -
Замечание: Атрибуты stroke, stroke-width и fill описываются в рукодстве далее.
- -

Прямоугольники

- -

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

- -
<rect x="10" y="10" width="30" height="30"/>
-<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
- -
-
x
-
Положение x верхнего левого угла прямоугольника.
-
y
-
Положение y верхнего левого угла прямоугольника.
-
width
-
Ширина прямоугольника
-
height
-
Высота прямоугольника
-
rx
-
Радиус x углов прямоугольника
-
ry
-
Радиус y углов прямоугольника
-
- -

Окружность

- -

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

- -
<circle cx="25" cy="75" r="20"/>
- -
-
r
-
Радиус окружности.
-
cx
-
Положение x центра окружности.
-
cy
-
Положение y центра окружности.
-
- -

Эллипс

- -

Ellipse - это наиболее общая форма элемента окружность, в котором можно маштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

- -
<ellipse cx="75" cy="75" rx="20" ry="5"/>
- -
-
rx
-
Радиус x эллипса.
-
ry
-
Радиус y эллипса.
-
cx
-
Положение x центра эллипса.
-
cy
-
Положение y центра эллипса.
-
- -

Линия

- -

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечне точки линии.

- -
<line x1="10" x2="50" y1="110" y2="150"/>
- -
-
x1
-
Положение x точки 1.
-
y1
-
Положение y точки 1.
-
x2
-
Положение x точки 2.
-
y2
-
Положение y точки 2.
-
- -

Ломаная линия

- -

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

- -
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
- -
-
точки
-
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: "0 0, 1 1, 2 2".
-
- -

Многоугольник

- -

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента <rect/> в случаях, когда необходимо большая гибкость.

- -
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- -
-
точки
-
Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: "0 0, 1 1, 2 2". Полигон замыкается финальной прямой линией от (2,2) до (0,0).
-
- -

Путь

- -

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закругленными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

- -
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
- -
-
d
-
Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.
-
- -
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git "a/files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" "b/files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" deleted file mode 100644 index 7a660c2d0f..0000000000 --- "a/files/ru/web/svg/tutorial/\320\277\320\276\320\267\320\270\321\206\320\270\320\270/index.html" +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Расположение (позиции) -slug: Web/SVG/Tutorial/Позиции -tags: - - SVG - - 'SVG:Руководство' -translation_of: Web/SVG/Tutorial/Positions ---- -

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

- -

Сетка

- -

SVG для всех элементов использует систему координат или сеточную систему, схожую с той, что используется canvas (и множеством других стандартных компьютерных программ для рисования). Здесь верхний левый угол документа принимается за точку (0,0). Затем позиции измеряются в пикселях от верхнего левого угла с положительным направлением x, уходящим вправо, и положительным направлением y, уходящим вниз. Заметьте, что это направление противоположно тому, к которому мы привыкли с детства. Однако, именно этим способом располагаются элементы HTML.

- -

Пример:

- -

Элемент

- -
<rect x="0" y="0" width="100" height="100" />
-
- -

определяет прямоугольник от верхнего левого угла, который простирается оттуда на 100px вправо и вниз.

- -

Что такое "пиксели"?

- -

В наиболее общем случае один пиксель в документе SVG отображает один пиксель в устройстве вывода (a.k.a. экран). Но SVG формат не назывался бы "Маcштабируемым" (от англ. scalable), если не было бы некоторых возможностей изменить такое поведение. Большинство как абсолютных, так и относительных размеров шрифтов в CSS, SVG определяет абсолютными единицами (с размерными обозначениями "pt" или "cm") и, так называемыми, пользовательскими единицами без идентификаторов, являющиеся простыми цифрами.

- -

Без дополнительного уточнения, одна пользовательская единица равна одной единице экрана. Чтобы явно изменить такое поведение, в SVG существуют некоторые возможности. Мы начинаем с корневого элемента svg:

- -
<svg width="100" height="100">
-
- -

Вышеупомянутый элемент определяет простое полотно SVG размером 100x100px. Одна пользовательская единица равна одной единице экрана.

- -
<svg width="200" height="200" viewBox="0 0 100 100">
-
- -

Всё полотно SVG здесь имеет размер 200px на 200px. Однако, атрибут viewBox определяет часть этого полотна, которая будет отображаться. Эти 200x200 пикселей показывают область, которая начинается на пользовательской единице (0,0) и простирается на 100x100 пользовательских единиц вправо и вниз. Эффективное изменение масштаба в области 100x100 единиц увеличивает изображение до двойного размера.

- -

Текущее отображение (для единичного элемента или всего изображения) пользовательских единиц в экранные единицы называется системой пользовательских координат. Помимо масштабирования, систему координат можно также вращать, смещать и переворачивать. Система пользовательских координат по умолчанию отображает один пользовательский пиксель на один пиксель устройства. (При этом, устройство может решать, что понимать под одним пикселем.) Длины в файле SVG с особенными расширениями, такими как "in" или "cm" затем вычисляются таким образом, чтобы выразить их как 1:1 в финальном изображении.

- -

Цитата из SVG 1.1 специфирования иллюстрирует это:

- -
-

[...] предположим, что агент пользователя может определить из его окружения, что "1px" соответствует "0.2822222мм" (т.е., 90dpi). Тогда для всего обрабатываемого контента SVG: [...] "1см" равен "35.43307px" (и следовательно 35,43307 пользовательских единиц)

-
- -

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/a/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/a/index.html" deleted file mode 100644 index 97c2daf793..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/a/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: a -slug: Web/SVG/Элемент/a -tags: - - SVG -translation_of: Web/SVG/Element/a ---- -
{{SVGRef}}
- -

SVG элемент <a> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.

- -

Элемент <a> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.

- -
- - -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Ссылка в фигуре -->
-  <a href="/docs/Web/SVG/Element/circle">
-    <circle cx="50" cy="40" r="35"/>
-  </a>
-
-  <!-- Ссылка в тексте -->
-  <a href="/docs/Web/SVG/Element/text">
-    <text x="50" y="90" text-anchor="middle">
-      &lt;circle&gt;
-    </text>
-  </a>
-</svg>
- -
/* Так как SVG не предоставляет визуальных стилей по-умолчанию для ссылок,
-   будет лучше задать самостоятельно */
-
-@namespace svg url(http://www.w3.org/2000/svg);
-/* Необходимо выделить только SVG элементы <a>, но не HTML.
-   Смотрите предупреждение ниже */
-
-svg|a:link, svg|a:visited {
-  cursor: pointer;
-}
-
-svg|a text,
-text svg|a {
-  fill: blue; /* Даже для текста SVG использует заливку */
-  text-decoration: underline;
-}
-
-svg|a:hover, svg|a:active {
-  outline: dotted 1px blue;
-}
- -

{{EmbedLiveSample('Exemple', 100, 100)}}

- -
-

Поскольку этот элемент разделяет своё имя с элементом HTML <a>, выбор a через CSS или querySelector может выбрать не тот тип элемента. Попробуйте правило @namespace, чтобы разделять их.

-
-
- -

Атрибуты

- -
-
{{htmlattrxref("download", "a")}} {{experimental_inline}}
-
Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.
- Тип: <string> ;Значение по-умолчанию: none;Анимируем: нет
-
{{SVGAttr("href")}}
-
{{Glossary("URL")}} или фрагмент URL для перехода.
- Тип: <URL> ; Значение по-умолчанию: none; Анимируем: да
-
{{htmlattrxref("hreflang", "a")}}
-
URL на человеческом языке или фрагмент URL для перехода.
- Тип: <string>; Значение по-умолчанию: none; Анимируем: да
-
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
-
Разделённый пробелами список URL при переходе по которым браузер будет отправлять POST запросы с телом PING (в фоне). Обычно используется для трекинга.
- Тип: <list-of-URLs>; Значение по-умолчанию: none; Анимируем: нет
-
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
-
Какой referrer отправить при получении {{Glossary("URL")}}.
- Тип: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Значение по-умолчанию: none; Анимируем: нет
-
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
-
Отношение между целевым объектом и объектом link.
- Тип: <list-of-Link-Types> ; Значение по-умолчанию: none; Анимируем: да
-
{{SVGAttr("target")}}
-
Где отобразить переход {{Glossary("URL")}}.
- Тип: _self|_parent|_top|_blank|<name> ; Значение по-умолчанию: _self; Анимируем: да
-
{{htmlattrxref("type", "a")}}
-
{{Glossary("MIME type")}} для ссылки URL.
- Тип: <string> ; Значение по-умолчанию: none; Анимируем: да
-
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
-
URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.
- Тип: <URL> ; Значение по-умолчанию: none; Анимируем: да
-
- -

Глобальные аттрибуты

- -
-
Core Attributes
-
Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Event Attributes
-
Global event attributes, Document element event attributes, Graphical event attributes
-
Presentation Attributes
-
Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
XLink Attributes
-
Наиболее используемые: {{SVGAttr("xlink:title")}}
-
ARIA Attributes
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс SVGAElement.

- -

Примечания к использованию

- -

{{svginfo}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Изначальное определение
- -

Совместимость с браузерами

- - - -

{{Compat("svg.elements.a")}}

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animate/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animate/index.html" deleted file mode 100644 index 90988b58f8..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animate/index.html" +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/animate -tags: - - NeedsUpdate - - SVG - - SVG Animation - - svg анимация -translation_of: Web/SVG/Element/animate ---- -
{{SVGRef}}
- -

 Тег <animate> может быть помещен внутри какой-то фигуры, например,  <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.

- -

Использование

- -

{{svginfo}}

- -

Пример

- -

» animate.svg

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Атрибуты элемента

- -
    -
  • {{SVGAttr("attributeName")}}
    • -
  • {{SVGAttr("attributeType")}}
    • -
  • {{SVGAttr("from")}}
    • -
  • {{SVGAttr("to")}}
    • -
  • {{SVGAttr("dur")}}
    • -
  • {{SVGAttr("repeatCount")}}
    • -
- -

DOM интерфейс

- -

Элемент реализует SVGAnimateElement интерфейс .

- -

Спецификации

- - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('SVG1.1', 'animate.html#AnimateElement', '<animate>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Поддерживаемые браузеры

- - - -

{{Compat("svg.elements.animate")}}

- -

 

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animatemotion/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animatemotion/index.html" deleted file mode 100644 index 3b1259dcb3..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/animatemotion/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/animateMotion -tags: - - SVG - - svg анимация - - Элемент -translation_of: Web/SVG/Element/animateMotion ---- -
{{SVGRef}}
- -

Элемент <animateMotion> вызывает перемещение ссылочного элемента вдоль пути движения.

- -

Контекст использования

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Собственные атрибуты

- -
    -
  • {{SVGAttr("calcMode")}}
    • -
  • {{SVGAttr("path")}}
    • -
  • {{SVGAttr("keyPoints")}}
    • -
  • {{SVGAttr("rotate")}}
    • -
  • {{SVGAttr("origin")}}
    • -
- -

DOM интерфейс

- -

Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.

- -

Пример

- -

SVG

- -
<?xml version="1.0"?>
-<svg width="120" height="120" viewBox="0 0 120 120"
-    xmlns="http://www.w3.org/2000/svg" version="1.1"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-
-  <!-- Рисуем серый контур движения с двумя
-       маленькими кружками в ключевых точках -->
-  <path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none"
-        d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" />
-  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
-  <circle cx="110" cy="10" r="3" fill="lightgrey"  />
-
-  <!-- Рисуем красный круг, который будет перемещаться
-       вдоль траектории движения. -->
-  <circle cx="" cy="" r="5" fill="red">
-
-  <!-- Определяем анимацию пути движения -->
-    <animateMotion dur="6s" repeatCount="indefinite">
-      <mpath xlink:href="#theMotionPath"/>
-    </animateMotion>
-  </circle>
-</svg>
- -

Результат

- -

{{EmbedLiveSample("Пример", 120, 120)}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}{{Spec2("SVG Animations 2")}}Без изменений
{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}{{Spec2('SVG1.1')}}Начальное определение
- -

Совместимость с браузерами

- - - -

{{Compat("svg.elements.animateMotion")}}

- -

Смотрите также

- -
    -
  • {{SVGElement("mpath")}}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/circle/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/circle/index.html" deleted file mode 100644 index 3f1907b3bf..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/circle/index.html" +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/circle -tags: - - NeedsUpdate - - SVG -translation_of: Web/SVG/Element/circle ---- -
{{SVGRef}}
- -

Элемент circle — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.

- -

Информация

- -

{{svginfo}}

- -

Пример

- - - -
<?xml version="1.0"?>
-<svg viewBox="0 0 120 120" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
-  <circle cx="60" cy="60" r="50"/>
-</svg>
- - - -

» circle.svg

- -

Атрибуты

- -

Унаследованные

- - - -

Особые

- -
    -
  • {{ SVGAttr("cx") }}
    • -
- -

Координата центра окружности по оси x.

- -
    -
  • {{ SVGAttr("cy") }}
    • -
- -

Координата центра окружности по оси y.

- -
    -
  • {{ SVGAttr("r") }}
    • -
- -

Радиус окружности.

- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс {{ domxref("SVGCircleElement") }}.

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСостояниеКомментарий
{{SpecName('SVG2', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG1.1')}}Исходное определение
- -

Поддержка браузерами

- - - -

{{Compat("svg.elements.circle")}}

- - - -

Смотри также

- - diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/defs/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/defs/index.html" deleted file mode 100644 index 0312b05e34..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/defs/index.html" +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/defs -tags: - - NeedsUpdate - - SVG - - Контейнер SVG - - Элемент -translation_of: Web/SVG/Element/defs ---- -
{{SVGRef}}
- -

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

- -

Создание подобных элементов внутри элемента <defs> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.

- -

<defs> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.

- -

Контекст использования

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфичные атрибуты

- -

Нет

- -

Интерфейс DOM 

- -

Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.

- -

Пример

- -
<svg width="80px" height="30px" viewBox="0 0 80 30"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <defs>
-    <linearGradient id="Gradient01">
-      <stop offset="20%" stop-color="#39F" />
-      <stop offset="90%" stop-color="#F3F" />
-    </linearGradient>
-  </defs>
-
-  <rect x="10" y="10" width="60" height="10"
-        fill="url(#Gradient01)" />
-</svg>
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "struct.html#Head", "<defs>")}}{{Spec2("SVG2")}}Без изменений
{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}{{Spec2("SVG1.1")}}Первоначальное определение
- -

Браузерная совместимость

- - - -

{{Compat("svg.elements.defs")}}

- -

 

- -

Связанные темы

- -
    -
  • {{SVGElement("use")}}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/ellipse/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/ellipse/index.html" deleted file mode 100644 index f04083c1e1..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/ellipse/index.html" +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/ellipse -tags: - - NeedsUpdate -translation_of: Web/SVG/Element/ellipse ---- -
{{SVGRef}}
- -

Элемент ellipse — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.

- -
-

Сам по себе элемент ellipse не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45°), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.

-
- - - - - -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <ellipse cx="100" cy="50" rx="100" ry="50" />
-</svg>
- -

{{EmbedLiveSample('Exemple', 100, '100%')}}

- - - -

Атрибуты

- - - -
-
{{SVGAttr("cx")}}
-
Позиция эллипса по x.
- Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
-
{{SVGAttr("cy")}}
-
Позиция эллипса по y.
- Тип значения: <length>|<percentage> ; Значение по умолчанию: 0; Можно анимировать: да
-
{{SVGAttr("rx")}}
-
Радиус эллипса по x.
- Тип значения: auto|<length>|<percentage> ;Значение по умолчанию: auto; Можно анимировать: да
-
{{SVGAttr("ry")}}
-
Радиус эллипса по y.
- Тип значения: auto|<length>|<percentage> ; Значение по умолчанию: auto; Можно анимировать: да
-
{{SVGAttr("pathLength")}}
-
Этот атрибут позволяет установить длину всего пути.
- Тип значения: <number> ; Значение по умолчани: нет; Можно анимировать: да
-
- - -
-

Обратите внимание: Начиная с SVG2, cx, cy, rx и ry это Геометрические свойства. Это означает, что они могут быть использованы как CSS свойства элемента.

-
- -

Глобальные Атрибуты

-
-
Основные атрибуты
-
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты стиля
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Условные атрибуты
-
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Аттрибуты событий
-
Глобальные атрибуты событий, Атрибуты графических событий
-
Атрибуты представления
-
Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA-Атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto,aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label,aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable,aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly,aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- - - - - -

Информация

- -

{{svginfo}}

- - - -

Пример

- -

» ellipse.svg

- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс {{ domxref("SVGEllipseElement") }}.

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСостояниеКомментарий
{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG1.1')}}Исходное определение
- -

Поддержка браузерами

- - - -

{{Compat("svg.elements.ellipse")}}

- - - -

Смотри также

- -
    -
  • {{SVGElement("circle")}}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/feblend/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/feblend/index.html" deleted file mode 100644 index acd3547dcd..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/feblend/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/feBlend -tags: - - фильтры -translation_of: Web/SVG/Element/feBlend ---- -
{{SVGRef}}
- -

SVG фильтр примитивна  <feBlend> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом  {{SVGAttr("mode")}}.

- -

Используемый контекст

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специальные атрибуты

- -
    -
  • {{SVGAttr("in")}}
    • -
  • {{SVGAttr("in2")}}
    • -
  • {{SVGAttr("mode")}}
    • -
- -

DOM Interface

- -

Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}.

- -

Пример

- -

SVG

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <filter id="spotlight">
-      <feFlood result="floodFill" x="0" y="0" width="100%" height="100%"
-          flood-color="green" flood-opacity="1"/>
-      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/>
-    </filter>
-  </defs>
-
-  <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png"
-      x="10%" y="10%" width="80%" height="80%"
-      style="filter:url(#spotlight);"/>
-</svg>
- -

Результат

- -

{{EmbedLiveSample("Example", 200, 200)}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Filters 1.0", "#feBlendElement", "<feBlend>")}}{{Spec2("Filters 1.0")}}Аутсорсинг режимов наложения на{{SpecName("Compositing", "#ltblendmodegt")}}
{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}{{Spec2("SVG1.1")}}Первое определение
- -

Поддержка браузерами

- - - -

{{Compat("svg.elements.feBlend")}}

- -

Смотрите также

- -
    -
  • {{SVGElement("filter")}}
    • -
  • {{SVGElement("animate")}}
    • -
  • {{SVGElement("set")}}
    • -
  • {{SVGElement("feColorMatrix")}}
    • -
  • {{SVGElement("feComponentTransfer")}}
    • -
  • {{SVGElement("feComposite")}}
    • -
  • {{SVGElement("feConvolveMatrix")}}
    • -
  • {{SVGElement("feDiffuseLighting")}}
    • -
  • {{SVGElement("feDisplacementMap")}}
    • -
  • {{SVGElement("feFlood")}}
    • -
  • {{SVGElement("feGaussianBlur")}}
    • -
  • {{SVGElement("feImage")}}
    • -
  • {{SVGElement("feMerge")}}
    • -
  • {{SVGElement("feMorphology")}}
    • -
  • {{SVGElement("feOffset")}}
    • -
  • {{SVGElement("feSpecularLighting")}}
    • -
  • {{SVGElement("feTile")}}
    • -
  • {{SVGElement("feTurbulence")}}
    • -
  • SVG tutorial: Filter effects
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/foreignobject/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/foreignobject/index.html" deleted file mode 100644 index 64e32d019f..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/foreignobject/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/foreignObject -translation_of: Web/SVG/Element/foreignObject ---- -
{{SVGRef}}
-Элемент <foreignObject> SVG позволяет включать другое пространство имен XML.
-В контексте браузера это, скорее всего, XHTML / HTML.
- -
- - -
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    polygon { fill: black }
-
-    div {
-      color: white;
-      font:18px serif;
-      height: 100%;
-      overflow: auto;
-    }
-  </style>
-
-  <polygon points="5,5 195,10 185,185 10,195" />
-
-  <!-- Типичный пример использования: встраивание HTML-текста в SVG -->
-  <foreignObject x="20" y="20" width="160" height="160">
-  <!--
-В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать,
-но это обязательно в контексте документа SVG
-   -->
-    <div xmlns="http://www.w3.org/1999/xhtml">
-    - Смолчал хозяин, да и то, что мог сказать
-    - Мне невдомёк, но во владениях чертога
-    Поможет дом срубить да судьбы вам связать.
-    Не веришь ежли - испроси у Бога...
-    </div>
-  </foreignObject>
-</svg>
- -

{{EmbedLiveSample('Exemple', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("height")}}
-
Этот атрибут определяет высоту прямоугольника.
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("width")}}
-
Этот атрибут определяет ширину прямоугольника.
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("x")}}
-
Этот атрибут определяет координату x контейнера svg.
- Это не влияет на внешние элементы SVG.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("y")}}
-
Этот атрибут определяет координату Y контейнера SVG.
- Это не влияет на внешние элементы SVG.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
- -
-

Note: Starting with SVG2 x, y, width, and height are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Event Attributes
-
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
Aria Attributes
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Примечания по использованию

- -

{{svginfo}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Совместимость браузера

- - - -

{{Compat("svg.elements.foreignObject")}}

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/g/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/g/index.html" deleted file mode 100644 index c425f3c5b8..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/g/index.html" +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/g -tags: - - NeedsUpdate - - SVG -translation_of: Web/SVG/Element/g ---- -
{{SVGRef}}
- -

Элемент g используется для группировки других SVG элементов. Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.

- -

Контекст использования

- -

{{svginfo}}

- -

Пример

- -
<svg viewBox="0 0 95 50"
-     xmlns="http://www.w3.org/2000/svg">
-   <g stroke="green" fill="white" stroke-width="5">
-     <circle cx="25" cy="25" r="15"/>
-     <circle cx="40" cy="25" r="15"/>
-     <circle cx="55" cy="25" r="15"/>
-     <circle cx="70" cy="25" r="15"/>
-   </g>
-</svg>
-
- -

{{EmbedLiveSample("Example",220,130)}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфичные атрибуты

- -

Нет специфичных атрибутов.

- -

Интерфейс DOM

- -

Этот элемент реализует  SVGGElement интерейс.

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#GElement', '<g>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#Groups', '<g>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Поддержка браузерами

- - - -

{{Compat("svg.elements.g")}}

- - - -

Смотрите также:

- - - -
    -
  • {{SVGElement("use")}}
    • -
  • {{SVGElement("defs")}}
    • -
  • {{SVGElement("symbol")}}
    • -
  • SVG элемент g
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/image/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/image/index.html" deleted file mode 100644 index e417a4ac65..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/image/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/image -tags: - - NeedsUpdate - - SVG -translation_of: Web/SVG/Element/image ---- -
{{SVGRef}}
- -

Элемент <image> позволяет включить растровые изображения в SVG документ.

- -

Usage context

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфичные атрибуты

- -
    -
  • {{SVGAttr("x")}}
    • -
  • {{SVGAttr("y")}}
    • -
  • {{SVGAttr("width")}}
    • -
  • {{SVGAttr("height")}}
    • -
  • {{SVGAttr("xlink:href")}}
    • -
  • {{SVGAttr("preserveAspectRatio")}}
    • -
- -

DOM Interface

- -

This element implements the SVGImageElement interface.

- -

Пример

- -

Базовый рендеринг PNG изображения в качестве объекта SVG:

- -

SVG

- -
<svg width="200" height="200"
-  xmlns="http://www.w3.org/2000/svg">
-  <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
-</svg>
-
- -

Результат

- -

{{EmbedLiveSample("Пример", 250, 260)}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'embedded.html#ImageElement', '<image>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("svg.elements.image")}}

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/index.html" deleted file mode 100644 index b65942e344..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/index.html" +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Справочник SVG элементов -slug: Web/SVG/Элемент -tags: - - SVG - - SVG Reference - - Руководство -translation_of: Web/SVG/Element ---- -

« SVG / Справочник SVG атрибутов »

- -

SVG элементы

- -
A - -
    -
  • {{SVGElement("a")}}
    • -
  • {{SVGElement("altGlyph")}}
    • -
  • {{SVGElement("altGlyphDef")}}
    • -
  • {{SVGElement("altGlyphItem")}}
    • -
  • {{SVGElement("animate")}}
    • -
  • {{SVGElement("animateColor")}}
    • -
  • {{SVGElement("animateMotion")}}
    • -
  • {{SVGElement("animateTransform")}}
    • -
-B C - -
    -
  • {{SVGElement("circle")}}
    • -
  • {{SVGElement("clipPath")}}
    • -
  • {{SVGElement("color-profile")}}
    • -
  • {{SVGElement("cursor")}}
    • -
-D - -
    -
  • {{SVGElement("defs")}}
    • -
  • {{SVGElement("desc")}}
    • -
  • {{SVGElement("discard")}}
    • -
-E - -
    -
  • {{SVGElement("ellipse")}}
    • -
-F - -
    -
  • {{SVGElement("feBlend")}}
    • -
  • {{SVGElement("feColorMatrix")}}
    • -
  • {{SVGElement("feComponentTransfer")}}
    • -
  • {{SVGElement("feComposite")}}
    • -
  • {{SVGElement("feConvolveMatrix")}}
    • -
  • {{SVGElement("feDiffuseLighting")}}
    • -
  • {{SVGElement("feDisplacementMap")}}
    • -
  • {{SVGElement("feDistantLight")}}
    • -
  • {{SVGElement("feFlood")}}
    • -
  • {{SVGElement("feFuncA")}}
    • -
  • {{SVGElement("feFuncB")}}
    • -
  • {{SVGElement("feFuncG")}}
    • -
  • {{SVGElement("feFuncR")}}
    • -
  • {{SVGElement("feGaussianBlur")}}
    • -
  • {{SVGElement("feImage")}}
    • -
  • {{SVGElement("feMerge")}}
    • -
  • {{SVGElement("feMergeNode")}}
    • -
  • {{SVGElement("feMorphology")}}
    • -
  • {{SVGElement("feOffset")}}
    • -
  • {{SVGElement("fePointLight")}}
    • -
  • {{SVGElement("feSpecularLighting")}}
    • -
  • {{SVGElement("feSpotLight")}}
    • -
  • {{SVGElement("feTile")}}
    • -
  • {{SVGElement("feTurbulence")}}
    • -
  • {{SVGElement("filter")}}
    • -
  • {{SVGElement("font")}}
    • -
  • {{SVGElement("font-face")}}
    • -
  • {{SVGElement("font-face-format")}}
    • -
  • {{SVGElement("font-face-name")}}
    • -
  • {{SVGElement("font-face-src")}}
    • -
  • {{SVGElement("font-face-uri")}}
    • -
  • {{SVGElement("foreignObject")}}
    • -
-G - -
    -
  • {{SVGElement("g")}}
    • -
  • {{SVGElement("glyph")}}
    • -
  • {{SVGElement("glyphRef")}}
    • -
-H - -
    -
  • {{SVGElement("hatch")}}
    • -
  • {{SVGElement("hatchpath")}}
    • -
  • {{SVGElement("hkern")}}
    • -
-I - -
    -
  • {{SVGElement("image")}}
    • -
-J K L - -
    -
  • {{SVGElement("line")}}
    • -
  • {{SVGElement("linearGradient")}}
    • -
-M - -
    -
  • {{SVGElement("marker")}}
    • -
  • {{SVGElement("mask")}}
    • -
  • {{SVGElement("mesh")}}
    • -
  • {{SVGElement("meshgradient")}}
    • -
  • {{SVGElement("meshpatch")}}
    • -
  • {{SVGElement("meshrow")}}
    • -
  • {{SVGElement("metadata")}}
    • -
  • {{SVGElement("missing-glyph")}}
    • -
  • {{SVGElement("mpath")}}
    • -
-N O P - -
    -
  • {{SVGElement("path")}}
    • -
  • {{SVGElement("pattern")}}
    • -
  • {{SVGElement("polygon")}}
    • -
  • {{SVGElement("polyline")}}
    • -
-Q R - -
    -
  • {{SVGElement("radialGradient")}}
    • -
  • {{SVGElement("rect")}}
    • -
-S - -
    -
  • {{SVGElement("script")}}
    • -
  • {{SVGElement("set")}}
    • -
  • {{SVGElement("solidcolor")}}
    • -
  • {{SVGElement("stop")}}
    • -
  • {{SVGElement("style")}}
    • -
  • {{SVGElement("svg")}}
    • -
  • {{SVGElement("switch")}}
    • -
  • {{SVGElement("symbol")}}
    • -
-T - -
    -
  • {{SVGElement("text")}}
    • -
  • {{SVGElement("textPath")}}
    • -
  • {{SVGElement("title")}}
    • -
  • {{SVGElement("tref")}}
    • -
  • {{SVGElement("tspan")}}
    • -
-U - -
    -
  • {{SVGElement("unknown")}}
    • -
  • {{SVGElement("use")}}
    • -
-V — Z - -
    -
  • {{SVGElement("view")}}
    • -
  • {{SVGElement("vkern")}}
    • -
-
- -

Элементы SVG по категориям

- -

Элементы анимации

- -

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

- -

Базовые фигуры

- -

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

- -

Контейнеры

- -

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}

- -

Элементы описания

- -

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

- -

Фильтры

- -

{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}

- -

Элементы шрифта

- -

{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}

- -

Градиентные элементы

- -

{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

- -

Графические элементы

- -

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} 

- -

Элементы ссылки на графику

- -

{{SVGElement("mesh")}}, {{SVGElement("use")}}

- -

Источники света

- -

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} 

- -

Непрозрачные элементы

- -

{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} 

- -

Элементы сервера печати

- -

{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} 

- -

Отличительные элементы

- -

{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} 

- -

Элементы формы

- -

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

- -

Структурные элементы

- -

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

- -

Элементы текстового контента

- -

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

- -

Текстовые контентные дочерние элементы

- -

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

- -

Некатегоризированные элементы

- -

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} 

- -

Смотрите также

- - - -

 

- -

 

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/line/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/line/index.html" deleted file mode 100644 index b7f75c6a96..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/line/index.html" +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/line -tags: - - SVG -translation_of: Web/SVG/Element/line ---- -
 {{SVGRef}}
- -

Элемент <line> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.

- -
- - -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
-
-  <!-- Если вы не укажете цвет контура,
-       линия не будет видна -->
-</svg>
- -

{{EmbedLiveSample('Example', 100, 100)}}

-
- -

Атрибуты

- -
-
{{SVGAttr('x1')}}
-
Определяет координату начальной точки линии по оси x .
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
-
{{SVGAttr('x2')}}
-
Определяет координату конечной точки линии по оси x.
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
-
{{SVGAttr('y1')}}
-
Определяет координату начальной точки линии по оси y.
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
-
{{SVGAttr('y2')}}
-
Определяет координату конечной точки линии по оси y.
- Тип значения: <length>|<percentage>|<number> ; Значение по умолчанию: 0; Анимируемый: да
-
{{SVGAttr("pathLength")}}
-
Определяет общую длину пути в пользовательских единицах.
- Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
-
- -

Глобальные атрибуты

- -
-
Основные атрибуты
-
В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты оформления (стилей) 
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Атрибуты условной обработки
-
В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты события
-
Глобальные атрибуты события, Графические атрибуты события
-
Атрибуты презентации
-
В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
Атрибуты ARIA
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Поддержка браузерами

- - - -

{{Compat("svg.elements.line")}}

- -

 

- -

Смотрите также:

- - diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/lineargradient/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/lineargradient/index.html" deleted file mode 100644 index 37ab6a334d..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/lineargradient/index.html" +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/linearGradient -tags: - - NeedsUpdate - - SVG - - SVG градиент - - Справка - - Элемент -translation_of: Web/SVG/Element/linearGradient ---- -
{{SVGRef}}
- -

Элемент <linearGradient> SVG позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.

- -

Контекст использования

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфические атрибуты

- -
    -
  • {{SVGAttr("gradientUnits")}}
    • -
  • {{SVGAttr("gradientTransform")}}
    • -
  • {{SVGAttr("x1")}}
    • -
  • {{SVGAttr("y1")}}
    • -
  • {{SVGAttr("x2")}}
    • -
  • {{SVGAttr("y2")}}
    • -
  • {{SVGAttr("spreadMethod")}}
    • -
  • {{SVGAttr("xlink:href")}}
    • -
- -

DOM интерфейс

- -

Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.

- -

Пример

- -
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <linearGradient id="MyGradient">
-            <stop offset="5%"  stop-color="green"/>
-            <stop offset="95%" stop-color="gold"/>
-        </linearGradient>
-    </defs>
-
-    <rect fill="url(#MyGradient)"
-          x="10" y="10" width="100" height="100"/>
-</svg>
- -

{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКомментарий
{{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}{{Spec2('SVG1.1')}}Начальное определение
- -

Совместимость с браузером

- -
- - -

{{Compat("svg.elements.linearGradient")}}

-
- -

Смотрите также

- -
    -
  • {{SVGElement("radialGradient")}}
    • -
  • {{SVGElement("stop")}}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/path/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/path/index.html" deleted file mode 100644 index 7dc97ca989..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/path/index.html" +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/path -translation_of: Web/SVG/Element/path ---- -
{{SVGRef}}
- -

Элемент <path> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.

- -
- - -
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-  <path d="M 10,30
-           A 20,20 0,0,1 50,30
-           A 20,20 0,0,1 90,30
-           Q 90,60 50,90
-           Q 10,60 10,30 z"/>
-</svg>
- -

{{EmbedLiveSample('Example', 100, 100)}}

-
- -

Атрибуты

- -
-
{{SVGAttr("d")}}
-
Этот атрибут определяет форму.
- Тип значения: <string> ; Значеие по умолчанию: ''; Анимирование: Да
-
{{SVGAttr("pathLength")}}
-
Этот атрибут позволяет указывать общую длину в пользовательских единицах.
- Тип значения: <number> ; Значеие по умолчанию:нет; Анимирование: Да
-
- -

Глобальные атрибуты

- -
-
Атрибуты ядра
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты стиля
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Атрибуты условной обработки
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты событий
-
Атрибуты глобальных событий, Атрибуты графических событий
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Использование

- -

{{svginfo}}

- -

Спецификация

- - - - - - - - - - - - - - - - - - - - - - - - - - -
ХарактеристикиСтатусКоммент
{{SpecName("SVG Paths", "#PathElement", "<path>")}}{{Spec2("SVG Paths")}}
{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}{{Spec2("SVG2")}}
{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}{{Spec2("SVG1.1")}}Initial definition
- -

Совместимость браузера

- -

div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.

- -

{{Compat("svg.elements.path")}}

- -

Смотрите также

- -
    -
  • SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • -
  • The MDN SVG "Getting Started" tutorial : Path
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/pattern/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/pattern/index.html" deleted file mode 100644 index 2d572737d3..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/pattern/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/pattern -tags: - - SVG -translation_of: Web/SVG/Element/pattern ---- -
{{SVGRef}}
-Элемент <pattern> определяет графический объект, который может быть перерисован с повторяющимися координатами x и y («мозаичным»), чтобы покрыть область.
- -

-На ссылку <pattern> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других графических элементах , чтобы заполнить или обвести эти элементы указанным шаблоном. 
- -
 
- -
- - -
<svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
-      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
-    </pattern>
-  </defs>
-
-  <circle cx="50"  cy="50" r="50" fill="url(#star)"/>
-  <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
-</svg>
- -

{{EmbedLiveSample('Exemple', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("height")}}
-
Этот атрибут определяет высоту плитки шаблона.
- Value type: <length>|<percentage>; Default value: 0; Animatable: yes
-
{{SVGAttr("href")}}
-
Этот атрибут по умолчанию ссылается на пример шаблона для <pattern>
- Value type: <URL>; Default value: none; Animatable: yes
-
{{SVGAttr("patternContentUnits")}}
-
Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. 
- Value type: userSpaceOnUse|objectBoundingBox; Default value: userSpaceOnUse; Animatable: yes -

Сноска: Этот атрибут не действует, если в элементе <pattern> указан атрибут viewBox.

-
-
{{SVGAttr("patternTransform")}}
-
Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.
- Value type: <transform-list>; Default value: none; Animatable: yes
-
{{SVGAttr("patternUnits")}}
-
Этот атрибут определяет систему координат для атрибутов x, y, width и height. 
- Value type: userSpaceOnUse|objectBoundingBox; Default value: objectBoundingBox; Animatable: yes
-
{{SVGAttr("preserveAspectRatio")}}
-
Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.
- Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
-
{{SVGAttr("viewBox")}}
-
Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.
- Value type: <list-of-numbers> ; Default value: none; Animatable: yes
-
{{SVGAttr("width")}}
-
Этот атрибут определяет ширину плитки шаблона.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("x")}}
-
Этот атрибут определяет смещение координаты x мозаичного изображения.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
-
Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <pattern>.
- Value type: <URL>; Default value: none; Animatable: yes -

Сноска: Для браузеров, реализующих href, если заданы как href, так и xlink:href, xlink:href будет игнорироваться, используя только href.

-
-
{{SVGAttr("y")}}
-
Этот атрибут определяет смещение координат y мозаичного элемента.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
XLink Attributes
-
Most notably: {{SVGAttr("xlink:title")}}
-
- -

Нотации

- -

{{svginfo}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
ХарактеристикиСтатусКоммент
{{SpecName('SVG2', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Совместимость браузера

- - - -

{{Compat("svg.elements.pattern")}}

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/polygon/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/polygon/index.html" deleted file mode 100644 index b1baf626a3..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/polygon/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/polygon -tags: - - SVG -translation_of: Web/SVG/Element/polygon ---- -
{{SVGRef}}
- -

Элемент <polygon> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.

- -
- - -
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Example of a polygon with the default fill -->
-  <polygon points="0,100 50,25 50,75 100,0" />
-
-  <!-- Example of the same polygon shape with stroke and no fill -->
-  <polygon points="100,100 150,25 150,75 200,0"
-            fill="none" stroke="black" />
-</svg>
- -

{{EmbedLiveSample('Exemple', 100, 100)}}

-
- -

Атрибуты

- -
-
{{SVGAttr('points')}}
-
Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.
- Тип значения: <number>+ ; Значение по умолчанию: ""; Анимируемый: да
-
{{SVGAttr("pathLength")}}
-
Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.
- Тип значения: <number> ; Значение по умолчанию: none; Анимируемый: да
-
- -

Global attributes

- -
-
Основные атрибуты
-
Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Атрибуты стилизации
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Условные атрибуты
-
Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты событий
-
Атрибуты глобальных событий, Атрибуты графических событий
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Usage notes

- -

{{svginfo}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG2')}}No change
{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Совместимость с браузерами

- - - -

{{Compat("svg.elements.polygon")}}

- -

Смотрите также

- -
    -
  • Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/radialgradient/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/radialgradient/index.html" deleted file mode 100644 index 04906d4fd5..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/radialgradient/index.html" +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/radialGradient -tags: - - NeedsUpdate - - SVG -translation_of: Web/SVG/Element/radialGradient ---- -
{{SVGRef}}
- -

Элемент <radialGradient> SVG позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.

- -

Контекст использования

- -

{{svginfo}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфические атрибуты

- -
    -
  • {{SVGAttr("gradientUnits")}}
    • -
  • {{SVGAttr("gradientTransform")}}
    • -
  • {{SVGAttr("cx")}}
    • -
  • {{SVGAttr("cy")}}
    • -
  • {{SVGAttr("r")}}
    • -
  • {{SVGAttr("fx")}}
    • -
  • {{SVGAttr("fy")}}
    • -
  • {{SVGAttr("fr")}}
    • -
  • {{SVGAttr("spreadMethod")}}
    • -
  • {{SVGAttr("xlink:href")}}
    • -
- -

DOM интерфейс

- -

Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс.

- -

Пример

- -

SVG

- -
<svg width="120" height="120" viewBox="0 0 120 120"
-   xmlns="http://www.w3.org/2000/svg">
-
-  <defs>
-    <radialGradient id="exampleGradient">
-      <stop offset="10%" stop-color="gold"/>
-      <stop offset="95%" stop-color="green"/>
-    </radialGradient>
-  </defs>
-
-  <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
-</svg>
- -

Результат

- -

{{EmbedLiveSample("Example", 120, 120)}}

- -

Характеристики

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКоммент
{{SpecName('SVG2', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG2')}}Добавлен атрибут fr
{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}{{Spec2('SVG1.1')}}Начальное определение
- -

Совместимость с браузером

- - - -

 

- -

Смотрите также

- -
    -
  • {{SVGElement("linearGradient")}}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/rect/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/rect/index.html" deleted file mode 100644 index 8e4b7c9af7..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/rect/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/rect -tags: - - NeedsUpdate - - SVG -translation_of: Web/SVG/Element/rect ---- -
{{SVGRef}}
- -

<rect>  - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.

- -

Контекст использования

- - - - - - - - - - - - - - - - -
КатегорияПростая фигура, Графический элемент
Разрешенное содержимоеЛюбое количество указанных элементов в любом порядке:
- Элементы анимации »
- Элементы описания »
Нормативный документSVG 1.1 (2ое издание)
- -

Пример

- -

Простой пример использования rect

- -

 

- -
<?xml version="1.0"?>
-<svg width="120" height="120"
-     viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="100" height="100"/>
-</svg>
- -

 

- -

» rect-1.svg

- -

<rect> со скругленными углами

- -

 

- -
<?xml version="1.0"?>
-<svg width="120" height="120"
-     viewBox="0 0 120 120"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10"
-        width="100" height="100"
-        rx="15" ry="15"/>
-
-</svg>
- -

» rect-2.svg

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специальные атрибуты

- -
    -
  • {{ SVGAttr("x") }}
    • -
  • {{ SVGAttr("y") }}
    • -
  • {{ SVGAttr("width") }}
    • -
  • {{ SVGAttr("height") }}
    • -
  • {{ SVGAttr("rx") }}
    • -
  • {{ SVGAttr("ry") }}
    • -
- -

DOM Интерфейс

- -

Данный элемент реализует интерфейс SVGRectElement .

- -

Совместимость с браузерами

- -

 

- - - -

{{Compat("svg.elements.rect")}}

- -

 

- -

Смотрите также

- -
    -
  • {{ SVGElement("path") }}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/svg/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/svg/index.html" deleted file mode 100644 index 12e37bee9d..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/svg/index.html" +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/svg -translation_of: Web/SVG/Element/svg ---- -
{{SVGRef}}
- -

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

- -
-

Примечание. Атрибут xmlns требуется только для самого внешнего элемента svg документов SVG. Это не нужно для внутренних элементов svg или внутри документов HTML.

-
- -
- - -
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
-  <circle cx="50" cy="50" r="40" />
-  <circle cx="150" cy="50" r="4" />
-
-  <svg viewBox="0 0 10 10" x="200" width="100">
-    <circle cx="5" cy="5" r="4" />
-  </svg>
-</svg>
- -

{{EmbedLiveSample('Exeemple', 150, '100%')}}

-
- -

Атрибуты

- -
-
{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}
-
The minimum SVG language profile that the document requires.
- Value type: <string> ; Default value: none; Animatable: no
-
{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}
-
Язык сценариев по умолчанию, используемый фрагментом SVG.
- Value type: <string> ; Default value: application/ecmascript; Animatable: no
-
{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}
-
Язык таблицы стилей по умолчанию, используемый фрагментом SVG.
- Value type: <string> ; Default value: text/css; Animatable: no
-
{{SVGAttr("height")}}
-
Отображаемая высота прямоугольной области просмотра. (Не высота его системы координат.)
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("preserveAspectRatio")}}
-
How the svg fragment must be deformed if it is displayed with a different aspect ratio.
- Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Default value: xMidYMid meet; Animatable: yes
-
{{SVGAttr("version")}} {{deprecated_inline('svg2')}}
-
Какая версия SVG используется для внутреннего содержимого элемента.
- Value type: <number> ; Default value: none; Animatable: no
-
{{SVGAttr("viewBox")}}
-
Координаты области просмотра SVG для текущего фрагмента SVG.
- Value type: <list-of-numbers> ; Default value: none; Animatable: yes
-
{{SVGAttr("width")}}
-
Отображаемая ширина прямоугольной области просмотра. (Не ширина его системы координат.)
- Value type: <length>|<percentage> ; Default value: auto; Animatable: yes
-
{{SVGAttr("x")}}
-
The displayed x coordinate of the svg container. No effect on outermost svg elements.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
{{SVGAttr("y")}}
-
The displayed y coordinate of the svg container. No effect on outermost svg elements.
- Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
-
- -
-

Примечание. Начиная с SVG2, x, y, width и height являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.

-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Event Attributes
-
Global event attributes, Graphical event attributes, Document event attributes, Document element event attributes
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
Aria атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
- -

Примечания по использованию

- -

{{svginfo}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Кросс-браузерность

- - - -

{{Compat("svg.elements.svg")}}

diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" deleted file mode 100644 index d63d1b47dd..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/text/index.html" +++ /dev/null @@ -1,211 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/ -tags: - - NeedsUpdate - - SVG - - SVG text -translation_of: Web/SVG/Element/text ---- -
{{SVGRef}}
- -

SVG элемент <text> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <text> можно применить градиент, шаблон, окантовку, маску или фильтр.

- -

Текст не будет отображаться, если он не находится внутри SVG элемента <text>. Это отличается от сокрытия по умолчанию, поскольку установка свойства display не отображает текст.

- -

Пример

- -
- - -
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    .small { font: italic 13px sans-serif; }
-    .heavy { font: bold 30px sans-serif; }
-
-    /* Обратите внимание, что цвет текста задается с помощью        *
-     * fill свойства, а свойство color используется только для HTML */
-    .Rrrrr { font: italic 40px serif; fill: red; }
-  </style>
-
-  <text x="20" y="35" class="small">Мой</text>
-  <text x="60" y="35" class="heavy">кот</text>
-  <text x="60" y="55" class="small">очень</text>
-  <text x="100" y="55" class="Rrrrr">Сердит!</text>
-</svg>
-
-
- -

{{EmbedLiveSample('Пример', 150, '100%')}}

- -

Атрибуты

- -

Глобальные атрибуты

- - - -

Специфические атрибуты

- -
    -
  • {{SVGAttr("х")}}
    • -
  • {{SVGAttr("у")}}
    • -
  • {{SVGAttr("dх")}}
    • -
  • {{SVGAttr("dy")}}
    • -
  • {{SVGAttr("rotate")}}
    • -
  • {{SVGAttr("textLength")}}
    • -
  • {{SVGAttr("text-anchor")}}
    • -
  • {{SVGAttr("lengthAdjust")}}
    • -
- -

Интерфейс DOM

- -

Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.

- -

Примеры

- -

Основы использования элемента <text>

- -

SVG

- -
-
<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    .mal { font: italic 16px sans-serif; }
-    .hey { font: bold 26px sans-serif; fill: #6de;}
-  </style>
-  <text x="0" y="68" class="mal">- Привет,</text>
-  <text x="110" y="40" class="hey">Сахалин!</text>
-</svg>
-
-
- -

Результат

- -

{{EmbedLiveSample('SVG', 150, '100%')}}

- -

Изменение направления написания текста.

- -

Направление написания SVG-текста можно сменить на обратное, применив трансформацию.

- -

SVG

- -
-
-
-<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg">
-  <style>
-    .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);}
-    .hey {font: bold 26px sans-serif; fill: #6de;}
-  </style>
-  <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)">
-    Пример ротации</text>
-  <text x="180" y="40" class="hey">SVG-текста.</text>
-</svg>
-
-
-
-
- -

Результат

- -

{{EmbedLiveSample('Реверс', 200, '100%')}}

- -

Цвет текста

- -

Цвет текста в SVG-элементе <text> может быть изменён посредством свойства fill="[color]" внутри элемента <text>.

- -

SVG

- -
-
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
-    <style>
-      .gri {font: italic 16px sans-serif; fill: #6dd;}
-      .red {font: bold 26px sans-serif; fill: #d66;}
-    </style>
-    <text class="gri" x="10" y="30">Цвет текста</text>
-    <text class="red" x="120" y="30">SVG.</text>
-</svg>
-
-
- -

Результат

- -

{{EmbedLiveSample('SVG_3', 200, '100%')}}

- -

Применение CSS-стилей к содержимому элемента <text>.

- -

Содержимое SVG элемента <text> может быть стилизовано как обычный текст в HTML.

- -

SVG

- -
-
  <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
-    <style>
-      .stil {font: italic 16px sans-serif;}
-      .list {font: bold 26px sans-serif;}
-    </style>
-    <text class="stil" x="10" y="30">Стиль текста</text>
-    <text class="list" x="140" y="30">SVG.</text>
-</svg>
-
-
- -

Результат

- -

{{EmbedLiveSample('SVG_4', 200, '100%')}}

- -

Спецификация

- - - - - - - - - - - - - - - - - - - - - -
СпецификацияСтатусКоммент
{{SpecName('SVG2', 'text.html#TextElement', '<text>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}{{Spec2('SVG1.1')}}Начальное определение
- -

Таблица составлена по информации из этого источника.

- -

Совместимость с браузером

- - - -

{{Compat("svg.elements.text")}}

- -

Контекст использования

- -

{{Svginfo}}

- -

Связь

- -
    -
  • {{SVGElement("tref")}}
    • -
  • {{SVGElement("tspan")}}
    • -
  • {{SVGElement("altGlyph")}}
    • -
diff --git "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/use/index.html" "b/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/use/index.html" deleted file mode 100644 index 12d7007932..0000000000 --- "a/files/ru/web/svg/\321\215\320\273\320\265\320\274\320\265\320\275\321\202/use/index.html" +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: -slug: Web/SVG/Элемент/use -tags: - - SVG - - SVG Графика - - Ссылка - - Элемент -translation_of: Web/SVG/Element/use ---- -
{{SVGRef}}
- -

Элемент <use> берёт элементы из SVG-документа и дублирует их где-то еще.

- -
- - -
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
-  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
-  <use href="#myCircle" x="10" fill="blue"/>
-  <use href="#myCircle" x="20" fill="white" stroke="red"/>
-  <!--
-  В данном случае атрибут stroke="red" будет игнорироваться, так как
-  ранее он был задан непосредственно для фигуры круга с id "myCircle".
-  Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не
-  переопределяют значения, заданные у предка.
-  Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke".
-  -->
-</svg>
- -

{{EmbedLiveSample('Exemple', 100, 100)}}

-
- -

Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент use, подобно элементам <template> в HTML 5.
-
- Большинство атрибутов use не переопределяют те, что уже заданы у элемента, на который use ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). Только атрибуты {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}} и {{SVGAttr("href")}} элемента use будут переопределять те, что были заданы у элемента, на который use ссылается. Однако к элементу use будут применены любые другие атрибуты, не заданные у элемента, на который use ссылается.
-
- Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании CSS для стилизации элемента use и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование CSS-наследования.
-
- По соображениям безопасности, браузеры могут применять правило ограничения домена для элементов use и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.

- -
-

Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее,  на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите таблицу совместимости ниже).

-
- -

Атрибуты

- -
-
{{SVGAttr("href")}}
-
Ссылка на элемент/фрагмент, который нужно продублировать.
- Тип значения: <URL> ; Значение по умолчанию: none; Анимируется: да
-
{{SVGAttr("xlink:href")}}
-
{{Deprecated_Header("SVG2")}}<IRI>-ссылка на элемент/фрагмент, который нужно продублировать.
- Тип значения: <IRI> ; Значение по умолчанию: none; Анимируется: да
-
{{SVGAttr("x")}}
-
Координата "x" элемента use.
- Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
-
{{SVGAttr("y")}}
-
Координата "y" элемента use.
- Тип значения: <coordinate> ; Значение по умолчанию: 0; Анимируется: да
-
{{SVGAttr("width")}}
-
Ширина элемента use.
- Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
-
{{SVGAttr("height")}}
-
Высота элемента use.
- Тип значения: <length> ; Значение по умолчанию: 0; Анимируется: да
-
- -
-

Примечание: Начиная с SVG2, x, y, width, и height являются Свойствами Геометрии, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.

-
- -

Глобальные атрибуты

- -
-
Core Attributes
-
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
-
Styling Attributes
-
{{SVGAttr('class')}}, {{SVGAttr('style')}}
-
Conditional Processing Attributes
-
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
-
Атрибуты Событий
-
Global event attributes, Graphical event attributes
-
Presentation Attributes
-
Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}
-
ARIA Атрибуты
-
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
-
XLink Атрибуты
-
{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}
-
- -

Примечание по использованию

- -

{{svginfo}}

- -

Спецификации

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('SVG2', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}{{Spec2('SVG1.1')}}Initial definition
- -

Браузерная совместимость

- - - -

{{Compat("svg.elements.use")}}

-- cgit v1.2.3-54-g00ecf