From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/svg/attribute/additive/index.html | 56 ++ .../ru/web/svg/attribute/attributename/index.html | 85 +++ .../ru/web/svg/attribute/attributetype/index.html | 59 ++ files/ru/web/svg/attribute/class/index.html | 190 ++++++ files/ru/web/svg/attribute/core/index.html | 85 +++ files/ru/web/svg/attribute/cx/index.html | 70 +++ files/ru/web/svg/attribute/cy/index.html | 69 +++ files/ru/web/svg/attribute/d/index.html | 566 ++++++++++++++++++ files/ru/web/svg/attribute/dur/index.html | 95 +++ files/ru/web/svg/attribute/end/index.html | 45 ++ files/ru/web/svg/attribute/fill-opacity/index.html | 69 +++ files/ru/web/svg/attribute/fill-rule/index.html | 162 ++++++ files/ru/web/svg/attribute/fill/index.html | 99 ++++ files/ru/web/svg/attribute/font-weight/index.html | 86 +++ files/ru/web/svg/attribute/id/index.html | 113 ++++ files/ru/web/svg/attribute/index.html | 461 +++++++++++++++ files/ru/web/svg/attribute/keytimes/index.html | 87 +++ files/ru/web/svg/attribute/lang/index.html | 86 +++ files/ru/web/svg/attribute/lengthadjust/index.html | 33 ++ .../ru/web/svg/attribute/letter-spacing/index.html | 60 ++ .../ru/web/svg/attribute/lighting-color/index.html | 50 ++ files/ru/web/svg/attribute/onload/index.html | 5 + files/ru/web/svg/attribute/overflow/index.html | 67 +++ .../svg/attribute/patterncontentunits/index.html | 52 ++ files/ru/web/svg/attribute/r/index.html | 129 ++++ files/ru/web/svg/attribute/repeatcount/index.html | 47 ++ files/ru/web/svg/attribute/rx/index.html | 115 ++++ files/ru/web/svg/attribute/ry/index.html | 113 ++++ .../web/svg/attribute/shape-rendering/index.html | 79 +++ files/ru/web/svg/attribute/stop-color/index.html | 51 ++ .../web/svg/attribute/stroke-dashoffset/index.html | 162 ++++++ .../ru/web/svg/attribute/stroke-linecap/index.html | 194 ++++++ files/ru/web/svg/attribute/stroke-width/index.html | 57 ++ files/ru/web/svg/attribute/stroke/index.html | 69 +++ files/ru/web/svg/attribute/text-anchor/index.html | 107 ++++ .../ru/web/svg/attribute/text-rendering/index.html | 87 +++ files/ru/web/svg/attribute/transform/index.html | 121 ++++ files/ru/web/svg/attribute/values/index.html | 86 +++ files/ru/web/svg/attribute/viewbox/index.html | 191 ++++++ files/ru/web/svg/attribute/width/index.html | 648 +++++++++++++++++++++ files/ru/web/svg/attribute/x/index.html | 86 +++ .../web/svg/attribute/xml_colon_space/index.html | 50 ++ files/ru/web/svg/attribute/y/index.html | 86 +++ 43 files changed, 5228 insertions(+) create mode 100644 files/ru/web/svg/attribute/additive/index.html create mode 100644 files/ru/web/svg/attribute/attributename/index.html create mode 100644 files/ru/web/svg/attribute/attributetype/index.html create mode 100644 files/ru/web/svg/attribute/class/index.html create mode 100644 files/ru/web/svg/attribute/core/index.html create mode 100644 files/ru/web/svg/attribute/cx/index.html create mode 100644 files/ru/web/svg/attribute/cy/index.html create mode 100644 files/ru/web/svg/attribute/d/index.html create mode 100644 files/ru/web/svg/attribute/dur/index.html create mode 100644 files/ru/web/svg/attribute/end/index.html create mode 100644 files/ru/web/svg/attribute/fill-opacity/index.html create mode 100644 files/ru/web/svg/attribute/fill-rule/index.html create mode 100644 files/ru/web/svg/attribute/fill/index.html create mode 100644 files/ru/web/svg/attribute/font-weight/index.html create mode 100644 files/ru/web/svg/attribute/id/index.html create mode 100644 files/ru/web/svg/attribute/index.html create mode 100644 files/ru/web/svg/attribute/keytimes/index.html create mode 100644 files/ru/web/svg/attribute/lang/index.html create mode 100644 files/ru/web/svg/attribute/lengthadjust/index.html create mode 100644 files/ru/web/svg/attribute/letter-spacing/index.html create mode 100644 files/ru/web/svg/attribute/lighting-color/index.html create mode 100644 files/ru/web/svg/attribute/onload/index.html create mode 100644 files/ru/web/svg/attribute/overflow/index.html create mode 100644 files/ru/web/svg/attribute/patterncontentunits/index.html create mode 100644 files/ru/web/svg/attribute/r/index.html create mode 100644 files/ru/web/svg/attribute/repeatcount/index.html create mode 100644 files/ru/web/svg/attribute/rx/index.html create mode 100644 files/ru/web/svg/attribute/ry/index.html create mode 100644 files/ru/web/svg/attribute/shape-rendering/index.html create mode 100644 files/ru/web/svg/attribute/stop-color/index.html create mode 100644 files/ru/web/svg/attribute/stroke-dashoffset/index.html create mode 100644 files/ru/web/svg/attribute/stroke-linecap/index.html create mode 100644 files/ru/web/svg/attribute/stroke-width/index.html create mode 100644 files/ru/web/svg/attribute/stroke/index.html create mode 100644 files/ru/web/svg/attribute/text-anchor/index.html create mode 100644 files/ru/web/svg/attribute/text-rendering/index.html create mode 100644 files/ru/web/svg/attribute/transform/index.html create mode 100644 files/ru/web/svg/attribute/values/index.html create mode 100644 files/ru/web/svg/attribute/viewbox/index.html create mode 100644 files/ru/web/svg/attribute/width/index.html create mode 100644 files/ru/web/svg/attribute/x/index.html create mode 100644 files/ru/web/svg/attribute/xml_colon_space/index.html create mode 100644 files/ru/web/svg/attribute/y/index.html (limited to 'files/ru/web/svg/attribute') diff --git a/files/ru/web/svg/attribute/additive/index.html b/files/ru/web/svg/attribute/additive/index.html new file mode 100644 index 0000000000..0e5666b2b5 --- /dev/null +++ b/files/ru/web/svg/attribute/additive/index.html @@ -0,0 +1,56 @@ +--- +title: additive +slug: Web/SVG/Attribute/additive +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/additive +--- +

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

+ +

Этот атрибут определяет, является ли анимация аддитивной.

+ +

Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииАтрибут добавления анимации
Значениеreplace | sum
АнимируемыйНет
Нормативный документSVG 1.1 (2nd Edition)
+ +
+
sum
+
Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом.
+
replace
+
Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации {{ SVGAttr("by") }} и {{ SVGAttr("to") }}, как описано в SMIL Animation: How from, to and by attributes affect additive behavior.
+
+ +

Пример

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут additive

+ + diff --git a/files/ru/web/svg/attribute/attributename/index.html b/files/ru/web/svg/attribute/attributename/index.html new file mode 100644 index 0000000000..8a114bc8b2 --- /dev/null +++ b/files/ru/web/svg/attribute/attributename/index.html @@ -0,0 +1,85 @@ +--- +title: attributeName +slug: Web/SVG/Attribute/attributeName +tags: + - NeedsCompatTable + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/attributeName +--- +
{{SVGRef}}
+ +

Атрибут attributeName задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.

+ +

Четыре элемента используют данный артибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}

+ +
+ + +
<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
+  <rect x="50" y="50" width="100" height="100">
+    <animate attributeType="XML" attributeName="y" from="0" to="50"
+        dur="5s" repeatCount="indefinite"/>
+  </rect>
+</svg>
+ +

{{EmbedLiveSample("topExample", "400", "250")}}

+
+ +

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

+ + + + + + + + + + + + + + + + +
Значение<name>
Значение по-умолчаниюNone
АнимируемыйНет
+ +
+
<name>
+
Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.
+
+ +

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

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

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

+ + diff --git a/files/ru/web/svg/attribute/attributetype/index.html b/files/ru/web/svg/attribute/attributetype/index.html new file mode 100644 index 0000000000..64578f28b0 --- /dev/null +++ b/files/ru/web/svg/attribute/attributetype/index.html @@ -0,0 +1,59 @@ +--- +title: attributeType +slug: Web/SVG/Attribute/attributeType +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/attributeType +--- +

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

+ +

Этот атрибут задает пространство имен, в котором определяются конечный атрибут и связанные с ним значения.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияЦелевые атрибуты анимации
ЗначениеCSS | XML | auto
АнимируемыйНет
Нормативный документSVG 1.1 (2nd Edition)
+ +

Этот атрибут может принимать одно из следующих значений:

+ +
+
CSS
+
Указывает на то, что значение параметра  {{ SVGAttr("attributeName") }}  является именем свойства CSS, определяемого как анимация.
+
 
+
XML
+
Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.
+
auto
+
Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.
+
+ +

Пример

+ +

Элементы

+ +

Следующие элементы могут быть использованы с атрибутом attributeType

+ + diff --git a/files/ru/web/svg/attribute/class/index.html b/files/ru/web/svg/attribute/class/index.html new file mode 100644 index 0000000000..622423f521 --- /dev/null +++ b/files/ru/web/svg/attribute/class/index.html @@ -0,0 +1,190 @@ +--- +title: class +slug: Web/SVG/Attribute/class +translation_of: Web/SVG/Attribute/class +--- +

« Домашняя страница справочника по SVG аттрибутам

+ +

Присвоение класса или набора классов элементу. Вы можете присовить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".

+ +

Класс элемента имеет 2 ключевые роли:

+ + + +

Класс может быть использован для стилизации SVG содержимого используя CSS.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияNone
Значение<list-of-class-names>
Возможна анимацияYes
Нормативный документSVG 1.1 (2nd Edition): The class attribute
+ +

{{ page("/en/SVG/Content_type","List-of-Ts") }}

+ +

Example

+ +
<html>
+    <body>
+        <svg width="120" height="220"
+            viewPort="0 0 120 120" version="1.1"
+            xmlns="http://www.w3.org/2000/svg">
+
+            <style type="text/css" >
+                <![CDATA[
+                    rect.rectClass {
+                        stroke: #000066;
+                        fill:   #00cc00;
+                    }
+                    circle.circleClass {
+                        stroke: #006600;
+                        fill:   #cc0000;
+                    }
+                ]]>
+            </style>
+
+            <rect class="rectClass" x="10" y="10" width="100" height="100"/>
+            <circle  class="circleClass"   cx="40" cy="50" r="26"/>
+        </svg>
+    </body>
+</html>
+ +

Элементы

+ +

В следующих элементах допустимо использовать аттрибут class

+ +

:{{ SVGElement("a") }}

+ +
+ +
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Animation support{{ CompatUnknown() }}{{ CompatGeckoDesktop("5") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/ru/web/svg/attribute/core/index.html b/files/ru/web/svg/attribute/core/index.html new file mode 100644 index 0000000000..4423aa5468 --- /dev/null +++ b/files/ru/web/svg/attribute/core/index.html @@ -0,0 +1,85 @@ +--- +title: Основные атрибуты SVG +slug: Web/SVG/Attribute/Core +tags: + - SVG +translation_of: Web/SVG/Attribute/Core +--- +

Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.

+ +
+ +
+ +

Атрибуты

+ +
+
{{SVGAttr('id')}}
+
Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).
+ Значение: Любое строковое значение ID; Анимируемый: Нет
+
{{SVGAttr('lang')}}
+
+

Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в документе IETF "Tags for Identifying Languages (BCP47)".

+ +
+

SVG2 предоставляет новые lang атрибуты. Если атрибуты lang и xml:lang используются вместе, то xml:lang имеет приоритет над lang.

+
+ +

Значение: Любой валидный язык ID; Анимируемый: Нет

+
+
{{SVGAttr('tabindex')}}
+
Атрибут SVG tabindex позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.
+ Тип значения: <integer>; Анимируемый: Нет
+
{{SVGAttr('xml:base')}}
+
Указывает базовый IRI, отличный от базового IRI текущего документа.
+ Тип: <IRI>; Анимируемый: Нет
+
{{SVGAttr('xml:lang')}}
+
+

Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута lang в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (null) значение атрибута (xml:lang="") для указания неизвестного языка. Вместо этого, используйте xml:lang="und".

+ +
+

SVG2 предоставляет новые lang атрибуты. Если атрибуты lang и xml:lang используются вместе, то xml:lang имеет приоритет над lang.

+
+ +

Значение: Любой валидный язык ID; Анимируемый: Нет

+
+
{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}
+
+

SVG поддерживает стандартный XML-атрибут xml:space для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.

+ +
+

Примечание: Вместо атрибута xml:space следует использовать CSS свойство {{cssxref('white-space')}}.

+
+ +

Значение: default | preserve; Анимируемый: Нет

+
+
+ +

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

+ + + +

{{Compat("svg.attributes.core")}}

+ +
+ +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/ru/web/svg/attribute/cx/index.html b/files/ru/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..6e7c22c089 --- /dev/null +++ b/files/ru/web/svg/attribute/cx/index.html @@ -0,0 +1,70 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/cx +--- +

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

+ +

Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x.  Если атрибут не определён, то эффект такой, как если бы было указано значение "0".

+ +

Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента 100% соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение 50%.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииНет
Значение<coordinate>
АнимируемыйДа
Нормативные документы (en)SVG 1.1 (2nd Edition): The circle element
+ SVG 1.1 (2nd Edition): The ellipse element
+ SVG 1.1 (2nd Edition): The radialGradient element
+ +

{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}

+ +

Пример

+ +
  <svg width="120" height="220"
+     viewBox="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <style type="text/css" >
+
+      <![CDATA[
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]>
+    </style>
+     <circle  class="circleClass"   cx="40" cy="50" r="26"/>
+</svg>
+
+ +

Элементы

+ +

Следующие элементы могут использовать атрибут cx

+ + diff --git a/files/ru/web/svg/attribute/cy/index.html b/files/ru/web/svg/attribute/cy/index.html new file mode 100644 index 0000000000..d4b51c5f9b --- /dev/null +++ b/files/ru/web/svg/attribute/cy/index.html @@ -0,0 +1,69 @@ +--- +title: cy +slug: Web/SVG/Attribute/cy +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/cy +--- +

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

+ +

Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y.  Если атрибут не определён, то эффект такой, как если бы было указано значение "0".

+ +

Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента 100% соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение 50%.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииNone
Значение<coordinate>
АнимируемыйДа
Нормативные документы (en)SVG 1.1 (2nd Edition): The circle element
+ SVG 1.1 (2nd Edition): The ellipse element
+ SVG 1.1 (2nd Edition): The radialGradient element
+ +

{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}

+ +

Пример

+ +
  <svg width="120" height="220"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <style type="text/css" >
+
+      <![CDATA[
+       circle.circleClass {
+       stroke: #006600;
+       fill:   #cc0000;
+    }
+
+      ]]>
+    </style>
+     <circle  class="circleClass"   cx="40" cy="50" r="26"/>
+</svg>
+ +

Элементы

+ +

Следующие элементы могут использовать атрибут cy

+ + diff --git a/files/ru/web/svg/attribute/d/index.html b/files/ru/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..708aa0cbad --- /dev/null +++ b/files/ru/web/svg/attribute/d/index.html @@ -0,0 +1,566 @@ +--- +title: d +slug: Web/SVG/Attribute/d +translation_of: Web/SVG/Attribute/d +--- +
{{SVGRef}}
+ +

Атрибут d предоставляет определение пути для рисования.

+ +

Определение пути - это список команд пути, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.

+ +

Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red"
+    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%', 200)}}

+
+ +

path

+ +

Для {{SVGElement('path')}}, d - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')

+ + + + + + + + + + + + + + + + +
Value<string>
Default valuenone
AnimatableYes
+ +

glyph

+ +

Warning: Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться.

+ +

Для {{SVGElement('glyph')}}, d является строкой, содержащей серию команд пути, которые определяют форму контура глифа.

+ + + + + + + + + + + + + + + + +
Value<string>
Default valuenone
AnimatableYes
+ +

Сноска: Точка происхождения (координата 0,0) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.

+ +

missing-glyph

+ +

Внимание: Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться.

+ +

Для {{SVGElement('missing-glyph')}}, d является строкой, содержащей серию команд пути, которые определяют форму контура глифа.

+ + + + + + + + + + + + + + + + +
Value<string>
Default valuenone
AnimatableYes
+ +

Команды пути

+ +

(Path commands)

+ +

Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.

+ +

SVG определяет 6 типов команд пути для всех 20 команд:

+ + + +

Заметка: Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.

+ +

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

+ +

Команды перемещения

+ +

(MoveTo path commands)

+ +

MoveTo инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.

+ +

Заметка: Хорошей практикой является открытие всех путей с помощью команды moveto, потому что без начального moveto команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.

+ + + + + + + + + + + + + + + + + + + +
КомандаПараметрыПримечания
M(x, y)+Движение начала следующего под-пути к координатам  x,y. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже).
+ Формула: Pn = {x, y}
m(dx, dy)+ +

Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на dx вдоль оси x и на dy вдоль оси y. Любая последующая пара координат считается неявной относительной командой LineTo (l) (см. ниже)
+ Формула: Pn= {xo + dx, yo + dy}

+
+ +

Examples

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <path fill="none" stroke="red"
+    d="M 10,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 40,20 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       m  0,10 h 10
+       M 50,50 h 10
+       m-20,10 h 10
+       m-20,10 h 10
+       m-20,10 h 10" />
+</svg>
+ +

{{EmbedLiveSample('Команды_перемещения', '100%', 200)}}

+ +

LineTo path commands

+ +

LineTo инструкции проводят прямую линию от current point (Po; {xo, yo}), до end point (Pn; {xn, yn}), на основе указанных параметров. Конечная точка end point (Pn) становится текущей точкой для следующей команды  (Po').

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandParametersNotes
L(x, y)+ +

Рисует линию из текущей точки в конечную точку определенную x,y. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (L). Формула: Po' = Pn = {x, y}

+
l(dx, dy)+Draw a line from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (l) command (see below).
Hx+Draw a horizontal line from the current point to the new x coordinate (y coordinate stay unchanged). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (H) command.
hdx+Draw a horizontal line from the current point to a point shift by dx along the the x-axis (y coordinate stay unchanged). The current point get its X coordinate updated by dx for the next command. All subsequente value are considered an implicite relative horizontal LineTo (h) command.
Vy+Draw a vertical line from the current point to the new y coordinate (x coordinate stay unchanged). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (V) command.
vdy+Draw a vertical line from the current point to a point shift by dy along the y-axis (x coordinate stay unchanged). The current point get its Y coordinate updated by dy for the next command. All subsequente value are considered an implicite relative vertical LineTo (v) command.
+ +

Examples

+ + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- LineTo commands in absolute coordinates -->
+  <path fill="none" stroke="red"
+        d="M 10,10
+           L 90,90
+           V 10
+           H 50" />
+
+  <!-- LineTo commands in relative coordinates -->
+  <path fill="none" stroke="red"
+        d="M 110,10
+           l 80,80
+           v -80
+           h -40" />
+</svg>
+ +

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

+ +

Cubic Bézier Curve

+ +

Cubic Bézier curves are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandParametersNotes
C(x1,y1, x2,y2, x,y)+Draw a Bézier curve from the current point to the coordinate x,y. x1,y1 are the coordinates of the control point at the begining of the curve where x2,y2 are the coordinates of the controle point at the end of the curve. The coordinate x,y become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (C) command.
c(dx1,dy1, dx2,dy2, dx,dy)+Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. dx1,dy1 are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and dx2,dy2 are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (c) command.
S(x2,y2, x,y)+Draw a smooth Bézier curve from the current point to the coordinate x,y. x2,y2 are the coordinates of the controle point at the end of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate x,y become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (S) command.
s(dx2,dy2, dx,dy)+Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. dx2,dy2 are the coordinates of the controle point at the end of the curve relative to the starting point of the curve. The controle point at the begining of the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (s) command.
+ +

Examples

+ + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Quadratic Bézier curve with absolute coordinate -->
+  <path fill="none" stroke="red"
+        d="M 10,90
+           C 30,90 25,10 50,10
+           S 70,90 90,90" />
+
+  <!-- Quadratic Bézier curve with relative coordinate -->
+  <path fill="none" stroke="red"
+        d="M 110,90
+           c 20,0 15,-80 40,-80
+           s 20,80 40,80" />
+
+  <!-- Highlight the curve vertex and control points -->
+  <g id="ControlPoints">
+
+    <!-- First cubic command control points -->
+    <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" />
+    <circle cx="30" cy="90" r="1.5"/>
+
+    <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" />
+    <circle cx="25" cy="10" r="1.5"/>
+
+    <!-- Second smooth command control points (the first one is implicite) -->
+    <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" />
+    <circle cx="75" cy="10" r="1.5" fill="lightgrey"/>
+
+    <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" />
+    <circle cx="70" cy="90" r="1.5" />
+
+    <!-- curve vertex points -->
+    <circle cx="10" cy="90" r="1.5"/>
+    <circle cx="50" cy="10" r="1.5"/>
+    <circle cx="90" cy="90" r="1.5"/>
+  </g>
+  <use xlink:href="#ControlPoints" x="100" />
+</svg>
+ +

{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}

+ +

Quadratic Bézier Curve

+ +

Quadratic Bézier curves are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandParametersNotes
Q(x1,y1, x,y)+Draw a Bézier curve from the current point to the coordinate x,y. x1,y1 are the coordinates of the control point for the curve. The coordinate x,y become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (Q) command.
q(dx1,dy1, dx,dy)+Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. dx1,dy1 are the coordinates of the control point for the curve relative to the starting point of the curve. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (q) command.
T(x,y)+Draw a smooth Bézier curve from the current point to the coordinate x,y. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The coordinate x,y become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (T) command.
t(dx,dy)+Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The controle point for the curve is a reflexion of the controle points at the end of the previous curve command. If the previous command wasn't a curve, then the coordinate of the controle point at the begining of the curve match those of the curve starting point. The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (t) command.
+ +

Examples

+ + + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Quadratic Bézier curve with implicite repetition -->
+  <path fill="none" stroke="red"
+        d="M 10,50
+           Q 25,25 40,50
+           t 30,0 30,0 30,0 30,0 30,0" />
+
+  <!-- Highlight the curve vertex and control points -->
+  <g>
+    <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" />
+    <circle cx="25" cy="25" r="1.5" />
+
+    <!-- curve vertex points -->
+    <circle cx="10" cy="50" r="1.5"/>
+    <circle cx="40" cy="50" r="1.5"/>
+
+    <g id="SmoothQuadraticDown">
+      <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
+      <circle cx="55" cy="75" r="1.5" fill="lightgrey" />
+      <circle cx="70" cy="50" r="1.5" />
+    </g>
+
+    <g id="SmoothQuadraticUp">
+      <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" />
+      <circle cx="85" cy="25" r="1.5" fill="lightgrey" />
+      <circle cx="100" cy="50" r="1.5" />
+    </g>
+
+    <use xlink:href="#SmoothQuadraticDown" x="60" />
+    <use xlink:href="#SmoothQuadraticUp"   x="60" />
+    <use xlink:href="#SmoothQuadraticDown" x="120" />
+  </g>
+</svg>
+ +

{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}

+ +

Elliptical Arc Curve

+ +

Elliptical arc curves are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.

+ + + + + + + + + + + + + + + + + + + +
CommandParametersNotes
A(rx ry angle large-arc-flag sweep-flag x y)+ +

Draw an Arc curve from the current point to the coordinate x,y. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:

+ +
    +
  • rx and ry are the two radii of the ellipse;
    • +
  • angle represente a rotation (in degree) of the ellipse relative to the x-axis;
    • +
  • large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. +
      +
    • large-arc-flag allows to chose one of the large arc (1) or small arc (0),
      • +
    • sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0)
      • +
    +
    • +
+ The coordinate x,y become the new current point for the next command. All subsequente set of parameters are considered implicite absolute arc curve (A) command.
a(rx ry angle large-arc-flag sweep-flag dx dy)+ +

Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by dx along the x-axis and dy along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:

+ +
    +
  • rx and ry are the two radii of the ellipse;
    • +
  • angle represente a rotation (in degree) of the ellipse relative to the x-axis;
    • +
  • large-arc-flag and sweep-flag allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. +
      +
    • large-arc-flag allows to chose one of the large arc (1) or small arc (0),
      • +
    • sweep-flag allows to chose one of the clockwise turning arc (1) or anticlockwise turning arc (0)
      • +
    +
    • +
+ The current point gets its X and Y coordinates shifted by dx and dy for the next command. All subsequente set of parameters are considered implicite relative arc curve (a) command.
+ +

Examples

+ + + +
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- The influence of the arc flags on which arc is drawn -->
+  <path fill="none" stroke="red"
+        d="M 6,10
+           A 6 4 10 1 0 14,10" />
+
+  <path fill="none" stroke="lime"
+        d="M 6,10
+           A 6 4 10 1 1 14,10" />
+
+  <path fill="none" stroke="purple"
+        d="M 6,10
+           A 6 4 10 0 1 14,10" />
+
+  <path fill="none" stroke="pink"
+        d="M 6,10
+           A 6 4 10 0 0 14,10" />
+</svg>
+ +

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

+ +

ClosePath

+ +

ClosePath instructions draw a straight line from the current position, to the first point in the path.

+ + + + + + + + + + + + + + +
CommandParametersNotes
Z, zClose the curent subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.
+ +

Note: The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.

+ +

Examples

+ + + +
<svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg">
+
+  <!--
+  An open shape with the last point of
+  the path different than the first one
+  -->
+  <path stroke="red"
+        d="M 5,1
+           l -4,8 8,0" />
+
+  <!--
+  An open shape with the last point of
+  the path matching the first one
+  -->
+  <path stroke="red"
+        d="M 15,1
+           l -4,8 8,0 -4,-8" />
+
+  <!--
+  An closed shape with the last point of
+  the path different than the first one
+  -->
+  <path stroke="red"
+        d="M 25,1
+           l -4,8 8,0
+           z" />
+</svg>
+ +

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

+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "paths.html#DProperty", "d")}}{{Spec2("SVG2")}}Definition for <path>
{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}{{Spec2("SVG1.1")}}Initial definition for <glyph> and <missing-glyph>
{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}{{Spec2("SVG1.1")}}Initial definition for <path>
diff --git a/files/ru/web/svg/attribute/dur/index.html b/files/ru/web/svg/attribute/dur/index.html new file mode 100644 index 0000000000..7580e8fd28 --- /dev/null +++ b/files/ru/web/svg/attribute/dur/index.html @@ -0,0 +1,95 @@ +--- +title: dur +slug: Web/SVG/Attribute/dur +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/dur +--- +
{{SVGRef}}
+ +

Атрибут dur отображает простую длительность анимации.

+ +

Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}

+ +
+ + +
<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0" width="100" height="100">
+    <animate attributeType="XML" attributeName="y" from="0" to="50"
+        dur="1s" repeatCount="indefinite"/>
+  </rect>
+  <rect x="120" y="0" width="100" height="100">
+    <animate attributeType="XML" attributeName="y" from="0" to="50"
+        dur="3s" repeatCount="indefinite"/>
+  </rect>
+</svg>
+ +

{{EmbedLiveSample("topExample", "220", "150")}}

+
+ +

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

+ + + + + + + + + + + + + + + + +
Значение<clock-value> | indefinite | media
Значение по-умолчаниюindefinite
АнимируемыйНет
+ +
+
<clock-value>
+
Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (h), минутах (m), секундах (s) или миллисекундах (ms). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: hh:mm:ss.iii или  mm:ss.iii
+
media
+
Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.
+
indefinite
+
Задаёт простую длительность, как незаданную
+
+
+ +
+

Примечание: Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).

+
+ +

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

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

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

+ +

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

diff --git a/files/ru/web/svg/attribute/end/index.html b/files/ru/web/svg/attribute/end/index.html new file mode 100644 index 0000000000..c4db1e943f --- /dev/null +++ b/files/ru/web/svg/attribute/end/index.html @@ -0,0 +1,45 @@ +--- +title: end +slug: Web/SVG/Attribute/end +translation_of: Web/SVG/Attribute/end +--- +

« SVG Attribute reference home

+ +

Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.

+ +

Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
CategoriesAnimation timing attribute
Value<End-value-list>
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
+ +

Для типов значений, разрешенных в, <end-value-list> см.  {{ SVGAttr("begin") }} атрибут.

+ +

Examples

+ +

Elements

+ +

The following elements can use the end attribute

+ + diff --git a/files/ru/web/svg/attribute/fill-opacity/index.html b/files/ru/web/svg/attribute/fill-opacity/index.html new file mode 100644 index 0000000000..ca44666cf6 --- /dev/null +++ b/files/ru/web/svg/attribute/fill-opacity/index.html @@ -0,0 +1,69 @@ +--- +title: fill-opacity +slug: Web/SVG/Attribute/fill-opacity +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/fill-opacity +--- +

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

+ +

Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут оформления
Значение<opacity-value> | inherit
Предустановленное значение1
АнимируемыйДа
СпецификацияSVG 1.1 (2nd Edition)
+ +

Примеры

+ +

SVG

+ +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100" />
+</svg>
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100" fill-opacity="0.25" />
+</svg>
+ +

результат

+ +

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

+ +

Элементы

+ +

Следующие группы элементов могут быть использованы с атрибутом fill-opacity:

+ + + +

См. также

+ + diff --git a/files/ru/web/svg/attribute/fill-rule/index.html b/files/ru/web/svg/attribute/fill-rule/index.html new file mode 100644 index 0000000000..d83dad58c3 --- /dev/null +++ b/files/ru/web/svg/attribute/fill-rule/index.html @@ -0,0 +1,162 @@ +--- +title: fill-rule +slug: Web/SVG/Attribute/fill-rule +translation_of: Web/SVG/Attribute/fill-rule +--- +
{{SVGRef}}
+ +

The fill-rule этот  атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.

+ +

Note: Атрибут представления, fill-rule может быть использован как CSS свойство.

+ +

Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Default value for fill-rule -->
+  <polygon fill-rule="nonzero" stroke="red"
+   points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  The center of the shape has two
+  path segments (shown by the red stroke)
+  between it and infinity. It is therefore
+  considered outside the shape, and not filled.
+  -->
+  <polygon fill-rule="evenodd" stroke="red"
+   points="150,0 121,90 198,35 102,35 179,90"/>
+</svg>
+ +

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

+
+ +

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

+ + + + + + + + + + + + + + + + +
Значениеnonzero | evenodd
Значение по умолчаниюnonzero
АнимируемыйДа
+ +

The fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:

+ +

nonzero

+ +

The value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.

+ +

Example

+ + + +
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effect of nonzero fill rule on crossing path segments -->
+  <polygon fill-rule="nonzero" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  Effect of nonzero fill rule on a shape inside a shape
+  with the path segment moving in the same direction
+  (both squares drawn clockwise, to the "right")
+  -->
+  <path fill-rule="nonzero" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/>
+
+    <!--
+  Effect of nonzero fill rule on a shape inside a shape
+  with the path segment moving in the opposite direction
+  (one square drawn clockwise, the other anti-clockwise)
+  -->
+  <path fill-rule="nonzero" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/>
+</svg>
+ +

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

+ +

evenodd

+ +

The value evenodd determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.

+ +

Example

+ + + +
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
+  <!-- Effect of evenodd fill rule on crossing path segments -->
+  <polygon fill-rule="evenodd" stroke="red"
+           points="50,0 21,90 98,35 2,35 79,90"/>
+
+  <!--
+  Effect of evenodd fill rule on on a shape inside a shape
+  with the path segment moving in the same direction
+  (both squares drawn clockwise, to the "right")
+  -->
+  <path fill-rule="evenodd" stroke="red"
+        d="M110,0  h90 v90 h-90 z
+           M130,20 h50 v50 h-50 z"/>
+
+    <!--
+  Effect of evenodd fill rule on a shape inside a shape
+  with the path segment moving in opposite direction
+  (one square drawn clockwise, the other anti-clockwise)
+  -->
+  <path fill-rule="evenodd" stroke="red"
+        d="M210,0  h90 v90 h-90 z
+           M230,20 v50 h50 v-50 z"/>
+</svg>
+ +

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

+ +

Browser compatibility

+ + + +

{{Compat("svg.attributes.presentation.fill-rule")}}

+ +

Specification

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}{{Spec2("SVG2")}}Definition for shapes and text
{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}{{Spec2("SVG1.1")}}Initial definition for shapes and text
+ +
+

да

+
diff --git a/files/ru/web/svg/attribute/fill/index.html b/files/ru/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..9e4c654a44 --- /dev/null +++ b/files/ru/web/svg/attribute/fill/index.html @@ -0,0 +1,99 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - NeedsUpdate + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/fill +--- +

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

+ +

Атрибут fill имеет два значения в зависимости от используемого контекста.

+ +

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

+ +

Для фигур и текста атрибут fill является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS

+ +

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

+ +

Для анимируемых элементов

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибуты времени анимации
Значениеremove | freeze
АнимацияНет
Нормативный документSVG 1.1 (2nd Edition)
+ +
+
remove (default)
+
Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).
+
freeze
+
Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).
+
+ +

Для текста и форм

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
Значение +

<paint>, context-fill, context-stroke

+
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Примеры

+ +

Пример 1: Простой SVG

+ +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100" fill="#666"/>
+</svg>
+ +

Результат

+ +

{{EmbedLiveSample('Example_1_Simple_SVG', 200, 200)}}

+ +

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

+ +

Для информации об использовании нестандартного и ограниченного значения  context-fill (и context-stroke) смотрите документацию  {{cssxref("-moz-context-properties")}}.

+ +

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

+ +

Следующие элементы могут использовать атрибут fill

+ + diff --git a/files/ru/web/svg/attribute/font-weight/index.html b/files/ru/web/svg/attribute/font-weight/index.html new file mode 100644 index 0000000000..1985975c56 --- /dev/null +++ b/files/ru/web/svg/attribute/font-weight/index.html @@ -0,0 +1,86 @@ +--- +title: font-weight +slug: Web/SVG/Attribute/font-weight +tags: + - SVG +translation_of: Web/SVG/Attribute/font-weight +--- +

« SVG Attribute reference home

+ +

Атрибут font-weight позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .

+ +

Как и любой атрибут представления,  font-weight может быть использован в виде свойства в CSS стилях, см. {{ cssxref("font-weight","CSS font-weight") }} для подробной информации.

+ +

Контекст применения

+ + + + + + + + + + + + + + + + + + + + +
КатегорииАтрибут представления
Значенияnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
АнимируемостьДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Значение ключевых слов

+ + + +

Предостережения

+ +

Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.

+ +

Пример

+ +

css

+ +
p.normal {font-weight:normal;}
+p.thick {font-weight:bold;}
+p.thicker {font-weight:900;}
+ +

html

+ +
<p class="normal">This is a paragraph.</p>
+<p class="light">This is a paragraph.</p>
+<p class="thick">This is a paragraph.</p>
+<p class="thicker">This is a paragraph.</p>
+
+ +

Элементы

+ +

Следующие элементы могут использовать атрибут font-weight.

+ + + +

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

+ + + +

{{Compat("svg.attributes.presentation.font-weight")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/svg/attribute/id/index.html b/files/ru/web/svg/attribute/id/index.html new file mode 100644 index 0000000000..54590a4cd4 --- /dev/null +++ b/files/ru/web/svg/attribute/id/index.html @@ -0,0 +1,113 @@ +--- +title: id +slug: Web/SVG/Attribute/id +tags: + - SVG +translation_of: Web/SVG/Attribute/id +--- +
{{SVGRef}}
+ +

Атрибут id присваивает уникальное имя элементу.

+ +

Этот атрибут используется всеми элементами.

+ +
+
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+    <![CDATA[
+      #smallRect {
+        stroke: #000066;
+        fill: #00cc00;
+      }
+    ]]>
+  </style>
+
+  <rect id="smallRect" x="10" y="10" width="100" height="100" />
+</svg>
+
+ +

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

+
+ +

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

+ + + + + + + + + + + + + + + + +
Значение<id>
Значение по умолчаниюОтсутствует
АнимируемыйНет
+ +
+
<id>
+
+

Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать  никаких пробелов.

+ +
+

Примечание: Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, MyDrawing.svg#svgView(viewBox(0,200,1000,1000))) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.

+
+ +

Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-).

+
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}{{Spec2("SVG2")}}Более подробно определяет допустимые значения.
{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}{{Spec2("SVG1.1")}}Исходное определение
+ +

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

+ + + +

{{Compat("svg.attributes.style.class")}}

+ +

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

+ + + +
+
+
+
+ +
+ +
+
+ +
+
+
diff --git a/files/ru/web/svg/attribute/index.html b/files/ru/web/svg/attribute/index.html new file mode 100644 index 0000000000..7d05b490e8 --- /dev/null +++ b/files/ru/web/svg/attribute/index.html @@ -0,0 +1,461 @@ +--- +title: Справочник SVG атрибутов +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - SVG + - SVG Attribute + - SVG Reference + - Атрибуты + - Руководство +translation_of: Web/SVG/Attribute +--- +

« SVG / Справочник SVG элементов »

+ +

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

+ +

SVG Атрибуты от А до Я

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

Категории

+ +

Атрибуты событий анимации

+ +

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+ +

Целевые атрибуты анимации

+ +

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+ +

Атрибуты времени анимации

+ +

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+ +

Атрибуты значений анимации

+ +

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}

+ +

Атрибуты добавления анимации

+ +

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+ +

Атрибуты условий

+ +

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+ +

Атрибуты ядра

+ +

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}

+ +

Атрибуты событий документа

+ +

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}

+ +

Атрибуты простых фильтров

+ +

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+ +

Атрибуты графических событий

+ +

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+ +

Атрибуты представления

+ +
Заметьте, что все атрибуты представления SVG можно использовать как CSS свойства.
+ +

{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}

+ +

Атрибуты передаточных функций

+ +

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ + + +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

diff --git a/files/ru/web/svg/attribute/keytimes/index.html b/files/ru/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..4df57edc2c --- /dev/null +++ b/files/ru/web/svg/attribute/keytimes/index.html @@ -0,0 +1,87 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +

« SVG Attribute reference home

+ +

Атрибут keyTimes представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке keyTimes задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.

+ +

Если указан список keyTimes, то в списке keyTimes должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .

+ +

Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.

+ +

Семантика списка keyTimes зависит от режима интерполяции:

+ + + +

Если в качестве режима интерполяции используется paced, атрибут keyTimes игнорируется.

+ +

Если в качетсве параметра длительности выбрано indefinite, атрибут keyTimes игнорируется.

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
CategoriesAnimation value attribute
Value<list>
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
+ +

Пример

+ +
<?xml version="1.0"?>
+<svg width="120" height="120"
+     viewPort="0 0 120 120" version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <circle cx="60" cy="10" r="10">
+
+        <animate attributeName="cx"
+                 attributeType="XML"
+                 dur="4s"
+                 values="60 ; 110 ; 60 ; 10 ; 60"
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/>
+
+        <animate attributeName="cy"
+                 attributeType="XML"
+                 dur="4s"
+                 values="10 ; 60 ; 110 ; 60 ; 10 "
+                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
+                 repeatCount="indefinite"/>
+
+    </circle>
+</svg>
+ +

Демонстрация

+ +

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

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут keyTimes

+ + diff --git a/files/ru/web/svg/attribute/lang/index.html b/files/ru/web/svg/attribute/lang/index.html new file mode 100644 index 0000000000..86317240f1 --- /dev/null +++ b/files/ru/web/svg/attribute/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/SVG/Attribute/lang +tags: + - SVG +translation_of: Web/SVG/Attribute/lang +--- +
{{SVGRef}}
+ +

Атрибут lang указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определенных элементов.

+ +

Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.

+ +

В SVG 1.1 существовал атрибут lang, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в формате BCP 47. Глиф предназначался для использования, если атрибут xml:lang точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут xml:lang точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".

+ +

Все элементы используют этот атрибут.

+ +
+
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <text lang="en-US">This is some English text</text>
+</svg>
+
+ +

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

+ + + + + + + + + + + + + + + + +
Значение<language-tag>
Значение по умолчаниюОтсутствует
АнимируемыйНет
+ +
+
<language-tag>
+
+

Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в спецификации BCP 47.

+ +

Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, en-US для американского английского языка или de-AT для австрийского немецкого.

+
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "struct.html#LangAttribute", "lang")}}{{Spec2("SVG2")}}Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними.
{{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}}{{Spec2("SVG1.1")}}Устаревшее определение атрибута для элементов {{SVGElement("glyph")}}.
+ +

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

+ + + +

{{Compat("svg.attributes.core.lang")}}

+ +

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

+ + diff --git a/files/ru/web/svg/attribute/lengthadjust/index.html b/files/ru/web/svg/attribute/lengthadjust/index.html new file mode 100644 index 0000000000..69284fcc46 --- /dev/null +++ b/files/ru/web/svg/attribute/lengthadjust/index.html @@ -0,0 +1,33 @@ +--- +title: lengthAdjust +slug: Web/SVG/Attribute/lengthAdjust +translation_of: Web/SVG/Attribute/lengthAdjust +--- +

Когда  SVG элемент <text> или <tspan> имеет конкретную длину, установленную с помощью атрибута  textLengt, атрибут lengthAdjust контролирует как текст помещается в эту длину (растягивается или сжимается).

+ +

Существует 2 допустимых значения для атрибута lengthAdjust: spacing и spacingAndGlyphs. Используя spacing (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя spacingAndGlyphs весь тестовый элемент растягивается.

+ +

SVG текст с использованием lengthAdjust

+ +

HTML Content

+ +
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
+   <g font-face="sans-serif">
+      <text x="0" y="20" textLength="300" lengthAdjust="spacing">
+         Stretched using spacing only.
+      </text>
+      <text x="0" y="50" textLength="300" lengthAdjust="spacingAndGlyphs">
+         Stretched using spacing and glyphs.
+      </text>
+      <text x="0" y="80" textLength="100" lengthAdjust="spacing">
+         Shrunk using spacing only.
+      </text>
+      <text x="0" y="110" textLength="100" lengthAdjust="spacingAndGlyphs">
+         Shrunk using spacing and glyphs.
+      </text>
+   </g>
+</svg>
+ +

Результат

+ +

{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}

diff --git a/files/ru/web/svg/attribute/letter-spacing/index.html b/files/ru/web/svg/attribute/letter-spacing/index.html new file mode 100644 index 0000000000..4b6adefbc9 --- /dev/null +++ b/files/ru/web/svg/attribute/letter-spacing/index.html @@ -0,0 +1,60 @@ +--- +title: letter-spacing +slug: Web/SVG/Attribute/letter-spacing +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/letter-spacing +--- +

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

+ +

Атрибут letter-spacing контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} .

+ +

Для SVG, если значением атрибута выступает обыкновенное число (например, 128), браузер добавляет это к <length> в текущей системе координат пользователя.

+ +

Если же значением атрибута выступают относительные величины, к примеру .25em или 1%, браузер преобразовывает их в  <length> соответствующее значение в текущей системе координат пользователя.

+ +

В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите {{ cssxref("letter-spacing","CSS letter-spacing") }} для дополнительной информации.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
Значениеnormal | <length> | inherit
Анимируется Да
Нормативный документSVG 1.1 (2nd Edition)
+ +

{{ page("/en/SVG/Content_type","Length") }}

+ +

Элементы

+ +

В следующих элементах можно использовать атрибут letter-spacing

+ + + +

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

+ + + +

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

+ +

Атрибут letter-spacing плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования letter-spacing. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; textNode.getComputedTextLength() возвращает точно такую же длину, letter-spacing установлен или нет, что приводит к грубо неправильным результатам при разнесении букв.

diff --git a/files/ru/web/svg/attribute/lighting-color/index.html b/files/ru/web/svg/attribute/lighting-color/index.html new file mode 100644 index 0000000000..812328afef --- /dev/null +++ b/files/ru/web/svg/attribute/lighting-color/index.html @@ -0,0 +1,50 @@ +--- +title: lighting-color +slug: Web/SVG/Attribute/lighting-color +tags: + - SVG + - SVG атрибуты + - SVG фильтры +translation_of: Web/SVG/Attribute/lighting-color +--- +

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

+ +

Атрибут lighting-color определяет цвет источника света для примитивов фильтров  {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
ЗначениеcurrentColor | <color> | <icccolor> | inherit
Начальное значениеwhite
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Примеры

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут  lighting-color

+ + diff --git a/files/ru/web/svg/attribute/onload/index.html b/files/ru/web/svg/attribute/onload/index.html new file mode 100644 index 0000000000..b6a5d49ea2 --- /dev/null +++ b/files/ru/web/svg/attribute/onload/index.html @@ -0,0 +1,5 @@ +--- +title: onload +slug: Web/SVG/Attribute/onload +--- +

Link not exist

diff --git a/files/ru/web/svg/attribute/overflow/index.html b/files/ru/web/svg/attribute/overflow/index.html new file mode 100644 index 0000000000..46449f0919 --- /dev/null +++ b/files/ru/web/svg/attribute/overflow/index.html @@ -0,0 +1,67 @@ +--- +title: overflow +slug: Web/SVG/Attribute/overflow +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/overflow +--- +

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

+ +

Атрибут overflow имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты:

+ + + +

Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииПрезентационный атрибут
Значениеvisible | hidden | scroll | auto | inherit
АнимируемыйДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Пример

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут overflow

+ + + +

См. также

+ + diff --git a/files/ru/web/svg/attribute/patterncontentunits/index.html b/files/ru/web/svg/attribute/patterncontentunits/index.html new file mode 100644 index 0000000000..a47a9e4480 --- /dev/null +++ b/files/ru/web/svg/attribute/patterncontentunits/index.html @@ -0,0 +1,52 @@ +--- +title: patternContentUnits +slug: Web/SVG/Attribute/patternContentUnits +translation_of: Web/SVG/Attribute/patternContentUnits +--- +

« SVG Attribute reference home

+ +

Атрибут patternContentUnits определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметье, что этот аттрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.

+ +

Если patternContentUnits аттрибут не определен, то его значение предполагается равным userSpaceOnUse.

+ +

Заметье, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах аттрибуты контента . Это означает, что, если вы задаете значение patternContentUnits равным objectBoundingBox, значения, указанные в процентах, будут пересчитаны, как если бы вы задали userSpaceOnUse.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
ValueuserSpaceOnUse | objectBoundingBox
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
+ +
+
userSpaceOnUse
+
Пользовательская система координат {{ SVGElement("pattern") }} element is the coordinate system that results from taking the current user coordinate system in place at the time when the {{ SVGElement("pattern") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("pattern") }} element via a {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute) and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.
+
objectBoundingBox
+
Пользовательская система координат для содержимого {{ SVGElement("pattern") }} элемента is established using the bounding box of the element to which the pattern is applied and then applying the transform specified by attribute {{ SVGAttr("patternTransform") }}.
+
+ +

Примеры

+ +

Элементы

+ +

Атрибут patternContentUnits может быть определен на следующих элементах:

+ + diff --git a/files/ru/web/svg/attribute/r/index.html b/files/ru/web/svg/attribute/r/index.html new file mode 100644 index 0000000000..1f92d75024 --- /dev/null +++ b/files/ru/web/svg/attribute/r/index.html @@ -0,0 +1,129 @@ +--- +title: r +slug: Web/SVG/Attribute/r +translation_of: Web/SVG/Attribute/r +--- +
{{SVGRef}}
+ +
Атрибут r устанавливает значение радиуса круга.
+ +
 
+ +

Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}

+ +
+ + +
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+  <radialGradient r="0" id="myGradient000">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+  <radialGradient r="50%" id="myGradient050">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+  <radialGradient r="100%" id="myGradient100">
+    <stop offset="0"    stop-color="white" />
+    <stop offset="100%" stop-color="black" />
+  </radialGradient>
+
+  <circle cx="50"  cy="50" r="0"/>
+  <circle cx="150" cy="50" r="25"/>
+  <circle cx="250" cy="50" r="50"/>
+
+  <rect x="20"  y="120" width="60" height="60" fill="url(#myGradient000)" />
+  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
+  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
+</svg>
+ +

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

+
+ +

circle

+ +

Для {{SVGElement('circle')}}, r устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован.

+ + + + + + + + + + + + + + + + +
Значение<length>| <percentage>
+

Значение по умолчанию

+ 		0
АнимируемостьДа
+ +

Примечание: Начиная с SVG2, r является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов.

+ +

radialGradient

+ +

Для {{ SVGElement("radialGradient") }}, r устанавливает радиус конечной окружности радиального градиента.

+ +

Градиент будет нарисован таким образом, чтобы  100% конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента  {{ SVGElement("stop") }}.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
Значение по умолчанию50%
АнимируемостьДа
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "geometry.html#R", "r")}}{{Spec2("SVG2")}} +

Определение как свойство геометрии

+ +

 

+
{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}{{Spec2("SVG2")}}Определение для SVG2 серверов рисования <radialGradient>
{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}{{Spec2("SVG1.1")}}Исходное определение для <radialGradient>
{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}{{Spec2("SVG1.1")}}Исходное определение для <circle>
diff --git a/files/ru/web/svg/attribute/repeatcount/index.html b/files/ru/web/svg/attribute/repeatcount/index.html new file mode 100644 index 0000000000..ad584e3305 --- /dev/null +++ b/files/ru/web/svg/attribute/repeatcount/index.html @@ -0,0 +1,47 @@ +--- +title: repeatCount +slug: Web/SVG/Attribute/repeatCount +translation_of: Web/SVG/Attribute/repeatCount +--- +

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

+ +

Данный атрибут задает, сколько раз должна выполняться анимация.

+ +

Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.

+ +

Возможно также определить бесконечную зацикленную анимацию с помощью ключевого слова "indefinite".

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут времени анимации
Значение<number> | "indefinite"
АнимируемыйНет
Ссылка на стандартSVG 1.1 (2nd Edition)
+ +

{{ page("/en/SVG/Content_type","Number") }}

+ +

Пример

+ +

Элементы

+ +

Данные элементы могут использовать атрибут repeatCount

+ + diff --git a/files/ru/web/svg/attribute/rx/index.html b/files/ru/web/svg/attribute/rx/index.html new file mode 100644 index 0000000000..78f0ab86e0 --- /dev/null +++ b/files/ru/web/svg/attribute/rx/index.html @@ -0,0 +1,115 @@ +--- +title: rx +slug: Web/SVG/Attribute/rx +tags: + - SVG атрибуты +translation_of: Web/SVG/Attribute/rx +--- +
{{SVGRef}}
+ +

Атрибут rx определяет радиус круга по оси x.

+ +

Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}

+ +
+ + +
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50"  cy="50" rx="0"  ry="25" />
+  <ellipse cx="150" cy="50" rx="25" ry="25" />
+  <ellipse cx="250" cy="50" rx="50" ry="25" />
+
+  <rect x="20"  y="120" width="60" height="60" rx="0"   ry="15"/>
+  <rect x="120" y="120" width="60" height="60" rx="15"  ry="15"/>
+  <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/>
+</svg>
+ +

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

+
+ +

ellipse

+ +

Для элемента {{SVGElement('ellipse')}} rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
+ +

Примечание. Начиная с SVG2, rx - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

+ +

rect

+ +

Для {{SVGElement('rect')}}, rx определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

+ +

Способ интерпретации значения атрибута rx зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:

+ + + + + + + + + + + + + + + + + + +
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
+ +

Примечание. Начиная с SVG2, rx - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для rect.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "geometry.html#RX", "rx")}}{{Spec2("SVG2")}}Определяется как свойство геометрии
{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}{{Spec2("SVG1.1")}} +

Начальное определение для <ellipse>

+
{{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}{{Spec2("SVG1.1")}}Начальное определение для <rect>
diff --git a/files/ru/web/svg/attribute/ry/index.html b/files/ru/web/svg/attribute/ry/index.html new file mode 100644 index 0000000000..f0b87c7a46 --- /dev/null +++ b/files/ru/web/svg/attribute/ry/index.html @@ -0,0 +1,113 @@ +--- +title: ry +slug: Web/SVG/Attribute/ry +tags: + - SVG атрибуты +translation_of: Web/SVG/Attribute/ry +--- +
{{SVGRef}}
+ +

Атрибут ry определяет радиус круга по оси y.

+ +

Два элемента используют этот атрибут: <ellipse> и <rect>

+ +
+ + +
<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50"  cy="50" ry="0"  rx="25" />
+  <ellipse cx="150" cy="50" ry="25" rx="25" />
+  <ellipse cx="250" cy="50" ry="50" rx="25" />
+
+  <rect x="20"  y="120" width="60" height="60" ry="0"   rx="15"/>
+  <rect x="120" y="120" width="60" height="60" ry="15"  rx="15"/>
+  <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/>
+</svg>
+ +

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

+
+ +

ellipse

+ +

Для элемента {{SVGElement('ellipse')}}, ry определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
+ +

Примечание. Начиная с SVG2, ry - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.

+ +

rect

+ +

Для {{SVGElement('rect')}}, ry определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.

+ +

Способ интерпретации значения атрибута ry зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:

+ + + + + + + + + + + + + + + + + + +
Значение<length> | <percentage> | auto
Значение по умолчаниюauto
АнимируемыйДа
+ +

Примечание. Начиная с SVG2, ry - свойство геометрии(Geometry Property). Это означает, что атрибут также можно использовать как свойство CSS для rect.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName("SVG2", "geometry.html#RY", "ry")}}{{Spec2("SVG2")}}Определяется как свойство геометрии
{{SpecName("SVG1.1", "shapes.html#EllipseElementRYAttribute", "ry")}}{{Spec2("SVG1.1")}}Начальное определение для <ellipse>
{{SpecName("SVG1.1", "shapes.html#RectElementRYAttribute", "ry")}}{{Spec2("SVG1.1")}}Начальное определение для <rect>
diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html new file mode 100644 index 0000000000..d36ed47bef --- /dev/null +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -0,0 +1,79 @@ +--- +title: shape-rendering +slug: Web/SVG/Attribute/shape-rendering +translation_of: Web/SVG/Attribute/shape-rendering +--- +

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

+ +

При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. shape-rendering предоставляет возможность указывать даные рекомендации.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
Значенияauto | optimizeSpeed | crispEdges | geometricPrecision | inherit
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
+ +
+
auto
+
Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, четкие края и геометрическую точность, но геометрической точности уделять более пристальное внимание, чем скорости и четким краями.
+
optimizeSpeed
+
Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб геометрической точности и четким краями. Эту опцию также можно указывать,, чтобы отключить сглаживание фигур.
+
crispEdges
+
Указывает на то, что браузер должен попытаться акцентировать на контрасте чистых краев рисунков, в ущерб скорости рендеринга и геометрической точности. Для достижения наилучшего результата четкости края, браузер может отключить сглаживание для всех линий и кривых или, возможно, только для прямых, близких к вертикальным или горизонтальным. Кроме того, браузер может скорректировать позиции строк и ширину линий для выравнивания краев с пикселями устройства.
+
geometricPrecision
+
Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб скорости и четкими краям.
+
+ +

Пример

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+  version="1.1" width="100" height="100"
+  shape-rendering="optimizeSpeed">
+ + + + + + + + +
+

shape-rendering: geometricPrecision:

+ +

shape-rendering:geometricPrecision

+ 		+

shape-rendering: optimizeSpeed

+ +

shape-rendering:optimizeSpeed

+
+ +

Также можно воспользоваться css shape-rendering:

+ +
<svg xmlns="http://www.w3.org/2000/svg"
+  version="1.1" width="100" height="100"
+  style="shape-rendering:optimizeSpeed;">
+ +

Элементы

+ +

Следующие элементы могут использовать атрибут shape-rendering

+ + diff --git a/files/ru/web/svg/attribute/stop-color/index.html b/files/ru/web/svg/attribute/stop-color/index.html new file mode 100644 index 0000000000..09a0503a48 --- /dev/null +++ b/files/ru/web/svg/attribute/stop-color/index.html @@ -0,0 +1,51 @@ +--- +title: stop-color +slug: Web/SVG/Attribute/stop-color +translation_of: Web/SVG/Attribute/stop-color +--- +

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

+ +

Атрибут stop-color указывает какой цвет использовать при остановке градиента. Значения currentColor и ICC цвета могут быть заданы так же, как в <paint> спецификации для атрибутов   {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}.

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
ЗначениеcurrentColor | <color> | <icccolor> | inherit
Начальное значениеblack
АнимацияДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Примеры

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут stop-color

+ + + +

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

+ + diff --git a/files/ru/web/svg/attribute/stroke-dashoffset/index.html b/files/ru/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..6f9462e40f --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,162 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +
+

Прежняя редакция: « Справочник SVG атрибутов
+ Этот атрибут определяет смещение обводки относительно начального положения.
+ При использовании <percentage>, значение будет вычисляться от текущего viewport.
+ Значение может быть отрицательным.

+
+ +

{{SVGRef}}
+ Атрибут stroke-dashoffset определяет сдвиг массива dash array относительно начального положения.

+ +

Сноска: Атрибут stroke-dashoffset может использоваться как свойство CSS.

+ +

Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}  

+ +
+ + +
<svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Без dash array -->
+  <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
+
+  <!-- Без dash offset -->
+  <line x1="0" y1="3" x2="30" y2="3" stroke="black"
+        stroke-dasharray="3 1" />
+
+  <!--
+  Начало dash array тянет 3 отрезка
+  -->
+  <line x1="0" y1="5" x2="30" y2="5" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="3" />
+
+  <!--
+  Начало dash array толкает 3 отрезка
+  -->
+  <line x1="0" y1="7" x2="30" y2="7" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="-3" />
+
+  <!--
+  Начало dash array тянет 1 отрезок с финишем в том же рендеринге,
+  что и в предыдущем примере
+  -->
+  <line x1="0" y1="9" x2="30" y2="9" stroke="black"
+        stroke-dasharray="3 1"
+        stroke-dashoffset="1" />
+
+  <!--
+  красным выделено   смещение dash array для каждой строки
+  -->
+  <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" />
+</svg>
+
+ +

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

+
+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут оформления
Значение<percentage> | <length> | inherit
Исходное значение0
АнимируемыйДа
СпецификацияSVG 1.1 (2nd Edition)
+ +

Пример

+ +

HTML

+ +
<?xml version="1.0"?>
+<svg width="200" height="230" viewBox="0 0 200 200"
+version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <line  stroke-dasharray="20, 5" x1="10" y1="10" x2="190" y2="10" />
+    <!--
+      Поскольку размер штриха 20 с разрывами 5,
+      добавление смещения dash-offset 20 приводит к тому,
+      что линия начинается с разрыва.
+    -->
+    <line stroke-dashoffset="20" stroke-dasharray="20, 5"
+      x1="10" y1="30" x2="190" y2="30" />
+    <!--
+      Добавление смещения штрихов на 10% приводит к началу линии с разрывом там же,
+      потому что элемент svg имеет ширину области просмотра 200.
+      Меняя размер svg, меняется и значение в пикселях stroke-dashoffset.
+    -->
+    <line stroke-dashoffset="10%" stroke-dasharray="20, 5"
+      x1="10" y1="50" x2="190" y2="50" />
+    <line stroke-dashoffset="10" stroke-dasharray="20, 5"
+      x1="10" y1="70" x2="190" y2="70" />
+
+    <line stroke-dashoffset="100" stroke-dasharray="200"
+      x1="10" y1="90" x2="190" y2="90" />
+    <line stroke-dashoffset="100" stroke-dasharray="100"
+      x1="10" y1="110" x2="190" y2="110" />
+    <!--
+      Без stroke-dasharray - stroke-dashoffset не даст никакого эффекта.
+    -->
+    <line stroke-dashoffset="50" x1="10" y1="130" x2="190" y2="130" />
+    <!--
+      stroke-dashoffset values can be negative and as expected offest
+      in the opposite direction as a positive value.
+      Значения смещения штрихов могут быть отрицательными
+      с направлением, обратным положительному значению.
+    -->
+    <line stroke-dashoffset="-40" stroke-dasharray="80"
+      x1="10" y1="150" x2="190" y2="150" />
+    <line stroke-dasharray="80"
+      x1="10" y1="170" x2="190" y2="170" />
+    <line stroke-dashoffset="-10%" stroke-dasharray="65, 5, 1, 5"
+      x1="10" y1="190" x2="190" y2="190" />
+    <line  stroke-dasharray="65, 5, 1, 5" x1="10" y1="210" x2="190" y2="210" />
+    <style><![CDATA[
+      line{
+        stroke: black;
+        stroke-width: 2;
+        }
+        ]]>
+    </style>
+</svg>
+
+ +

Результат

+ +

{{EmbedLiveSample('Пример', '220', '240')}}

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут stroke-dashoffset

+ + diff --git a/files/ru/web/svg/attribute/stroke-linecap/index.html b/files/ru/web/svg/attribute/stroke-linecap/index.html new file mode 100644 index 0000000000..475dbb5a0b --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-linecap/index.html @@ -0,0 +1,194 @@ +--- +title: stroke-linecap +slug: Web/SVG/Attribute/stroke-linecap +translation_of: Web/SVG/Attribute/stroke-linecap +--- +
{{SVGRef}}
+ +

Атрибут stroke-linecap - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.

+ +

Сноска: В качестве атрибута представления можно использовать stroke-linecap в качестве свойства CSS.

+ +

В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}

+ +
+ + +
<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effect of the (default) "butt" value -->
+  <line x1="1" y1="1" x2="5" y2="1" stroke="black"
+        stroke-linecap="butt" />
+
+  <!-- Effect of the "round" value -->
+  <line x1="1" y1="3" x2="5" y2="3" stroke="black"
+        stroke-linecap="round" />
+
+  <!-- Effect of the "square" value -->
+  <line x1="1" y1="5" x2="5" y2="5" stroke="black"
+        stroke-linecap="square" />
+
+  <!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  -->
+  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
+</svg>
+
+ +

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

+
+ +

Нотации

+ + + + + + + + + + + + + + + + +
Valuebutt | round | square
Default valuebutt
AnimatableYes
+ +

butt

+ +

Значение butt указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.

+ +

Пример

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effect of the "butt" value -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="butt" />
+
+  <!-- Effect of the "butt" value on a zero length path -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="butt" />
+
+
+  <!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

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

+ +

round

+ +

Значение round указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.

+ +

Пример

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effect of the "round" value -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="round" />
+
+  <!-- Effect of the "round" value on a zero length path -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="round" />
+
+
+  <!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

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

+ +

square

+ +

Значение square указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.

+ +

Пример

+ + + +
<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Effect of the "square" value -->
+  <path d="M1,1 h4" stroke="black"
+        stroke-linecap="square" />
+
+  <!-- Effect of the "square" value on a zero length path -->
+  <path d="M3,3 h0" stroke="black"
+        stroke-linecap="square" />
+
+
+  <!--
+  the following pink lines highlight the
+  position of the path for each stroke
+  -->
+  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
+  <circle cx="1" cy="1" r="0.05" fill="pink" />
+  <circle cx="5" cy="1" r="0.05" fill="pink" />
+  <circle cx="3" cy="3" r="0.05" fill="pink" />
+</svg>
+
+ +

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

+ +

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

+ + + +

{{Compat("svg.attributes.presentation.stroke-linecap")}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG2")}}Definition for shapes and texts
{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}{{Spec2("SVG1.1")}}Initial definition for shapes and texts
diff --git a/files/ru/web/svg/attribute/stroke-width/index.html b/files/ru/web/svg/attribute/stroke-width/index.html new file mode 100644 index 0000000000..0359c2a1a2 --- /dev/null +++ b/files/ru/web/svg/attribute/stroke-width/index.html @@ -0,0 +1,57 @@ +--- +title: stroke-width +slug: Web/SVG/Attribute/stroke-width +translation_of: Web/SVG/Attribute/stroke-width +--- +

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

+ +

Атрибут stroke-width указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется <percentage>, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.
+
+ В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS

+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
Значения<length> | <percentage> | inherit
АнимируемыйДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Example

+ +

SVG

+ +
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100" />
+</svg>
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="100" cy="100" r="100" stroke="#ff0" stroke-width="10" />
+</svg>
+ +

Результат

+ +

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

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут stroke-width.

+ + diff --git a/files/ru/web/svg/attribute/stroke/index.html b/files/ru/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..d6ddd0420a --- /dev/null +++ b/files/ru/web/svg/attribute/stroke/index.html @@ -0,0 +1,69 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/stroke +--- +

« SVG Attribute reference home

+ +

Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — None.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияPresentation attribute
Значения +

<paint>, context-fill, context-stroke

+
АнимируемыйДа
Нормативный документSVG 1.1 (2nd Edition)
+ +

Примеры

+ +

SVG Line с stroke

+ +

Пример 1: Нарисуйте прямую зеленую линию, используя stroke.

+ +
<svg height="50" width="300">
+    <path stroke="green" d="M5 20 1215 0" />
+</svg>
+ +

{{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}

+ +

Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.

+ +
​​<svg height="100" width="100">
+    <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" />
+</svg>
+ +

{{EmbedLiveSample('Example2_Draw_black_circle_with_blue_border_using_stroke.', '100', '120', '', 'Web/SVG/Attribute/stroke')}}

+ +

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

+ +

Информацию об использовании значения нестандартного и ограниченного context-stroke (и context-fill) смотреть в документации для свойства {{cssxref("-moz-context-properties")}}.

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут stroke.

+ + diff --git a/files/ru/web/svg/attribute/text-anchor/index.html b/files/ru/web/svg/attribute/text-anchor/index.html new file mode 100644 index 0000000000..4a034cfde2 --- /dev/null +++ b/files/ru/web/svg/attribute/text-anchor/index.html @@ -0,0 +1,107 @@ +--- +title: text-anchor +slug: Web/SVG/Attribute/text-anchor +translation_of: Web/SVG/Attribute/text-anchor +--- +

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

+ +

Атрибут text-anchor используется для выравнивания
+ (start-, middle- или end-выравнивание) текстовой строки относительно заданной точки.

+ +

Атрибут text-anchor применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }}  атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента. 

+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорияАтрибут представления
Значениеstart | middle | end | inherit
АнимацияДа
ДокументSVG 1.1 (2nd Edition)
+ +
+
start
+
+

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

+
+
middle
+
+

Отрисованные символы  выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка
+ между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой
+ позиции.)

+
+
end
+
Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно
+ правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.
+
Примечание
+
В IE-11 атрибут text-anchor не имеет эффекта при привязке текста к заданному пути path посредством тега textPath.
+ В приведенном ниже примере тег path использовался только лишь для отрисовки линий и с расположением текста никак не связан.
+
+ +

Пример

+ +
<html>
+<head>
+    <meta charset="utf-8">
+    <title>текст в якорях</title>
+</head>
+<body>
+<div style="background-color:burlywood; width:866px;height:444px;display:flex;">
+    <div style="background-color:greenyellow; width:333px;height:333px;margin:22px;overflow: visible;">
+        <svg viewBox="-50 0 100 100" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" version="1.1">
+            <!-- Материализация якорей -->
+            <path d="M50, 5 L50,95
+             M20,20 L80,20
+             M20,50 L80,50
+             M20,80 L80,80" stroke="grey"/>
+
+            <!-- Якоря в действии -->
+            <text text-anchor="start"   x="50" y="20">some start</text>
+            <text text-anchor="start"   x="50" y="35">start</text>
+
+            <text text-anchor="middle"  x="50" y="55">some middle</text>
+            <text text-anchor="middle"  x="50" y="70">middle</text>
+
+            <text text-anchor="end"     x="50" y="85">some end</text>
+            <text text-anchor="end"     x="50" y="100">end</text>
+        </svg>
+    </div>
+</div>
+</body>
+</html>
+ +

Песочницы

+ +

{{ EmbedLiveSample('Пример','400','400') }}

+ + + +

Элементы

+ +

Следующие элементы могут использовать  text-anchor атрибут

+ + + +

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

+ + + +

{{Compat("svg.attributes.presentation.text-anchor")}}

diff --git a/files/ru/web/svg/attribute/text-rendering/index.html b/files/ru/web/svg/attribute/text-rendering/index.html new file mode 100644 index 0000000000..11c0bdb8cf --- /dev/null +++ b/files/ru/web/svg/attribute/text-rendering/index.html @@ -0,0 +1,87 @@ +--- +title: text-rendering +slug: Web/SVG/Attribute/text-rendering +translation_of: Web/SVG/Attribute/text-rendering +--- +

« SVG Attribute reference home

+

При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. text-rendering предоставляет возможность указывать даные рекомендации.

+

Помимо presentation attribute, настройки ренедеринга шрифтов можно задавть через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.

+

Usage context

+ + + + + + + + + + + + + + + + + + + +
КатегорияPresentation attribute
Значениеauto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
+
+
+ auto
+
+ Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.
+
+ optimizeSpeed
+
+ Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.
+
+ optimizeLegibility
+
+ Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.
+
+ geometricPrecision
+
+ Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.
+
+

Пример

+
<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+   version="1.1" width="660" height="40"
+   text-rendering="optimizeLegibility">
+  <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
+  <style>
+      text {font: 30px 'Sofadi One', cursive;}
+  </style>
+  <g>
+    <text y="30">The quick brown fox jumps over the lazy dog.</text>
+  </g>
+</svg>
+

optimizeLegibility (первая) и geometricPrecision (вторая)
+ text-rendering=optimizeLegibility
+ text-rendering=geometricPrecision

+

Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}

+
<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+   version="1.1" width="660" height="40">
+  <link xmlns="http://www.w3.org/1999/xhtml" href='http://fonts.googleapis.com/css?family=Sofadi+One' rel='stylesheet' type='text/css' />
+  <style>
+      text {
+            font: 30px 'Sofadi One', cursive;
+            text-rendering:optimizeLegibility;
+         }
+  </style>
+  <g>
+    <text y="30">The quick brown fox jumps over the lazy dog.</text>
+  </g>
+</svg>
+

Elements

+

The following elements can use the text-rendering attribute

+ +

See also

+ diff --git a/files/ru/web/svg/attribute/transform/index.html b/files/ru/web/svg/attribute/transform/index.html new file mode 100644 index 0000000000..c202361239 --- /dev/null +++ b/files/ru/web/svg/attribute/transform/index.html @@ -0,0 +1,121 @@ +--- +title: transform +slug: Web/SVG/Attribute/transform +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/transform +--- +

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

+ +

В атрибуте transform перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииНет
Значение<transform-list>
АнимацияДа
Нормативная базаSVG 1.1 (2nd Edition)
+ +

Типы преобразований

+ +
+
matrix(<a> <b> <c> <d> <e> <f>)
+
Преобразование с использованием матрицы из шести элементов. Преобразование matrix(a,b,c,d,e,f) равнозначно применению матрицы (acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}, которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: (xпред.yпред.1)=(acebdf001)(xнов.yнов.1)=(axнов.+cyнов.+ebxнов.+dyнов.+f1) \begin{pmatrix} x_{\mathrm{пред.}} \\ y_{\mathrm{пред.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{нов.}} \\ y_{\mathrm{нов.}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{нов.}} + c y_{\mathrm{нов.}} + e \\ b x_{\mathrm{нов.}} + d y_{\mathrm{нов.}} + f \\ 1 \end{pmatrix}
+
translate(<x> [<y>])
+
Перенос по осям x и y. Равнозначно matrix(1 0 0 1 x y). Если значение y опущено, оно принимается равным нулю.
+
scale(<x> [<y>])
+
Масштабирование по осям x и y. Равнозначно matrix(x 0 0 y 0 0). Если значение y опущено, оно принимается равным x.
+
rotate(<a> [<x> <y>])
+
Поворот на a градусов вокруг указанной точки. Если необязательные параметры x и y опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице (cosa-sina0sinacosa0001)\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix} Если необязательные параметры x и y присутствуют, поворот будет осуществляться вокруг точки (x, y). Операция равнозначна следующему списку преобразований: translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>).
+
skewX(<a>)
+
Наклон относительно оси x на a градусов. Операция соответствует матрице (1tga0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
skewY(<a>)
+
Наклон относительно оси y на a градусов. Операция соответствует матрице (100tga10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
+
+ +

Примеры

+ +

Поворот и перенос SVG-элемента

+ +

В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут transform. Первоначальный элемент до преобразования показан полупрозрачным.

+ +

CSS (необязательный):

+ +
text {
+  font: 1em sans-serif;
+}
+ +

SVG:

+ +
<svg width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Это элемент до применения переноса и поворота -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>
+
+  <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
+  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
+
+</svg>
+
+ +

{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}

+ +

Общее преобразование

+ +

Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования matrix(1,2,3,4,5,6) и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.

+ +
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
+
+  <g transform="matrix(1,2,3,4,5,6)">
+    <!-- Новая система координат (жирная синяя линия)
+         x1 = 10 | x2 = 30
+         y1 = 20 | y2 = 40
+      -->
+    <line x1="10" y1="20" x2="30" y2="40" style="stroke-width: 10px; stroke: blue;"/>
+  </g>
+
+  <!-- Предыдущая система координат (тонкая белая линия)
+       x1 = 1 * 10 + 3 * 20 + 5 = 75  | x2 = 1 * 30 + 3 * 40 + 5 = 155
+       y1 = 2 * 10 + 4 * 20 + 6 = 106 | y2 = 2 * 30 + 4 * 40 + 6 = 226
+    -->
+  <line x1="75" y1="106" x2="155" y2="226" style="stroke-width: 1px; stroke: white;"/>
+
+</svg>
+
+ +

{{ EmbedLiveSample('General_Transformation','200px','250px') }}

+ +

Элементы

+ +

Следующие элементы могут использовать атрибут transform:

+ + diff --git a/files/ru/web/svg/attribute/values/index.html b/files/ru/web/svg/attribute/values/index.html new file mode 100644 index 0000000000..72929084aa --- /dev/null +++ b/files/ru/web/svg/attribute/values/index.html @@ -0,0 +1,86 @@ +--- +title: values +slug: Web/SVG/Attribute/values +translation_of: Web/SVG/Attribute/values +--- +

« SVG Attribute reference home

+ +

Атрибут values имеет два значения в зависимости от используемого контекста.

+ +

Для элементов анимации атрибут values представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список values, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.

+ +

Для элемента {{ SVGElement("feColorMatrix") }} содержимое values зависит от значения атрибута {{ SVGAttr("type") }}:

+ + + +

Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута {{SVGAttr("type")}}.

+ + + +

Usage context

+ +

For animation elements

+ + + + + + + + + + + + + + + + + + + + +
CategoriesAnimation value attribute
Value<list>
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
+ +

For the {{ SVGElement("feColorMatrix") }} element

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
Value<list> | <number>
AnimatableYes
Normative documentSVG 1.1 (2nd Edition)
+ +

Example

+ +

Elements

+ +

The following elements can use the values attribute

+ + diff --git a/files/ru/web/svg/attribute/viewbox/index.html b/files/ru/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..ed94188d1f --- /dev/null +++ b/files/ru/web/svg/attribute/viewbox/index.html @@ -0,0 +1,191 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +tags: + - SVG +translation_of: Web/SVG/Attribute/viewBox +--- +

« SVG Attribute reference home

+ +

Аттрибут viewBox определяет расположение и размеры окна отображения SVG.

+ +

Значение атрибута viewBox — это набор четырех чисел: min-x, min-y, width и height, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не браузера).

+ + + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!--
+  С относительными единицами, такими как проценты,
+  размер квадрата не меняется в зависимости от
+  значения viewBox
+  -->
+  <rect x="0" y="0" width="100%" height="100%"/>
+
+  <!--
+  При больших значениях viewBox круг получается
+  маленьким, потому что его радиус указан в абсолютных
+  единицах: расстояние 4 получается маленьким относительно
+  размера окна 100, указанного во viewBox
+  -->
+  <circle cx="50%" cy="50%" r="4" fill="white"/>
+</svg>
+
+<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <!-- Также не зависит от viewBox, как и в предыдущем примере -->
+  <rect x="0" y="0" width="100%" height="100%"/>
+
+  <!--
+  С маленьким значением размера viewBox круг получается
+  большим, потому что радиус 4 намного больше, если размер
+  области отображения равен 10, чем если он равен 100
+  -->
+  <circle cx="50%" cy="50%" r="4" fill="white"/>
+</svg>
+
+<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+  <!--
+  Точка с координатами (0, 0) теперь является центром области
+  отображения. 100% всё ещё приравнивается к полному размеру
+  области отображения (10 на 10), поэтому квадрат выглядит
+  сдвинутым в правый нижний угол
+  -->
+  <rect x="0" y="0" width="100%" height="100%"/>
+
+  <!--
+  Так как точка (0, 0) находится в центре, а координаты круга,
+  равные 50%, относительно размера области отображения (10 на 10)
+  принимаются равными 5, круг оказывается с центром
+  в правом нижнем углу
+  -->
+  <circle cx="50%" cy="50%" r="4" fill="white"/>
+</svg>
+ +

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

+ +

На отображение с viewBox также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.

+ +
+

Обратите внимание: при значениях width и height меньших или равных 0 элемент не отображается

+
+ +


+ Пять элементов используют этот атрибут: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }} и {{ SVGElement("view") }}.

+ +

marker

+ +

Для элемента {{SVGElement('marker')}}, viewBox определяет расположение и размеры содержимого элемента <marker>.

+ + + + + + + + + + + + + + + + +
Значение<number>?, <number>?, <number>?, <number>
Значение по умолчаниюнет
АнимируемоеДа
+ +

pattern

+ +

Для элемента {{SVGElement('pattern')}}, viewBox определеяет расположение и размеры содержимого шаблона.

+ + + + + + + + + + + + + + + + +
Значение<number>?, <number>?, <number>?, <number>
Значение по умолчаниюнет
АнимируемоеДа
+ +

svg

+ +

Для элемента {{SVGElement('svg')}}, viewBox определяет расположение и размеры содержимого элемента <svg>.

+ + + + + + + + + + + + + + + + +
Значение<number>?, <number>?, <number>?, <number>
Значение по умолчаниюнет
АнимируемоеДа
+ +

symbol

+ +

Для элемента {{SVGElement('symbol')}}, viewBox определяет расположение и размеры содержимого элемента <symbol>.

+ + + + + + + + + + + + + + + + +
Значение<number>?, <number>?, <number>?, <number>
Значение по умолчаниюнет
АнимируемоеДа
+ +

view

+ +

Для элемента {{SVGElement('view')}}, viewBox определяет расположение и размеры содержимого элемента <view>.

+ + + + + + + + + + + + + + + + +
Значение<number>?, <number>?, <number>?, <number>
Значение по умолчаниюнет
АнимируемоеДа
+ +

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

+ + diff --git a/files/ru/web/svg/attribute/width/index.html b/files/ru/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..30e0e0df21 --- /dev/null +++ b/files/ru/web/svg/attribute/width/index.html @@ -0,0 +1,648 @@ +--- +title: Ширина +slug: Web/SVG/Attribute/width +tags: + - ширина +translation_of: Web/SVG/Attribute/width +--- +
{{SVGRef}}
+ +

Атрибут width определяет горизонтальный размер элементов в пользовательской системе координат.

+ +

Двадцать пять элементов используют эти атрибуты: {{SVGElement('feBlend')}}, {{SVGElement('feColorMatrix')}}, {{SVGElement('feComponentTransfer')}}, {{SVGElement('feComposite')}}, {{SVGElement('feConvolveMatrix')}}, {{SVGElement('feDiffuseLighting')}}, {{SVGElement('feDisplacementMap')}}, {{SVGElement('feDropShadow')}}, {{SVGElement('feFlood')}}, {{SVGElement('feGaussianBlur')}}, {{SVGElement('feImage')}}, {{SVGElement('feMerge')}}, {{SVGElement('feMorphology')}}, {{SVGElement('feOffset')}}, {{SVGElement('feSpecularLighting')}}, {{SVGElement('feTile')}}, {{SVGElement('feTurbulence')}}, {{SVGElement('filter')}}, {{SVGElement('foreignObject')}}, {{SVGElement('image')}}, {{SVGElement('mask')}}, {{SVGElement('pattern')}}, {{SVGElement('rect')}}, {{SVGElement('svg')}}, and {{SVGElement('use')}}

+ +
+ + +
<svg viewBox="0 0 100 300" xmlns="http://www.w3.org/2000/svg">
+  <!-- С шириной равной 0 или меньше, ничего не будет отображаться -->
+  <rect x="0" y="0" width="0" height="90"/>
+  <rect x="0" y="100" width="60" height="90"/>
+  <rect x="0" y="200" width="100%" height="90"/>
+</svg>
+ +

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

+
+ +

feBlend

+ +

Для {{SVGElement('feBlend')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feColorMatrix

+ +

Для {{SVGElement('feColorMatrix')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feComponentTransfer

+ +

Для {{SVGElement('feComponentTransfer')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feComposite

+ +

Для {{SVGElement('feComposite')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feConvolveMatrix

+ +

Для {{SVGElement('feConvolveMatrix')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feDiffuseLighting

+ +

Для {{SVGElement('feDiffuseLighting')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feDisplacementMap

+ +

Для {{SVGElement('feDisplacementMap')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feDropShadow

+ +

Для {{SVGElement('feDropShadow')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feFlood

+ +

Для {{SVGElement('feFlood')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feGaussianBlur

+ +

Для {{SVGElement('feGaussianBlur')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feImage

+ +

Для {{SVGElement('feImage')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feMerge

+ +

Для {{SVGElement('feMerge')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feMorphology

+ +

Для {{SVGElement('feMorphology')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feOffset

+ +

Для {{SVGElement('feOffset')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feSpecularLighting

+ +

Для {{SVGElement('feSpecularLighting')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feTile

+ +

Для {{SVGElement('feTile')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

feTurbulence

+ +

Для {{SVGElement('feTurbulence')}}, width определяет горизонтальный размер для отображения области примитивов.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию100%
AnimatableДа
+ +

filter

+ +

Для {{SVGElement('filter')}}, width определяет горизонтальный размер для отображения области фильтров.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию120%
AnimatableДа
+ +

foreignObject

+ +

Для {{SVGElement('foreignObject')}}, width определяет горизонтальный размер для отображения области ссылочных документов.

+ + + + + + + + + + + + + + + + +
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 0)
AnimatableДа
+ +

Примечание: Начиная с  SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для <foreignObject>.

+ +

image

+ +

Для {{SVGElement('image')}}, width определяет горизонтальный размер для изображения.

+ + + + + + + + + + + + + + + + +
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как ширина изображения)
AnimatableДа
+ +

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

+ +

mask

+ +

Для {{SVGElement('mask')}}, width определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута {{SVGAttr('maskUnits')}}.

+ + + + + + + + + + + + + + + + +
Значение<length> | <percentage>
По умолчанию120%
AnimatableДа
+ +

pattern

+ +

Для {{SVGElement('pattern')}}, width определяет горизонтальный размер мастящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.

+ + + + + + + + + + + + + + + + +
Значание<length>
По умолчанию0
AnimatableДа
+ +

rect

+ +

Для {{SVGElement('rect')}}, width определяет горизонтальный размер прямоугольника.

+ + + + + + + + + + + + + + + + +
Значениеauto | <length> | <percentage>
По умолчаниюauto (пассматривается как 0)
AnimatableДа
+ +

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

+ +

svg

+ +

Для {{SVGElement('svg')}}, width определяет горизонтальный размер отображаемой области вьюпорта SVG.

+ +

Примечание: В HTML документе, если оба атрибута {{SVGAttr('viewBox')}} и width опущены, svg-элемент будет отображаться с шириной 300px

+ + + + + + + + + + + + + + + + +
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 100%)
AnimatableДа
+ +

Примечание: Начиная с  SVG2, width это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство   CSS для <svg>.

+ +

use

+ +

Для {{SVGElement('use')}}, width определяет горизонтальный размер для ссылочного элемента.

+ + + + + + + + + + + + + + + + +
Значениеauto | <length> | <percentage>
По умолчаниюauto (рассматривается как 0)
AnimatableДа
+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментаий
{{ SpecName('Filters 1.0', '#element-attrdef-filter-width', 'width') }}{{Spec2('Filters 1.0')}}Определение для <filter>
{{ SpecName('Filters 1.0', '#element-attrdef-filter-primitive-width', 'width') }}{{Spec2('Filters 1.0')}}Определение для фильтр-примитивов
{{SpecName("CSS Masks", "#element-attrdef-mask-width", 'width')}}{{Spec2("CSS Masks")}}Определение для <mask>
{{SpecName("SVG2", "geometry.html#Sizing", "width")}}{{Spec2("SVG2")}}Определено как геометрическое свойство
{{SpecName("SVG2", "pservers.html#PatternElementWidthAttribute", "width")}}{{Spec2("SVG2")}}Определение для <pattern>
{{SpecName("SVG1.1", "extend.html#ForeignObjectElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <foreignObject>
{{SpecName("SVG1.1", "pservers.html#PatternElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <pattern>
{{SpecName("SVG1.1", "struct.html#ImageElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <image>
{{SpecName("SVG1.1", "struct.html#SVGElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <svg>
{{SpecName("SVG1.1", "struct.html#UseElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <use>
{{SpecName("SVG1.1", "filters.html#FilterElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <filter>
{{SpecName("SVG1.1", "filters.html#FilterPrimitiveWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для  фильтр-примитивов
{{SpecName("SVG1.1", "masking.html#MaskElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <mask>
{{SpecName("SVG1.1", "shapes.html#RectElementWidthAttribute", "width")}}{{Spec2("SVG1.1")}}Первое определение для <rect>
diff --git a/files/ru/web/svg/attribute/x/index.html b/files/ru/web/svg/attribute/x/index.html new file mode 100644 index 0000000000..d5b6a83a6a --- /dev/null +++ b/files/ru/web/svg/attribute/x/index.html @@ -0,0 +1,86 @@ +--- +title: x +slug: Web/SVG/Attribute/x +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/x +--- +

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

+ +

Этот атрибут указывает координату оси x в контексте системы координат. Точный эффект этого атрибута зависит от каждого элемента. В основном атрибут работает по оси x от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). Его синтаксис такой же, как и для <length>.

+ +

Если атрибут x явно не указан, то эффект будет таким, как если бы значение атрибута равнялось бы 0, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равно -10%.

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииNone
Значение<coordinate>
АнимируемыйДа
Нормативные документы (en)SVG 1.1 (2nd Edition): altGlyph element
+ SVG 1.1 (2nd Edition): cursor element
+ SVG 1.1 (2nd Edition): fePointLight element
+ SVG 1.1 (2nd Edition): feSpotLight element
+ SVG 1.1 (2nd Edition): filter element
+ SVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): glyphRef element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): text element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ SVG 1.1 (2nd Edition): tspan element
+ +

{{page("/ru/SVG/Content_type","coordinate")}}

+ +

Пример

+ +
<?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>
+ +

Элементы

+ +

Следующие элементы могут использовать атрибут x.

+ + diff --git a/files/ru/web/svg/attribute/xml_colon_space/index.html b/files/ru/web/svg/attribute/xml_colon_space/index.html new file mode 100644 index 0000000000..0b921d2e5a --- /dev/null +++ b/files/ru/web/svg/attribute/xml_colon_space/index.html @@ -0,0 +1,50 @@ +--- +title: 'xml:space' +slug: 'Web/SVG/Attribute/xml:space' +translation_of: 'Web/SVG/Attribute/xml:space' +--- +
{{deprecated_header("SVG2")}}
+ +

« SVG Attribute reference home

+ +

SVG supports the standard XML attribute xml:space to specify the handling of white space characters within a given {{ SVGElement("text") }} element's character data. Note that any child element of a {{ SVGElement("text") }} element may also have an xml:space attribute which will apply to that child element's text content. Note that this attribute influences the way a browser should parse the xml content and therefore will change the way the DOM is built. It means that any change made to the value of this attribute through the DOM API may have no effect.

+ +
+

Note: Instead of using the xml:space attribute you should use the {{cssxref("white-space")}} CSS property.

+
+ +

Usage context

+ + + + + + + + + + + + + + + + + + + + +
CategoriesNone
Valuedefault | preserve
AnimatableNo
Normative documentSVG 1.1 (2nd Edition)
+ +
+
default
+
Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены.
+
preserve
+
Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с xml:space="preserve", строка "a   b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b").
+
+ +

Examples

+ +

Elements

+ +

All the SVG elements can use the xml:space attribute

diff --git a/files/ru/web/svg/attribute/y/index.html b/files/ru/web/svg/attribute/y/index.html new file mode 100644 index 0000000000..d73d5f2ab5 --- /dev/null +++ b/files/ru/web/svg/attribute/y/index.html @@ -0,0 +1,86 @@ +--- +title: 'y' +slug: Web/SVG/Attribute/y +tags: + - SVG + - SVG атрибуты +translation_of: Web/SVG/Attribute/y +--- +

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

+ +

Атрибут y указывает координаты вертикальной оси системы координат в контексте объекта. В основном атрибут работает по оси y от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента).

+ +

Если атрибут явно не указан, его значение по умолчанию равняется 0, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равняется -10% .

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
КатегорииNone
Значение<coordinate>
АнимацияВозможно
Нормативные документы (en)SVG 1.1 (2nd Edition): altGlyph element
+ SVG 1.1 (2nd Edition): cursor element
+ SVG 1.1 (2nd Edition): fePointLight element
+ SVG 1.1 (2nd Edition): feSpotLight element
+ SVG 1.1 (2nd Edition): filter element
+ SVG 1.1 (2nd Edition): foreignObject element
+ SVG 1.1 (2nd Edition): glyphRef element
+ SVG 1.1 (2nd Edition): image element
+ SVG 1.1 (2nd Edition): pattern element
+ SVG 1.1 (2nd Edition): rect element
+ SVG 1.1 (2nd Edition): svg element
+ SVG 1.1 (2nd Edition): text element
+ SVG 1.1 (2nd Edition): use element
+ SVG 1.1 (2nd Edition): Filter primitive
+ SVG 1.1 (2nd Edition): mask element
+ SVG 1.1 (2nd Edition): tspan element
+ +

{{page("/ru/SVG/Content_type","coordinate")}}

+ +

Пример

+ +
<?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>
+ +

Элементы

+ +

Следующие элементы могут использовать атрибут y.

+ + -- cgit v1.2.3-54-g00ecf