diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/web/svg/attribute | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/web/svg/attribute')
43 files changed, 5228 insertions, 0 deletions
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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут определяет, является ли анимация аддитивной.</p> + +<p>Часто бывает полезно определить анимацию как смещение или Дельта для значения атрибута, а не как абсолютные значения. Этот атрибут указывает на анимацию, если их значения добавляются к исходному значению анимированного атрибута.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Атрибут добавления анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">replace</strong> | sum</td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes" title="http://www.w3.org/TR/SVG/animate.html#AdditionAttributes">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>sum</dt> + <dd>Указывает, что анимация добавляется к базовому значению атрибута и других анимаций с меньшим приоритетом.</dd> + <dt>replace</dt> + <dd>Указывает, что анимация переопределит базовое значение атрибута и другие анимации с меньшим приоритетом. Это значение по умолчанию, однако на поведение также влияют атрибуты значений анимации {{ SVGAttr("by") }} и {{ SVGAttr("to") }}, как описано в <a class="external" href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#FromToByAndAdditive">SMIL Animation: How from, to and by attributes affect additive behavior</a>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>additive</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <code><strong>attributeName</strong></code> задаёт имя свойства CSS или атрибута целевого элемента, которое будет изменено во время анимации.</p> + +<p>Четыре элемента используют данный артибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateTransform")}} и {{SVGElement("set")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample("topExample", "400", "250")}}</p> +</div> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code><name></code></td> + </tr> + <tr> + <th scope="row">Значение по-умолчанию</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><name></code></dt> + <dd>Это значение задаёт имя свойства CSS или атрибута целевого элемента, которое будет анимировано.</dd> +</dl> + +<h2 id="Спецификиции">Спецификиции</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#AttributeNameAttribute", "attributeName")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AttributeNameAttribute", "attributeName")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute">SMIL Animation specification</a></li> +</ul> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут задает пространство имен, в котором определяются конечный атрибут и связанные с ним значения.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Целевые атрибуты анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>CSS | XML | <strong title="this is the default value">auto</strong></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute" title="http://www.w3.org/TR/SVG/animate.html#AttributeTypeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>Этот атрибут может принимать одно из следующих значений:</p> + +<dl> + <dt>CSS</dt> + <dd>Указывает на то, что значение параметра {{ SVGAttr("attributeName") }} является именем свойства CSS, определяемого как анимация.</dd> + <dt> </dt> + <dt>XML</dt> + <dd>Указывает, что значение параметра{{ SVGAttr("attributeName") }} является именем атрибута XML, определяемого как анимация в пространстве имен XML по умолчанию для целевого элемента.</dd> + <dt>auto</dt> + <dd>Реализация должна соответствовать {{ SVGAttr("attributeName") }} атрибуту целевого элемента. Агенты пользователя сначала посмотрят список свойств CSS для соответствующего имени свойства, а если нет, выполните поиск в пространстве имен XML по умолчанию для элемента.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут быть использованы с атрибутом <code>attributeType</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> + <li>{{ SVGElement("set") }}</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Домашняя страница справочника по SVG аттрибутам</a></p> + +<p>Присвоение класса или набора классов элементу. Вы можете присовить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".</p> + +<p>Класс элемента имеет 2 ключевые роли:</p> + +<ul> + <li>Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.</li> + <li>Для общих целей Броузера.</li> +</ul> + +<p>Класс может быть использован для стилизации SVG содержимого используя CSS.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts"><list-of-class-names></a></td> + </tr> + <tr> + <th scope="row">Возможна анимация</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><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></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>В следующих элементах допустимо использовать аттрибут <code>class</code></p> + +<p>:{{ SVGElement("a") }}</p> + +<div class="threecolumns"> +<ul> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("desc") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("linearGradient") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("path") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("textPath") }}</li> + <li>{{ SVGElement("title") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("use") }}</li> +</ul> +</div> + +<h2 id="Совместимость_с_броузерами">Совместимость с броузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Animation support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("5") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> 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 +--- +<p>Основные атрибуты SVG — это все общие атрибуты, которые могут быть указаны в SVG элементах.</p> + +<div class="index"> +<ul> + <li><a href="#"><code>id</code></a></li> + <li><a href="#attr-lang"><code>lang</code></a></li> + <li><a href="#attr-tabindex"><code>tabindex</code></a></li> + <li><a href="#attr-xml:base"><code>xml:base</code></a></li> + <li><a href="#attr-xml:lang"><code>xml:lang</code></a></li> + <li><a href="#attr-xml:space"><code>xml:space</code></a></li> +</ul> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-id">{{SVGAttr('id')}}</dt> + <dd>Определяет идентификатор (ID), который должен быть уникальным во всем документе. Его цель — идентификация элемента при связывании (с использованием фрагмента идентификатора), написании скрипта или стилизации (с помощью CSS).<br> + <small><em>Значение</em>: Любое строковое значение ID; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> + <dt id="attr-lang">{{SVGAttr('lang')}}</dt> + <dd> + <p>Участвует в определении языка элемента, языка, на котором написаны нередактируемые элементы, или языка, на котором должны быть написаны редактируемые элементы. Тэг содержит одно единственное значение записи в формате, определенном в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">документе IETF "Tags for Identifying Languages (BCP47)"</a>.</p> + + <div class="note"> + <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> + </div> + + <p><small><em>Значение</em>: Любой валидный язык ID; <em>Анимируемый</em>: <strong>Нет</strong></small></p> + </dd> + <dt id="attr-tabindex">{{SVGAttr('tabindex')}}</dt> + <dd>Атрибут SVG <code>tabindex</code> позволяет контролировать, является ли элемент фокусируемым, и определять относительный порядок элемента для целей последовательной навигации фокуса.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Integer"><integer></a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> + <dt id="attr-xml:base">{{SVGAttr('xml:base')}}</dt> + <dd>Указывает базовый IRI, отличный от базового IRI текущего документа.<br> + <small><em>Тип</em>: <a href="/docs/Web/SVG/Content_type#IRI"><IRI></a>; <em>Анимируемый</em>: <strong>Нет</strong></small></dd> + <dt id="attr-xml:lang">{{SVGAttr('xml:lang')}}</dt> + <dd> + <p>Это универсальный атрибут, разрешенный во всех XML диалектах для разметки естественного человеческого языка, который содержит элемент. Он почти идентичен по использованию атрибута <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> в HTML, но в соответствии с документацией XML 1.0, данный атрибут не позволяет использовать нулевое (<code>null</code>) значение атрибута (<code>xml:lang=""</code>) для указания неизвестного языка. Вместо этого, используйте <code>xml:lang="und"</code>.</p> + + <div class="note"> + <p>SVG2 предоставляет новые <code>lang</code> атрибуты. Если атрибуты <code>lang</code> и <code>xml:lang</code> используются вместе, то <code>xml:lang</code> имеет приоритет над <code>lang</code>.</p> + </div> + + <p><small><em>Значение</em>: Любой валидный язык ID; <em>Анимируемый</em>: <strong>Нет</strong></small></p> + </dd> + <dt id="attr-xml:space">{{SVGAttr('xml:space')}} {{deprecated_inline('svg2')}}</dt> + <dd> + <p>SVG поддерживает стандартный XML-атрибут <code>xml:space</code> для указания обработки символов пробела в пределах заданных {{ SVGElement("text") }} символов текущего элемента.</p> + + <div class="note"> + <p><strong>Примечание:</strong> Вместо атрибута <code>xml:space</code> следует использовать CSS свойство {{cssxref('white-space')}}.</p> + </div> + + <p><small><em>Значение</em>: <code><strong>default</strong></code> | <code>preserve</code>; <em>Анимируемый</em>: <strong>Нет</strong></small></p> + </dd> +</dl> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("svg.attributes.core")}}</p> + +<div id="gtx-anchor" style="position: absolute; left: 249.15px; top: 1694.6px; width: 92.1875px; height: 15.2001px;"></div> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-content-id" id="bubble-32"> +<div id="gtx-host" style="max-width: 400px;"></div> +</div> + +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 26.5px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси x. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p> + +<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату x набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute">SVG 1.1 (2nd Edition): The circle element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"> <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> +</pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>cx</code></p> + +<ul> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Для элементов {{ SVGElement("circle") }} и {{ SVGElement("ellipse") }} этот атрибут определяет координату центра элемента по оси y. Если атрибут не определён, то эффект такой, как если бы было указано значение "0".</p> + +<p>Для элемента {{ SVGElement("radialGradient") }} этот атрибут определяет координату y набольшого(т.е. внешнего) круга в радиальном градиенте. Градиент будет нарисован так, чтобы значение градиента <strong>100%</strong> соответствовало периметру этого наибольшего(внешнего) круга. Если атрибут не определён, то эффект такой, как если бы было указано значение <strong>50%</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/ru/docs/Web/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCYAttribute">SVG 1.1 (2nd Edition): The circle element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCYAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCYAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/ru/docs/Web/SVG/Content_type","Coordinate") }}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"> <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></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>cy</code></p> + +<ul> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>d</code></strong> предоставляет определение пути для рисования.</p> + +<p>Определение пути - это <a href="#Path_commands">список команд пути</a>, в которых каждая команда состоит из буквы и некоторых чисел, представляющих параметр команды. Ниже приведены все возможные команды.</p> + +<p>Три элемента используют этот атрибут: {{SVGElement("path")}}, {{SVGElement("glyph")}}, и {{SVGElement("missing-glyph")}}</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +</div> + +<h2 id="path">path</h2> + +<p>Для {{SVGElement('path')}}, <code>d</code> - строка, содержащая ряд команд пути, которые определяют путь, который должен нарисован.(maybe 'drawn' not 'drown')</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="glyph">glyph</h2> + +<p class="warning"><strong>Warning:</strong> Начиная с SVG2 {{SVGElement('glyph')}} устарел и не должен использоваться.</p> + +<p>Для {{SVGElement('glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Сноска:</strong> Точка происхождения (координата <code>0</code>,<code>0</code>) обычно является верхним левым углом контекста. Однако элемент {{SVGElement("glyph")}} имеет свое происхождение в левом нижнем углу своего бокса.</p> + +<h2 id="missing-glyph">missing-glyph</h2> + +<p class="warning"><strong>Внимание:</strong> Начиная с SVG2 {{SVGElement('missing-glyph')}} устарел и не должен использоваться.</p> + +<p>Для {{SVGElement('missing-glyph')}}, <code>d</code> является строкой, содержащей серию команд пути, которые определяют форму контура глифа.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Команды_пути">Команды пути</h2> + +<p><em>(Path commands)</em></p> + +<p>Команды пути - это команды, объединённые вместе в одну строку и определяющие путь, который нужно нарисовать. Каждая команда состоит из буквы, следующей за некоторыми числами, которые представляют параметры команды.</p> + +<p>SVG определяет 6 типов команд пути для всех 20 команд:</p> + +<ul> + <li>MoveTo: <code>M</code>, <code>m</code></li> + <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li> + <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li> + <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li> + <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li> + <li>ClosePath: <code>Z</code>, <code>z</code></li> +</ul> + +<p class="note"><strong>Заметка:</strong> Команды чувствительны к регистру; команда верхнего регистра указывает свои аргументы как абсолютные позиции, тогда как команда нижнего регистра указывает точки относительно текущей позиции.</p> + +<p>Всегда можно указать отрицательное значение в качестве аргумента для команды: отрицательные углы будут вращаться против часовой стрелки, абсолютные позиции x и y будут приниматься за отрицательные координаты, отрицательные относительные значения x будут перемещаться влево, а отрицательные относительные значения y будут двигаться вверх.</p> + +<h3 id="Команды_перемещения">Команды перемещения</h3> + +<p><em>(MoveTo path commands)</em></p> + +<p><em>MoveTo </em>инструкции можно рассматривать как собирание чертежного инструмента и установку его в другом месте. Между предыдущей точкой и указанной точкой нет линии.</p> + +<p class="note"><strong>Заметка:</strong> Хорошей практикой является открытие всех путей с помощью команды <strong>moveto</strong>, потому что без начального <strong>moveto</strong> команды будут выполняться с начальной точки, где бы это ни было ранее, что может привести к неопределенному поведению.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Команда</th> + <th scope="col">Параметры</th> + <th scope="col">Примечания</th> + </tr> + <tr> + <th scope="row">M</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td>Движение начала следующего под-пути к координатам <code>x</code>,<code>y</code>. Любая последующая координатная пара(ы) интерпретируется как параметр(ы) для неявных абсолютных команд LineTo(L) (см. Ниже).<br> + Формула: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">m</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td> + <p>Перемещает начало следующего подпути, сдвинув последнюю известную позицию пути на <code>dx</code> вдоль оси <code>x</code> и на <code>dy</code> вдоль оси <code>y</code>. Любая последующая пара координат считается неявной относительной командой LineTo (<code>l</code>) (см. ниже)<br> + Формула: P<sub>n</sub>= {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Examples">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Команды_перемещения', '100%', 200)}}</p> + +<h3 id="LineTo_path_commands">LineTo path commands</h3> + +<p><em>LineTo</em> инструкции проводят прямую линию от <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}), до <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), на основе указанных параметров. Конечная точка <em>end point </em>(P<sub>n</sub>) становится текущей точкой для следующей команды (P<sub>o</sub><sup>'</sup>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">L</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td> + <p>Рисует линию из <em>текущей точки в конечную точку определенную</em> <code>x</code>,<code>y</code>. Любая последующая пара(ы) координат интерпретируется как параметр(ы) для неявной абсолютной команд(ы) LineTo (<code>L</code>). Формула: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</p> + </td> + </tr> + <tr> + <th scope="row">l</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td>Draw a line from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All usubsequente pair of coordinates are considered implicite relative LineTo (<code>l</code>) command (<em>see below</em>).</td> + </tr> + <tr> + <th scope="row">H</th> + <td><code>x</code>+</td> + <td>Draw a horizontal line from the current point to the new <code>x</code> coordinate (<em>y coordinate stay unchanged</em>). The current point get its x coordinate updated for the next command. All subsequente value are considered an implicite absolute horizontal LineTo (<code>H</code>) command.</td> + </tr> + <tr> + <th scope="row">h</th> + <td><code>dx</code>+</td> + <td>Draw a horizontal line from the current point to a point shift by <code>dx</code> along the the x-axis (<em>y coordinate stay unchanged</em>). The current point get its X coordinate updated by <code>dx</code> for the next command. All subsequente value are considered an implicite relative horizontal LineTo (<code>h</code>) command.</td> + </tr> + <tr> + <th scope="row">V</th> + <td><code>y</code>+</td> + <td>Draw a vertical line from the current point to the new <code>y</code> coordinate (<em>x coordinate stay unchanged</em>). The current point get its y coordinate updated for the next command. All subsequente value are considered an implicite absolute vertical LineTo (<code>V</code>) command.</td> + </tr> + <tr> + <th scope="row">v</th> + <td><code>dy</code>+</td> + <td>Draw a vertical line from the current point to a point shift by <code>dy</code> along the y-axis (<em>x coordinate stay unchanged</em>). The current point get its Y coordinate updated by <code>dy</code> for the next command. All subsequente value are considered an implicite relative vertical LineTo (<code>v</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_2">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p> + +<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3> + +<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points: A starting point, a end point, and two control points to define the curvature.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">C</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point at the begining of the curve where <code>x2</code>,<code>y2</code> are the coordinates of the controle point at the end of the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente triplets of coordinates are considered implicite absolute cubic Bézier curve (<code>C</code>) command.</td> + </tr> + <tr> + <th scope="row">c</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> are the coordinates of the control point at the beginning of the curve relative to the starting point of the curve and <code>dx2</code>,<code>dy2</code> 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 <code>dx</code> and <code>dy</code> for the next command. All subsequente triplets of coordinates are considered implicite relative cubic Bézier curve (<code>c</code>) command.</td> + </tr> + <tr> + <th scope="row">S</th> + <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x2</code>,<code>y2</code> 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 <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute smooth cubic Bézier curve (<code>S</code>) command.</td> + </tr> + <tr> + <th scope="row">s</th> + <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx2</code>,<code>dy2</code> 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 <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative smooth cubic Bézier curve (<code>s</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_3">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3> + +<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points: A starting point, a end point, and a control point to define the curvature.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Q</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. <code>x1</code>,<code>y1</code> are the coordinates of the control point for the curve. The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente duo of coordinates are considered implicite absolute quadratic Bézier curve (<code>Q</code>) command.</td> + </tr> + <tr> + <th scope="row">q</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. <code>dx1</code>,<code>dy1</code> 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 <code>dx</code> and <code>dy</code> for the next command. All subsequente duo of coordinates are considered implicite relative quadratic Bézier curve (<code>q</code>) command.</td> + </tr> + <tr> + <th scope="row">T</th> + <td>(<code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to the coordinate <code>x</code>,<code>y</code>. 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 <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente coordinates are considered implicite absolute smooth quadratic Bézier curve (<code>T</code>) command.</td> + </tr> + <tr> + <th scope="row">t</th> + <td>(<code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth Bézier curve from the current point to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> 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 <code>dx</code> and <code>dy</code> for the next command. All subsequente coordinates are considered implicite relative smooth quadratic Bézier curve (<code>t</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_4">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3> + +<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">A</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequente set of parameters are considered implicite absolute arc curve (<code>A</code>) command.</td> + </tr> + <tr> + <th scope="row">a</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> 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:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represente a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequente set of parameters are considered implicite relative arc curve (<code>a</code>) command.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_5">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p> + +<h3 id="ClosePath">ClosePath</h3> + +<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Z, z</th> + <td></td> + <td>Close 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.</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> 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.</p> + +<h4 id="Examples_6">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#DProperty", "d")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><path></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><glyph></code> and <code><missing-glyph></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><path></code></td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>dur</code></strong> отображает простую длительность анимации.</p> + +<p>Пять элементов используют данный атрибут: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, и {{SVGElement("set")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample("topExample", "220", "150")}}</p> +</div> + +<h2 id="Примечания_к_использованию">Примечания к использованию</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code><a href="/ru/SVG/Content_type#Clock-value" title="en/SVG/Content_type#Clock-value"><clock-value></a></code> | <code>indefinite</code> | <code>media</code></td> + </tr> + <tr> + <th scope="row">Значение по-умолчанию</th> + <td><code>indefinite</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><clock-value></code></dt> + <dd>Задает длину простой длительности. Значение должно быть больше 0. Это значение может быть выражено в часах (<code>h</code>), минутах (<code>m</code>), секундах (<code>s</code>) или миллисекундах (<code>ms</code>). Это позволяет объединить такое представление времени для предоставления некоторых сложных длительностей, таких как: <code>hh:mm:ss.iii</code> или <code>mm:ss.iii</code></dd> + <dt><code>media</code></dt> + <dd>Задаёт простую длительность, как длительность, свойственной медиа. Это валидно только для элементов, которые определяют media.</dd> + <dt><code>indefinite</code></dt> + <dd>Задаёт простую длительность, как незаданную</dd> + <dt></dt> +</dl> + +<div class="blockIndicator note"> +<p><strong>Примечание:</strong> Интерполяция не будет работать, если простая длительность остается неопределенной (хотя это может быть полезно для элементов {{ SVGElement("set") }}).</p> +</div> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#DurAttribute", "dur")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#DurAttribute", "dur")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{Compat("svg.elements.animate.dur")}}</p> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Этот атрибут определяет конечное значение для анимации, которое может ограничить активную длительность.</p> + +<p>Значение атрибута представляет собой разделенный точками с запятой список значений. Каждое отдельное значение может совпадать с типом, определенным для {{ SVGAttr("begin") }} атрибута .</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation timing attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><End-value-list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#EndAttribute" title="http://www.w3.org/TR/SVG/animate.html#EndAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>Для типов значений, разрешенных в, <code><end-value-list></code> см. {{ SVGAttr("begin") }} атрибут.</p> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>end</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут определяет прозрачность цвета заполнения содержимого элемента.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут оформления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value"><opacity-value></a> | inherit</td> + </tr> + <tr> + <th scope="row">Предустановленное значение</th> + <td>1</td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Спецификация</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty" title="http://www.w3.org/TR/SVG/painting.html#FillOpacityProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><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></pre> + +<h3 id="результат">результат</h3> + +<p>{{EmbedLiveSample('Example', 200, 200)}}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие группы элементов могут быть использованы с атрибутом <code>fill-opacity</code>:</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Элементы графических форм (Shape elements</a>) »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TexteContent">Текстовые элементы</a> »</li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("opacity") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>The <strong><code>fill-rule</code></strong> этот атрибут представления, формулирует алгоритм, используемый для определения внутренней части фигуры.</p> + +<p class="note"><strong>Note:</strong> Атрибут представления, <code>fill-rule</code> может быть использован как CSS свойство.</p> + +<p>Как атрибут представления, он может быть применен к следующим восьми элементам:: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>nonzero</code> | <code>evenodd</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>nonzero</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p>The <code>fill-rule</code> attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:</p> + +<h3 id="nonzero">nonzero</h3> + +<p>The value <code>nonzero</code> 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.</p> + +<h4 id="Example">Example</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p> + +<h3 id="evenodd">evenodd</h3> + +<p>The value <code>evenodd</code> 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.</p> + +<h4 id="Example_2">Example</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and text</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and text</td> + </tr> + </tbody> +</table> + +<div class="ddict_div" style="top: 1201.2px; max-width: 120px; left: 303.181px;"><img class="ddict_audio"> +<p class="ddict_sentence">да</p> +</div> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>fill</code> имеет два значения в зависимости от используемого контекста.</p> + +<p><span style="line-height: 1.572;">По умолчанию, когда элементы анимации заканчиваются и их эффекты больше не применяются к значению представления для целевых атрибутов. Атрибут <code>fill</code> может использоваться для сохранения значения анимации после окончания активной продолжительности элемента анимации.</span></p> + +<p>Для фигур и текста атрибут <code>fill</code> является атрибутом представления, определяющим цвет внутренней части данного графического элемента. То, что называется «интерьер», зависит от самой фигуры и значения {{ SVGAttr("fill-rule") }} атрибут. Как атрибут представления, он также может использоваться как свойство непосредственно в таблице стилей CSS</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<h3 id="Для_анимируемых_элементов">Для анимируемых элементов</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибуты времени анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">remove</strong> | freeze</td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#FillAttribute" title="http://www.w3.org/TR/SVG/animate.html#FillAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>remove (default)</dt> + <dd>Эффект анимации удаляется (больше не применяется) при завершении активной продолжительности анимации. После активного конца анимации анимация больше не влияет на конечный объект (если анимация не перезапущена).</dd> + <dt>freeze</dt> + <dd>Эффект анимации «заморожен» при активной длительности анимации на оставшийся срок действия документа (или до перезапуска анимации).</dd> +</dl> + +<h3 id="Для_текста_и_форм">Для текста и форм</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td> + <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a>, <code>context-fill</code>, <code>context-stroke</code></p> + </td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#FillProperty" title="http://www.w3.org/TR/SVG/painting.html#FillProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пример_1_Простой_SVG">Пример 1: Простой SVG</h3> + +<pre class="brush: html"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <circle cx="100" cy="100" r="100" fill="#666"/> +</svg></pre> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('Example_1_Simple_SVG', 200, 200)}}</p> + +<h2 id="Использование_context-fill">Использование <code>context-fill</code></h2> + +<p>Для информации об использовании нестандартного и ограниченного значения <code>context-fill</code> (и <code>context-stroke</code>) смотрите документацию {{cssxref("-moz-context-properties")}}.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<p>Следующие элементы могут использовать атрибут <code>fill</code></p> + +<ul> + <li><a href="/en/SVG/Element#Animation_elements" title="en/SVG/Element#Animation">Animation elements</a> »</li> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Атрибут </span></font>font-weight</code> позволяет выбрать из шрифтового семейства начертание шрифта с указанной насыщенностью (иначе говоря, толщиной линий знаков, "жирностью") .</p> + +<p>Как и любой атрибут представления, <code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;"> </span></font>font-weight</code> может быть использован в виде свойства в CSS стилях, см. {{ cssxref("font-weight","CSS font-weight") }} для подробной информации.</p> + +<h2 id="Контекст_применения">Контекст применения</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значения</th> + <td><strong>normal</strong> | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit</td> + </tr> + <tr> + <th scope="row">Анимируемость</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty" title="http://www.w3.org/TR/SVG11/text.html#FontWeightProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Значение_ключевых_слов">Значение ключевых слов</h2> + +<ul> + <li><strong>bold</strong> - соответствует значению <strong>700 </strong>- полужирное начертание</li> + <li><strong>normal</strong> - соответствует значению <strong>400 </strong>- нормальное начертание</li> + <li><strong>bolder </strong>и <strong>lighter</strong> указывают браузеру использовать соответственно более жирное или более тонкое начертание в сравнении с текущим значением родительского элемента. Дочерние элементы, в свою очередь, унаследуют получившееся значение.</li> + <li><strong>inherit </strong>- дает указание браузеру унаследовать тип начертания от родительского элемента.</li> +</ul> + +<h2 id="Предостережения">Предостережения</h2> + +<p>Для многих шрифтов доступны только значения 400 и 700 - нормальное и полужирное начертания соответственно. Доступные значения могут варьироваться в зависимости от шрифта.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="css">css</h3> + +<pre class="brush: css">p.normal {font-weight:normal;} +p.thick {font-weight:bold;} +p.thicker {font-weight:900;}</pre> + +<h3 id="html">html</h3> + +<pre class="brush: 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> +</pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>font-weight</code>.</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("svg.attributes.presentation.font-weight")}}</p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{ cssxref("font-weight","CSS font-weight") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <code><strong>id</strong></code> присваивает уникальное имя элементу.</p> + +<p>Этот атрибут используется всеми элементами.</p> + +<div id="topExample"> +<pre class="brush: html notranslate"><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> +</pre> + +<p>{{EmbedLiveSample("topExample", "120", "120")}}</p> +</div> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><id></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>Отсутствует</em></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><id></dt> + <dd> + <p>Задает идентификатор элемента. Идентификатор должен быть уникальным в пределах дерева узлов, не должен быть пустой строкой и не должен содержать никаких пробелов.</p> + + <div class="blockIndicator note"> + <p><strong>Примечание:</strong> Следует избегать использование значений идентификатора, которые будут анализироваться как спецификация представления SVG (например, <code>MyDrawing.svg#svgView(viewBox(0,200,1000,1000))</code>) или базовый фрагмент мультимедиа при использовании в качестве целевого фрагмента URL.</p> + </div> + + <p>Он должен быть валидным для XML-документов. Автономный документ SVG использует синтаксис XML 1.0, который указывает, что валидные идентификаторы включают только обозначенные символы (буквы, цифры и несколько знаков препинания) и не начинаются с цифры, символа точки (.) или с дефиса (-).</p> + </dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Более подробно определяет допустимые значения.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#IDAttribute", "id")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Исходное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("svg.attributes.style.class")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/ru/docs/Web/HTML/Global_attributes/id">HTML <code>id</code></a></li> + <li>{{SVGAttr("class")}}</li> +</ul> + +<div class="jfk-bubble gtx-bubble"> +<div class="jfk-bubble-content-id" id="bubble-27"> +<div id="gtx-host" style="max-width: 400px;"></div> +</div> + +<div class="jfk-bubble-closebtn-id jfk-bubble-closebtn"></div> + +<div class="jfk-bubble-arrow-id jfk-bubble-arrow jfk-bubble-arrowdown" style="left: 90px;"> +<div class="jfk-bubble-arrowimplbefore"></div> + +<div class="jfk-bubble-arrowimplafter"></div> +</div> +</div> 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 +--- +<p>« <a href="/ru/docs/Web/SVG" title="ru/docs/Web/SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Элемент" title="ru/docs/Web/SVG/Элемент">Справочник SVG элементов</a> »</p> + +<p>Элементы SVG можно изменять с помощью атрибутов, которые задают подробные сведения о том, каким образом элемент должен обрабатываться или визуализироваться. Ниже приведен список всех атрибутов, доступных в SVG, а также ссылки на справочную документацию, помогающие узнать, какие элементы поддерживают их и как они работают.</p> + +<h2 id="SVG_Атрибуты_от_А_до_Я">SVG Атрибуты от А до Я</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("path") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="Категории">Категории</h2> + +<h3 id="Атрибуты_событий_анимации">Атрибуты событий анимации</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Целевые атрибуты анимации</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Атрибуты_времени_анимации">Атрибуты времени анимации</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Атрибуты_значений_анимации">Атрибуты значений анимации</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}</p> + +<h3 id="Атрибуты_добавления_анимации">Атрибуты добавления анимации</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Атрибуты_условий">Атрибуты условий</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Атрибуты_ядра">Атрибуты ядра</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p> + +<h3 id="Атрибуты_событий_документа">Атрибуты событий документа</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> + +<h3 id="Атрибуты_простых_фильтров">Атрибуты простых фильтров</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Атрибуты_графических_событий">Атрибуты графических событий</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Атрибуты_представления">Атрибуты представления</h3> + +<div class="note">Заметьте, что все атрибуты представления SVG можно использовать как CSS свойства.</div> + +<p>{{ 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") }}</p> + +<h3 id="Атрибуты_передаточных_функций">Атрибуты передаточных функций</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_атрибуты">XLink атрибуты</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> 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 +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут <code>keyTimes</code> представляет собой разделенный точками с запятой список значений времени, используемых для управления темпами анимации. Каждое значение в списке соответствует значению в списке атрибутов {{ SVGAttr("values") }} и определяет, когда оно используется в анимации. Каждое значение времени в списке <code>keyTimes</code> задается как значение с плавающей запятой от 0 до 1 (включительно), представляющее пропорциональную величину смещения в течение элемента анимации.</p> + +<p>Если указан список <code>keyTimes</code>, то в списке <code>keyTimes</code> должно быть ровно столько же значений, сколько в списке {{ SVGAttr("values") }} .</p> + +<p>Каждое последовательное значение времени должно быть больше или равно предыдущему значению времени.</p> + +<p>Семантика списка keyTimes зависит от режима интерполяции:</p> + +<ul> + <li>Для линейной и сплайновой анимации первое значение времени в списке должно быть равно 0, а Последнее значение времени в списке должно быть 1. Ключевое время, связанное с каждым значением, определяет, когда значение задается; значения являются интерполяцией между ключевыми моментами.</li> + <li>Для дискретной анимации первое значение времени в списке должно быть равно 0. Время, связанное с каждым значением, определяет, когда значение задается; Функция анимации использует это значение до следующего времени, определенного в <code>keyTimes</code>.</li> +</ul> + +<p>Если в качестве режима интерполяции используется <em>paced</em>, атрибут <code>keyTimes </code>игнорируется.</p> + +<p>Если в качетсве параметра длительности выбрано <em>indefinite</em>, атрибут <code>keyTimes</code> игнорируется.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><?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></pre> + +<p><strong>Демонстрация</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>keyTimes</code></p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Атрибут <strong><code>lang</code></strong> указывает основной язык, используемый в содержимом, и атрибуты, содержащие текстовое содержимое определенных элементов.</span></p> + +<p>Также существует атрибут {{SVGAttr("xml:lang")}} (с пространством имен). Если определены оба атрибута, то используется тот, который имеет пространство имен, а атрибут без пространства имен игнорируется.</p> + +<p>В SVG 1.1 существовал атрибут <code>lang</code>, определенный с другим значением и применимый только к {{SVGElement("glyph")}}. Этот атрибут указывал список языков в <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">формате BCP 47</a>. Глиф предназначался для использования, если атрибут <code>xml:lang</code> точно соответствует одному из языков, указанных в значении этого параметра, или если атрибут <code>xml:lang</code> точно соответствует префиксу одного из языков, указанных в значении этого параметра. Таким образом, первый символ тега, следующий за префиксом, был "-".</p> + +<p>Все элементы используют этот атрибут.</p> + +<div id="topExample"> +<pre class="brush: html; highlight[2] notranslate"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <text lang="en-US">This is some English text</text> +</svg></pre> +</div> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code><language-tag></code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>Отсутствует</em></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + </tbody> +</table> + +<dl> + <dt><code><language-tag></code></dt> + <dd> + <p>Это значение указывает язык, используемый для элемента. Синтаксис этого значения определен в <a href="https://tools.ietf.org/html/bcp47#section-2.1">спецификации BCP 47</a>.</p> + + <p>Наиболее распространенным синтаксисом является значение, состоящее из двухсимвольной части нижнего регистра языка и двухсимвольной части верхнего регистра для региона или страны, разделенных знаком минус. Например, <code>en-US</code> для американского английского языка или <code>de-AT</code> для австрийского немецкого.</p> + </dd> +</dl> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#LangAttribute", "lang")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Сделал атрибут {{SVGAttr("lang")}} (без пространства имен) доступным для всех элементов и определил взаимодействие между ними.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementLangAttribute", "lang")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Устаревшее определение атрибута для элементов {{SVGElement("glyph")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("svg.attributes.core.lang")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://tools.ietf.org/html/bcp47">Спецификация BCP 47 для тегов для идентификации языков</a></li> +</ul> 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 +--- +<p><span class="seoSummary">Когда SVG элемент <code><text></code><strong> </strong>или<strong> </strong><code><tspan></code> имеет конкретную длину, установленную с помощью атрибута <code>textLengt</code>, атрибут <code>lengthAdjust</code> контролирует как текст помещается в эту длину (растягивается или сжимается).</span></p> + +<p>Существует 2 допустимых значения для атрибута <code>lengthAdjust</code>: <code>spacing</code> и <code>spacingAndGlyphs</code>. Используя <code>spacing</code> (установлено по умолчанию), форма букв сохраняется, но расстояние между ними увеличивается или уменьшается. Используя <code>spacingAndGlyphs</code> весь тестовый элемент растягивается.</p> + +<h2 id="SVG_text_fitting_using_lengthAdjust" name="SVG_text_fitting_using_lengthAdjust">SVG текст с использованием lengthAdjust</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><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></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('SVG_text_fitting_using_lengthAdjust') }}</p> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p><span class="seoSummary">Атрибут <code>letter-spacing</code> контролирует расстояние между текстовыми символами, в дополнении к любому расстоянию атрибута {{ SVGAttr("kerning") }} .</span></p> + +<p>Для SVG, если значением атрибута выступает обыкновенное число (например, <code>128</code>), браузер добавляет это к <a href="/en/SVG/Content_type#Length"><length></a> в текущей системе координат пользователя.</p> + +<p>Если же значением атрибута выступают относительные величины, к примеру <code>.25em</code> или <code>1%</code>, браузер преобразовывает их в <a href="/en/SVG/Content_type#Length"><length></a> соответствующее значение в текущей системе координат пользователя.</p> + +<p>В качестве атрибута представления он также может использоваться как свойство в CSS. Смотрите {{ cssxref("letter-spacing","CSS letter-spacing") }} для дополнительной информации.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>normal | <a href="/en/SVG/Content_type#Length"><length></a> | <strong title="this is the default value">inherit</strong></td> + </tr> + <tr> + <th scope="row">Анимируется </th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#LetterSpacingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Length") }}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>В следующих элементах можно использовать атрибут <code>letter-spacing</code></p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements">Элементы текстового контента</a>, например <code><text></code> и <code><tspan></code>.</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ cssxref("letter-spacing","CSS letter-spacing") }}</li> +</ul> + +<h2 id="Примечание_об_использовании">Примечание об использовании</h2> + +<p>Атрибут <code>letter-spacing</code> плохо поддерживается в работе с SVG. По состоянию на май 2016 года Firefox делает текст без использования <code>letter-spacing</code>. Chrome делает текст с уже буквенным интервалом, но неправильно вычисляет длину текста; <code>textNode.getComputedTextLength()</code> возвращает точно такую же длину, <code>letter-spacing</code> установлен или нет, что приводит к грубо неправильным результатам при разнесении букв.</p> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>lighting-color</code> определяет цвет источника света для примитивов фильтров {{ SVGElement("feDiffuseLighting") }} и {{ SVGElement("feSpecularLighting") }}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a> | inherit</td> + </tr> + <tr> + <th scope="row">Начальное значение</th> + <td>white</td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#LightingColorProperty" title="http://www.w3.org/TR/SVG11/filters.html#LightingColorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>lighting-color</code></p> + +<ul> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> +</ul> 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 +--- +<p>Link not exist</p> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>overflow</code> имеет те же значения, что определены для {{ cssxref("overflow","CSS-свойства overflow") }}. Но имеют место также следующие дополнительные моменты:</p> + +<ul> + <li>Атрибут <code>overflow</code> применяется к элементам, которые устанавливают новый порт просмотра (см. ниже), элементам{{ SVGElement("pattern") }} и {{ SVGElement("marker") }}, на все прочие элементы он не влияет.</li> + <li>Для элементов, к которым атрибут <code>overflow</code> может применяться, если он имеет значение <code>hidden</code> или <code>scroll</code>, результатом будет создание нового пути обрезки прямоугольной формы. Это эквивалентно определению элемента {{ SVGElement("clipPath") }}, содержимое которого есть элемент {{ SVGElement("rect") }}, который определяет эквивалентный прямоугольник, и затем указанию <url> этого элемента {{ SVGElement("clipPath") }} равным значению атрибута {{ SVGAttr("clip-path") }} для данного элемента.</li> + <li>Если атрибут <code>overflow</code> имеет значение, отличное от <code>hidden</code> или <code>scroll</code>, он не оказывает действия.</li> + <li>Внутри SVG-содержимого значение <code>auto</code> эквивалентно значению <code>visible</code>.</li> + <li>Когда svg-элемент высшего уровня включён в HTML-код, если атрибут <code>overflow</code> имеет значение <code>hidden</code> или <code>scroll</code>, браузер установит первоначальный путь обрезки равным границам первоначального порта просмотра; иначе первоначальный порт просмотра задаётся соответственно CSS-правилам обрезки.</li> + <li>Когда svg-элемент высшего уровня автономен, атрибут <code>overflow</code> на нём игнорируется в том, что касается отрисовки, а первоначальный путь обрезки устанавливается по границам первоначального порта просмотра.</li> + <li>Первоначальное значение <code>overflow</code>, как определено вn CSS, есть <code>visible</code>, и это применяется также к корневому элементу {{ SVGElement("svg") }}; но для дочерних элементов SVG-документа браузерные стили SVG перекрывают это первоначальное значение и задают атрибуту <code>overflow</code> элементов, устанавливающих новый порт просмотра, элементов <code>pattern</code> и <code>marker</code> значение <code>hidden</code>.</li> +</ul> + +<p>Будучи презентационным этот атрибут может также быть использован как свойство прямо в CSS-стилях, подробнее см. {{ cssxref("overflow","CSS overflow") }}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Презентационный атрибут</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>visible | hidden | scroll | auto | inherit</td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty" title="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>overflow</code></p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("marker") }}</li> +</ul> + +<h2 id="См._также">См. также</h2> + +<ul> + <li>{{ cssxref("overflow","CSS overflow") }}</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут <code>patternContentUnits</code> определяет систему координат для содержимого {{ SVGElement("pattern") }}. Заметье, что этот аттрибут не имеет эффекта, если {{ SVGAttr("viewBox") }} определен на {{ SVGElement("pattern") }} элементе.</p> + +<p>Если <code>patternContentUnits</code> аттрибут не определен, то его значение предполагается равным <code>userSpaceOnUse</code>.</p> + +<p>Заметье, что значение {{ SVGElement("pattern") }} не имеет влияния на заданные в процентах аттрибуты контента . Это означает, что, если вы задаете значение <code>patternContentUnits</code> равным <code>objectBoundingBox</code>, значения, указанные в процентах, будут пересчитаны, как если бы вы задали <code>userSpaceOnUse</code>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute" title="http://www.w3.org/TR/SVG11/pservers.html#PatternElementPatternContentUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>userSpaceOnUse</dt> + <dd>Пользовательская система координат {{ 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") }}.</dd> + <dt>objectBoundingBox</dt> + <dd>Пользовательская система координат для содержимого {{ 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") }}.</dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Атрибут <code>patternContentUnits</code> может быть определен на следующих элементах:</p> + +<ul> + <li>{{ SVGElement("pattern") }}</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<div>Атрибут r устанавливает значение радиуса круга.</div> + +<div> </div> + +<p>Этот атрибут используют два элемента: {{SVGElement("circle")}}, и {{SVGElement("radialGradient")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="circle">circle</h2> + +<p>Для {{SVGElement('circle')}}, <code>r</code> устанавливает радиус окружности и, следовательно, её размер. При значении, меньшем или равном нулю, круг не будет нарисован.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong>| <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row"> + <p dir="ltr">Значение по умолчанию</p> + </th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Анимируемость</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <strong>r</strong> является свойством геометрии, означающим, что этот атрибут также может использоваться как CSS-свойство для кругов.</p> + +<h2 id="radialGradient">radialGradient</h2> + +<p>Для {{ SVGElement("radialGradient") }}, <code>r</code> устанавливает радиус конечной окружности радиального градиента.</p> + +<p>Градиент будет нарисован таким образом, чтобы <strong>100%</strong> конца градиента отображались по периметру этого конечного круга. Значение, меньшее или равное нулю, приведет к тому, что область будет окрашена как один цвет, используя цвет и непрозрачность последнего градиента {{ SVGElement("stop") }}.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>50%</code></td> + </tr> + <tr> + <th scope="row">Анимируемость</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#R", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td> + <p dir="ltr" id="tw-target-text">Определение как свойство геометрии</p> + + <p> </p> + </td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определение для SVG2 серверов рисования <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#RadialGradientElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Исходное определение для <code><radialGradient></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#CircleElementRAttribute", "r")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Исходное определение для <code><circle></code></td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Данный атрибут задает, сколько раз должна выполняться анимация.</p> + +<p>Значение атрибута определяет количество итераций. Принимаются числа с плавающей точкой, которые интерпретируются как доля итерации. Значение должно быть больше нуля.</p> + +<p>Возможно также определить бесконечную зацикленную анимацию с помощью ключевого слова "indefinite".</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут времени анимации</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> | "indefinite"</td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Ссылка на стандарт</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute" title="http://www.w3.org/TR/SVG/animate.html#RepeatCountAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Number") }}</p> + +<h2 id="Пример">Пример</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Данные элементы могут использовать атрибут <font face="Consolas, Liberation Mono, Courier, monospace">repeatCount</font></p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>rx</code></strong> определяет радиус круга по оси x.</p> + +<p>Два элемента используют этот атрибут: {{SVGElement("ellipse")}} и {{SVGElement("rect")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="ellipse">ellipse</h2> + +<p>Для элемента {{SVGElement('ellipse')}} rx определяет радиус фигуры по оси x. Если значение меньше или равно 0, эллипс не будет нарисован вообще.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>rx</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.</p> + +<h2 id="rect">rect</h2> + +<p>Для {{SVGElement('rect')}}, <code>rx</code> определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.</p> + +<p>Способ интерпретации значения атрибута <code>rx</code> зависит как от атрибута {{SVGAttr("ry")}} , так и от ширины прямоугольника:</p> + +<ul> + <li>Если правильно задано значение для <code>rx</code>, но не для {{SVGAttr("ry")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если ни <code>rx</code>, ни {{SVGAttr("ry")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> + <li>Если <code>rx</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>rx</code> половиной ширины прямоугольника.</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>rx</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для rect.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#RX", "rx")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определяется как свойство геометрии</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td> + <p>Начальное определение для <span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-size: 1rem; font-style: inherit; font-weight: inherit; letter-spacing: -0.00278rem;'><ellipse></span></p> + </td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Начальное определение для <code><rect></code></td> + </tr> + </tbody> +</table> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>ry</code></strong> определяет радиус круга по оси y.</p> + +<p>Два элемента используют этот атрибут: <a href="https://developer.mozilla.org/ru/docs/Web/SVG/Element/ellipse" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code><ellipse></code></a> и <a href="https://developer.mozilla.org/ru/docs/Web/SVG/Element/rect" rel="nofollow" title="Документация об этом ещё не написана; пожалуйста, поспособствуйте её написанию!"><code><rect></code></a></p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="ellipse">ellipse</h2> + +<p>Для элемента {{SVGElement('ellipse')}}, <code>ry</code> определяет радиус фигуры по оси y. Если значение меньше или равно 0, эллипс не будет нарисован вообще.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>ry</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для эллипсов.</p> + +<h2 id="rect">rect</h2> + +<p>Для {{SVGElement('rect')}}, <code>ry</code> определяет радиус эллипса по оси x, используется для скругления углов прямоугольника.</p> + +<p>Способ интерпретации значения атрибута <code>ry</code> зависит как от атрибута {{SVGAttr("rx")}} , так и от ширины прямоугольника:</p> + +<ul> + <li>Если правильно задано значение для <code>ry</code>, но не для {{SVGAttr("rx")}} (или наоборот), то браузер сочтет отсутствующее значение равным указанному.</li> + <li>Если ни <code>ry</code>, ни {{SVGAttr("rx")}} не имеют правильно указанного значения, браузер нарисует прямоугольник с квадратными углами.</li> + <li>Если <code>ry</code> больше половины ширины прямоугольника, то браузер будет считать значение <code>ry</code> половиной ширины прямоугольника.</li> +</ul> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong> | <code>auto</code></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><code>auto</code></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание. </strong>Начиная с <strong>SVG2</strong>, <strong>ry</strong> - <em>свойство геометрии(Geometry Property). </em>Это означает, что атрибут также можно использовать как свойство CSS для rect.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "geometry.html#RY", "ry")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определяется как свойство геометрии</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRYAttribute", "ry")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Начальное определение для <code><ellipse></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#RectElementRYAttribute", "ry")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Начальное определение для <code><rect></code></td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p> + +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать даные рекомендации.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значения</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | crispEdges | geometricPrecision | inherit</td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>auto</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> <span class="hps">внести соответствующие</span> <span class="hps">компромиссы</span><span>, чтобы сбалансировать</span> <span class="hps">скорость рендеринга,</span> <span class="hps">четкие края</span> <span class="hps">и</span> <span class="hps">геометрическую</span> <span class="hps">точность</span><span>, но </span><span class="hps">геометрической точности</span> <span class="hps">уделять более пристальное внимание</span><span>, чем</span> <span class="hps">скорости и</span> <span class="hps">четким краями</span><span>.</span></span></dd> + <dt>optimizeSpeed</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен</span> акцентироваться на <span class="hps">скорость рендеринга, в ущерб</span> <span class="hps">геометрической</span> <span class="hps">точности и</span> <span class="hps">четким краями</span><span>.</span> <span class="hps">Эту опцию</span> также можно<span class="hps"> указывать,</span><span>, чтобы отключить</span> <span class="hps">сглаживание фигур</span><span>.</span></span></dd> + <dt>crispEdges</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> браузер <span class="hps">должен попытаться</span> акцентировать <span class="hps">на контрасте</span> <span class="hps">чистых</span> <span class="hps">краев</span> рисунков, в ущерб<span class="hps"> скорости</span> <span class="hps">рендеринга</span> <span class="hps">и геометрической</span> <span class="hps">точности.</span> <span class="hps">Для достижения</span> наилучшего результата четкости<span class="hps"> края</span><span>, браузер</span><span class="hps"> может</span> <span class="hps">отключить</span> <span class="hps">сглаживание для</span> <span class="hps">всех</span> <span class="hps">линий и кривых</span> <span class="hps">или, возможно,</span> <span class="hps">только для</span> <span class="hps">прямых</span><span>, близких к</span> <span class="hps">вертикальным или горизонтальным.</span> <span class="hps">Кроме того,</span> <span class="hps">браузер может</span> <span class="hps">скорректировать позиции</span> <span class="hps">строк и</span> <span class="hps">ширину линий</span> <span class="hps">для выравнивания</span> <span class="hps">краев</span> <span class="hps">с</span> <span class="hps">пикселями устройства</span><span>.</span></span></dd> + <dt>geometricPrecision</dt> + <dd><span id="result_box" lang="ru"><span class="hps">Указывает на то, что</span> <span class="hps">браузер</span> <span class="hps">должен</span> акцентировать <span class="hps">геометрическую</span> <span class="hps">точность в ущерб</span> <span class="hps">скорости и</span> <span class="hps">четкими краям</span></span>.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + shape-rendering="optimizeSpeed"></pre> + +<table class="standard-table"> + <tbody> + <tr> + <td> + <p>shape-rendering: geometricPrecision:</p> + + <p><img alt="shape-rendering:geometricPrecision" src="http://download.g63.ru/svg/shape-rendering-geometricPrecision.svg" style="height: 210px; width: 200px;"></p> + </td> + <td> + <p>shape-rendering: optimizeSpeed</p> + + <p><img alt="shape-rendering:optimizeSpeed" src="http://download.g63.ru/svg/shape-rendering-optimizeSpeed.svg" style="height: 210px; width: 200px;"></p> + </td> + </tr> + </tbody> +</table> + +<p>Также можно воспользоваться css shape-rendering:</p> + +<pre class="brush: xml"><svg xmlns="http://www.w3.org/2000/svg" + version="1.1" width="100" height="100" + style="shape-rendering:optimizeSpeed;"></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>shape-rendering</code></p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> +</ul> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="/ru/docs/Web/SVG/Attribute">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>stop-color</code> указывает какой цвет использовать при остановке градиента. Значения <code>currentColor</code> и ICC цвета могут быть заданы так же, как в <a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a> спецификации для атрибутов {{ SVGAttr("fill") }} и {{ SVGAttr("stroke") }}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>currentColor | <a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color"><color></a> | <a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor"><icccolor></a> | inherit</td> + </tr> + <tr> + <th scope="row">Начальное значение</th> + <td>black</td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty" title="http://www.w3.org/TR/SVG11/pservers.html#StopColorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stop-color</code></p> + +<ul> + <li>{{ SVGElement("stop") }}</li> +</ul> + +<h2 id="Смотрите_также">Смотрите также </h2> + +<ul> + <li>{{ SVGAttr("stop-opacity") }}</li> +</ul> 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 +--- +<div class="blockIndicator note"> +<p><strong>Прежняя редакция:</strong> « <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a><br> + Этот атрибут определяет смещение обводки относительно начального положения.<br> + При использовании <a href="/ru/SVG/Content_type#Percentage" title="ru/SVG/Content_type#Percentage"><percentage></a>, значение будет вычисляться от текущего viewport.<br> + Значение может быть отрицательным.</p> +</div> + +<p>{{SVGRef}}<br> + Атрибут <strong><code>stroke-dashoffset</code></strong> определяет сдвиг массива <strong>dash array </strong>относительно начального положения.</p> + +<p class="note"><strong>Сноска:</strong> Атрибут <code>stroke-dashoffset</code> может использоваться как свойство CSS.</p> + +<p>Как атрибут представления, он может применяться к любому элементу, но влияет только на следующие одиннадцать элементов: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} </p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут оформления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a> | inherit</td> + </tr> + <tr> + <th scope="row">Исходное значение</th> + <td>0</td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Спецификация</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример', '220', '240')}}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stroke-dashoffset</code></p> + +<ul> + <li><a href="/ru/SVG/Element#Shape" title="ru/SVG/Element#Shape">Элементы форм</a> »</li> + <li><a href="/ru/SVG/Element#TextContent" title="ru/SVG/Element#TextContent">Текстовые элементы</a> »</li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>stroke-linecap</code></strong> - это атрибут представления, определяющий форму, которая будет использоваться в конце открытых подпутей при штриховании.</p> + +<p class="note"><strong>Сноска: </strong>В качестве атрибута представления можно использовать <code>stroke-linecap</code> в качестве свойства CSS.</p> + +<p>В качестве атрибута представления он может применяться к любому элементу, но он влияет только на следующие семь элементов: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Нотации">Нотации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code>butt</code> | <code>round</code> | <code>square</code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>butt</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="butt">butt</h3> + +<p>Значение <code>butt</code> указывает границу каждого подпути и не выходит за пределы двух его конечных точек. На подпути нулевой длины путь не будет отображаться вообще.</p> + +<h4 id="Пример">Пример</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('butt', '100%', 200)}}</p> + +<h3 id="round">round</h3> + +<p>Значение <code>round</code> указывает на то, что в конце каждого подпути обводка будет расширена на полукруг с диаметром, равным ширине обводки. На подпути нулевой длины обводка состоит из полного круга с центром в точке подпути.</p> + +<h4 id="Пример_2">Пример</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('round', '100%', 200)}}</p> + +<h3 id="square">square</h3> + +<p>Значение <code>square</code> указывает, что в конце каждого подпути обводка будет расширена прямоугольником с шириной, равной половине ширины обводки, и высотой, равной ширине обводки. На подпути с нулевой длиной обводка состоит из квадрата, ширина которого равна ширине обводки, с центром в точке подпути.</p> + +<h4 id="Пример_3">Пример</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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> +</pre> + +<p>{{EmbedLiveSample('square', '100%', 200)}}</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2> + +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных.<br> +Если вы хотите внести свой вклад в данные, пожалуйста, проверьте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на их получение.</div> + +<p>{{Compat("svg.attributes.presentation.stroke-linecap")}}</p> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeLinecapProperty", "stroke-linecap")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Атрибут <code>stroke-width</code> указывает ширину контура текущего объекта. Его значение по умолчанию: 1. Если используется <percentage>, значение представляет собой процент от текущего окна просмотра. Если используется значение 0, контур не будет нарисован.<br> + <br> + В качестве атрибута представления он также может использоваться как свойство непосредственно внутри таблицы стилей CSS</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row"><strong>Категория</strong></th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row"><strong>Значения</strong></th> + <td><a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><length></a> | <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | inherit</td> + </tr> + <tr> + <th scope="row"><strong>Анимируемый</strong></th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeWidthProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><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></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Example', 200, 200)}}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stroke-width</code>.</p> + +<ul> + <li><a href="/ru/SVG/Element#Shape" title="en/SVG/Element#Shape">Элементы форм</a> »</li> + <li><a href="/ru/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Текстовые элементы</a> »</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — <strong>None</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Значения</th> + <td> + <p><a href="/en/SVG/Content_type#Paint" title="en/SVG/Content_type#Paint"><paint></a>, <code>context-fill</code>, <code>context-stroke</code></p> + </td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#StrokeProperty" title="http://www.w3.org/TR/SVG/painting.html#StrokeProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="SVG_Line" name="SVG_Line">SVG Line с stroke</h3> + +<h4 id="Пример_1_Нарисуйте_прямую_зеленую_линию_используя_stroke.">Пример 1: Нарисуйте прямую зеленую линию, используя <strong>stroke</strong>.</h4> + +<pre class="brush: html"><svg height="50" width="300"> + <path stroke="green" d="M5 20 1215 0" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example1_Draw_straight_green_line_using_stroke.', '300', '50', '', 'Web/SVG/Attribute/stroke')}}</p> + +<h4 id="Пример_2_Нарисуйте_черный_круг_с_синей_рамкой_используя_stroke.">Пример 2: Нарисуйте черный круг с синей рамкой используя stroke.</h4> + +<pre class="brush: html"><svg height="100" width="100"> + <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example2_Draw_black_circle_with_blue_border_using_stroke.', '100', '120', '', 'Web/SVG/Attribute/stroke')}}</p> + +<h2 id="Использование_context-stroke">Использование <code>context-stroke</code></h2> + +<p>Информацию об использовании значения нестандартного и ограниченного <code>context-stroke</code> (и <code>context-fill</code>) смотреть в документации для свойства {{cssxref("-moz-context-properties")}}.</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>stroke</code>.</p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Справочник SVG Аттрибутов</a></p> + +<p>Атрибут <code>text-anchor</code> используется для выравнивания<br> + <em>(start-, middle- или end-выравнивание)</em> текстовой строки относительно заданной точки.</p> + +<p><strong id="docs-internal-guid-4ea05241-81fa-9da9-3d12-af90b8ff4e53">А</strong>трибут <code>text-anchor</code> применяется к каждому отдельному текстовому фрагменту в заданном {{ SVGElement("text") }} элементе. Каждый текстовый фрагмент имеет текущую текстовую позицию, которая представляет точку в пользовательской системе координат, полученную в результате (в зависимости от контекста) применения {{ SVGAttr("x") }} и {{ SVGAttr("y") }} атрибутов к {{ SVGElement("text") }} элементу, любого {{ SVGAttr("x") }} или {{ SVGAttr("y") }} значения к {{ SVGElement("tspan") }}, {{ SVGElement("tref") }} , {{ SVGElement("altGlyph") }} элементу явно присвоенного к первому визуализированному символу в текстовом фрагменте, или при задании первоначальной текстовой позиции для {{ SVGElement("textPath") }} элемента. </p> + +<p>Как артирубт представления, он так же может быть использован как свойство непосредственно в CSS стилях.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Атрибут представления</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td>start | middle | end | <strong title="this is the default value">inherit</strong></td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty" title="http://www.w3.org/TR/SVG/text.html#TextAnchorProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>start</dt> + <dd> + <p>Отрисованные символы выравниваются так, что начало текстовой строки находится в исходной текстовой позиции. Для латиницы в обычной ориентации это эквивалентно выравниванию по левому краю. Для шрифтов, которые по своей сути имеют выравнивание справа налево такие как Иврит и Арабский это эквивалентно правому выравниваю. Для азиаского текста с вертикальным направлением текста это сопоставимо с выравниванием по верхнему краю.</p> + </dd> + <dt>middle</dt> + <dd> + <p>Отрисованные символы выравниваются так, что середина текстовой строки находится в текущей текстовой позиции. (Для текста вдоль заданной линии, теоретически, текстовая строка сначала ложится по прямой линии. Определяется средняя точка<br> + между началом текстовой строки и концом текстовой строки. Затем текстовая строка отображается на заданной линии с этой средней точкой, расположенной в текущей текстовой<br> + позиции.)</p> + </dd> + <dt>end</dt> + <dd>Отрисованные символы выравниваются так, что конец текстовой строки находится в исходной текущей текстовой позиции. Для латиницы в своей обычной ориентации это эквивалетно<br> + правому выраниванию. Для шрифтов которые по определению справа налево такие как Иврит и Арабский это эквивалентно левому выравниванию.</dd> + <dt>Примечание</dt> + <dd>В <strong>IE</strong>-11 атрибут <code><strong>text-anchor</strong></code> не имеет эффекта при привязке текста к заданному пути <strong><code>path</code></strong> посредством тега <code><strong>textPath</strong></code>.<br> + В приведенном ниже примере тег <strong><code>path</code></strong> использовался только лишь для отрисовки линий и с расположением текста никак не связан.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<pre><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></pre> + +<p><strong>Песочницы</strong></p> + +<p>{{ EmbedLiveSample('Пример','400','400') }}</p> + + + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать <code>text-anchor</code> атрибут</p> + +<ul> + <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Совместимость браузера</h2> + + + +<p>{{Compat("svg.attributes.presentation.text-anchor")}}</p> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> +<p>При создание SVG есть возможность указать браузеру о том, как рекомендуется рендерить (отрисовывать) текст. <code>text-rendering</code> предоставляет возможность указывать даные рекомендации.</p> +<p>Помимо presentation attribute, настройки ренедеринга шрифтов можно задавть через CSS стили. Для получения дополнительной информации смотри {{ cssxref("text-rendering","CSS text-rendering") }}.</p> +<h2 id="Usage_context">Usage context</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Presentation attribute</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> +<dl> + <dt> + auto</dt> + <dd> + Указывает на то, что браузер должен внести соответствующие компромиссы, чтобы сбалансировать скорость рендеринга, читаемость (разборчивость текста) и геометрическую точность, но читаемости уделять более пристальное внимание, чем скорости и геометрической точности.</dd> + <dt> + optimizeSpeed</dt> + <dd> + Указывает на то, что браузер должен акцентироваться на скорость рендеринга, в ущерб читаемости и геометрической точности. Эту опцию также можно указывать,, чтобы отключить сглаживание (anti-aliasing) текста.</dd> + <dt> + optimizeLegibility</dt> + <dd> + Указывает на то, что браузер должен попытаться акцентировать на читаемости текста, в ущерб скорости рендеринга и геометрической точности. Браузеры часто применяю к тексту сглаживание (anti-aliasing) или встроенные в шрифт хинтинг, или оба способа сразу, чтобы сделать наилучшую читаемость текста.</dd> + <dt> + geometricPrecision</dt> + <dd> + Указывает на то, что браузер должен акцентировать геометрическую точность в ущерб читаемости и скорости рендеринга. Эта опция обычно используется, чтобы отключить использование хинтинга таким образом, чтобы контуры символов рисовались согласно геометрической точности отрисовки заложенных данных.</dd> +</dl> +<h2 id="Пример">Пример</h2> +<pre class="brush: xml"><?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></pre> +<p><strong>optimizeLegibility (первая) и geometricPrecision (вторая)</strong><br> + <img alt="text-rendering=optimizeLegibility" height="13" src="http://download.g63.ru/svg/text-rendering-optimizeLegibility.svg" width="211"><br> + <img alt="text-rendering=geometricPrecision" height="13" src="http://download.g63.ru/svg/text-rendering-geometricPrecision.svg" width="211"></p> +<p>Аналогичным образом действует {{ cssxref("text-rendering","CSS text-rendering") }}</p> +<pre class="brush: xml"><?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></pre> +<h2 id="Elements">Elements</h2> +<p>The following elements can use the <code>text-rendering</code> attribute</p> +<ul> + <li>{{ SVGElement("text") }}</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li>{{ cssxref("text-rendering","CSS text-rendering") }}</li> +</ul> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>В атрибуте <code>transform</code> перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>Нет</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><strong title="значение по умолчанию"><transform-list></strong></td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативная база</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/coords.html#TransformAttribute" title="http://www.w3.org/TR/SVG/coords.html#TransformAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="Типы_преобразований">Типы преобразований</h3> + +<dl> + <dt>matrix(<a> <b> <c> <d> <e> <f>)</dt> + <dd>Преобразование с использованием матрицы из шести элементов. Преобразование <code>matrix(a,b,c,d,e,f)</code> равнозначно применению матрицы <math display="block"><semantics><mrow><mo>(</mo><mtable rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics>,</math> которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: <math display="block"><semantics><mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>пред.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mrow><mo>(</mo><mtable><mtr><mtd><msub><mi>x</mi><mstyle><mi>нов.</mi></mstyle></msub></mtd></mtr><mtr><mtd><msub><mi>y</mi><mi>нов.</mi></msub></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><mo>=</mo><mrow><mo>(</mo><mtable><mtr><mtd><mi>a</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>c</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi><msub><mi>x</mi><mi>нов.</mi></msub><mo>+</mo><mi>d</mi><msub><mi>y</mi><mi>нов.</mi></msub><mo>+</mo><mi>f</mi></mtd></mtr><mtr><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow></mrow><annotation encoding="TeX"> \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} </annotation></semantics></math></dd> + <dt>translate(<x> [<y>])</dt> + <dd>Перенос по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(1 0 0 1 x y)</code>. Если значение <code>y</code> опущено, оно принимается равным нулю.</dd> + <dt>scale(<x> [<y>])</dt> + <dd>Масштабирование по осям <code>x</code> и <code>y</code>. Равнозначно <code>matrix(x 0 0 y 0 0)</code>. Если значение <code>y</code> опущено, оно принимается равным <code>x</code>.</dd> + <dt>rotate(<a> [<x> <y>])</dt> + <dd>Поворот на <code>a</code> градусов вокруг указанной точки. Если необязательные параметры <code>x</code> и <code>y</code> опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mo>-</mo><mo>sin</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>sin</mo><mi>a</mi></mtd><mtd><mo>cos</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} \cos a & -\sin a & 0 \\ \sin a & \cos a & 0 \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math> Если необязательные параметры <code>x</code> и <code>y</code> присутствуют, поворот будет осуществляться вокруг точки <code>(x, y)</code>. Операция равнозначна следующему списку преобразований: <code>translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)</code>.</dd> + <dt>skewX(<a>)</dt> + <dd>Наклон относительно оси <code>x</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX">\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}</annotation></semantics></math></dd> + <dt>skewY(<a>)</dt> + <dd>Наклон относительно оси <code>y</code> на <code>a</code> градусов. Операция соответствует матрице <math display="block"><semantics><mrow><mo>(</mo><mtable><mtr><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mo>tg</mo><mi>a</mi></mtd><mtd><mn>1</mn></mtd><mtd><mn>0</mn></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>)</mo></mrow><annotation encoding="TeX"> \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix} </annotation></semantics></math></dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Поворот_и_перенос_SVG-элемента">Поворот и перенос SVG-элемента</h3> + +<p>В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут <code>transform</code>. Первоначальный элемент до преобразования показан полупрозрачным.</p> + +<p>CSS (необязательный):</p> + +<pre class="brush: css">text { + font: 1em sans-serif; +}</pre> + +<p>SVG:</p> + +<pre class="brush: html"><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"<strong> </strong>fill-opacity=0.2 stroke-opacity=0.2></rect> + + <!-- Здесь мы добавим текстовый элемент, повернем и перенесем оба элемента --> + <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2"<strong> transform="translate(30) rotate(45 50 50)"</strong>></rect> + <text x="60" y="105" <strong>transform="translate(30) rotate(45 50 50)"</strong>> Hello Moz! </text> + +</svg> +</pre> + +<p>{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}</p> + +<h3 id="General_Transformation" name="General_Transformation">Общее преобразование</h3> + +<p>Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования <code>matrix(1,2,3,4,5,6)</code> и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.</p> + +<pre class="brush: html"><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> +</pre> + +<p>{{ EmbedLiveSample('General_Transformation','200px','250px') }}</p> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>transform</code>:</p> + +<ul> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("use") }}</li> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Графические элементы</a> »</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Атрибут <code>values</code> имеет два значения в зависимости от используемого контекста.</p> + +<p>Для элементов анимации атрибут <code>values</code> представляет собой разделенный точками с запятой список одного или нескольких значений. В анимации будут применены значения в порядке следования анимации. Если задан список <code>values</code>, значения атрибутов {{ SVGAttr("from") }}, {{ SVGAttr("to") }} и {{ SVGAttr("by") }} игнорируются.</p> + +<p>Для элемента {{ SVGElement("feColorMatrix") }} содержимое <code>values</code> зависит от значения атрибута {{ SVGAttr("type") }}:</p> + +<ul> + <li>Для <code>type="matrix"</code>, <code>values</code> — это список из 20 значений матрицы (А00 А01 А02 А03 А04 A10 А11... А34), разделенных пробелами и/или запятой.</li> + <li>Для <code>type="saturate"</code>, <code>values</code> — это единственное вещественное число (от 0 до 1).</li> + <li>Для <code>type="hueRotate"</code>, <code>values</code> — это одно вещественное число (градусов).</li> + <li>Для <code>type="luminanceToAlpha"</code>, <code>values</code> не применимы.</li> +</ul> + +<p>Если атрибут не указан, то поведение по умолчанию зависит от значения атрибута {{SVGAttr("type")}}.</p> + +<ul> + <li>Если <code>type="matrix"</code>, этот атрибут по умолчанию присваивается матрице идентификаторов.</li> + <li>Если <code>type="saturate"</code>, то этот атрибут по умолчанию присваивает значение 1, что приводит к получению матрицы идентификаторов.<br> + Если <code>type="hueRotate"</code>, то этот атрибут по умолчанию присваивает значение 0, что приводит к получению матрицы идентификаторов.</li> +</ul> + +<h2 id="Usage_context">Usage context</h2> + +<h3 id="For_animation_elements">For animation elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElement(feColorMatrix)_element">For the {{ SVGElement("feColorMatrix") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list> | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>values</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> + <li>{{ SVGElement("feColorMatrix") }}</li> +</ul> 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 +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Аттрибут </span></font>viewBox</code> определяет расположение и размеры окна отображения SVG.</p> + +<p>Значение атрибута <code>viewBox</code> — это набор четырех чисел: <code>min-x</code>, <code>min-y</code>, <code>width</code> и <code>height</code>, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG (не <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Viewport">браузера</a>).</p> + +<div class="hidden"> +<pre class="notranslate">html, body, svg { + height:100% +} + +svg:not(:root) { + display: inline-block; +}</pre> +</div> + +<pre class="brush: html notranslate"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> + +<p>На отображение с <code>viewBox</code> также влияет атрибут {{ SVGAttr("preserveAspectRatio") }}.</p> + +<div class="blockIndicator note"> +<p><strong>Обратите внимание: </strong>при значениях <code>width</code> и <code>height</code> меньших или равных <code>0</code> элемент не отображается</p> +</div> + +<p><br> + Пять элементов используют этот атрибут: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }} и {{ SVGElement("view") }}.</p> + +<h2 id="marker">marker</h2> + +<p>Для элемента {{SVGElement('marker')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code><marker></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>нет</em></td> + </tr> + <tr> + <th scope="row">Анимируемое</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="pattern">pattern</h2> + +<p>Для элемента {{SVGElement('pattern')}}, <code>viewBox</code> определеяет расположение и размеры содержимого шаблона.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>нет</em></td> + </tr> + <tr> + <th scope="row">Анимируемое</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="svg">svg</h2> + +<p>Для элемента {{SVGElement('svg')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code><svg></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>нет</em></td> + </tr> + <tr> + <th scope="row">Анимируемое</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="symbol">symbol</h2> + +<p>Для элемента {{SVGElement('symbol')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code><symbol></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>нет</em></td> + </tr> + <tr> + <th scope="row">Анимируемое</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="view">view</h2> + +<p>Для элемента {{SVGElement('view')}}, <code>viewBox</code> определяет расположение и размеры содержимого элемента <code><view></code>.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Значение по умолчанию</th> + <td><em>нет</em></td> + </tr> + <tr> + <th scope="row">Анимируемое</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> +</ul> 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 +--- +<div>{{SVGRef}}</div> + +<p>Атрибут <strong><code>width</code></strong> определяет горизонтальный размер элементов в пользовательской системе координат.</p> + +<p>Двадцать пять элементов используют эти атрибуты: {{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')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><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></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="feBlend">feBlend</h2> + +<p>Для {{SVGElement('feBlend')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feColorMatrix">feColorMatrix</h2> + +<p>Для {{SVGElement('feColorMatrix')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feComponentTransfer">feComponentTransfer</h2> + +<p>Для {{SVGElement('feComponentTransfer')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feComposite">feComposite</h2> + +<p>Для {{SVGElement('feComposite')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feConvolveMatrix">feConvolveMatrix</h2> + +<p>Для {{SVGElement('feConvolveMatrix')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feDiffuseLighting">feDiffuseLighting</h2> + +<p>Для {{SVGElement('feDiffuseLighting')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feDisplacementMap">feDisplacementMap</h2> + +<p>Для {{SVGElement('feDisplacementMap')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feDropShadow">feDropShadow</h2> + +<p>Для {{SVGElement('feDropShadow')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feFlood">feFlood</h2> + +<p>Для {{SVGElement('feFlood')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feGaussianBlur">feGaussianBlur</h2> + +<p>Для {{SVGElement('feGaussianBlur')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feImage">feImage</h2> + +<p>Для {{SVGElement('feImage')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feMerge">feMerge</h2> + +<p>Для {{SVGElement('feMerge')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feMorphology">feMorphology</h2> + +<p>Для {{SVGElement('feMorphology')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feOffset">feOffset</h2> + +<p>Для {{SVGElement('feOffset')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feSpecularLighting">feSpecularLighting</h2> + +<p>Для {{SVGElement('feSpecularLighting')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feTile">feTile</h2> + +<p>Для {{SVGElement('feTile')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="feTurbulence">feTurbulence</h2> + +<p>Для {{SVGElement('feTurbulence')}}, <code>width</code> определяет горизонтальный размер для отображения области примитивов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>100%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="filter">filter</h2> + +<p>Для {{SVGElement('filter')}}, <code>width</code> определяет горизонтальный размер для отображения области фильтров.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>120%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="foreignObject">foreignObject</h2> + +<p>Для {{SVGElement('foreignObject')}}, <code>width</code> определяет горизонтальный размер для отображения области ссылочных документов.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как <code>0</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для <code><foreignObject></code>.</p> + +<h2 id="image">image</h2> + +<p>Для {{SVGElement('image')}}, <code>width</code> определяет горизонтальный размер для изображения.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как ширина изображения)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для изображений.</p> + +<h2 id="mask">mask</h2> + +<p>Для {{SVGElement('mask')}}, <code>width</code> определяет горизонтальный размер области эффекта. Точный эффект этого атрибута зависит от атрибута {{SVGAttr('maskUnits')}}.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>120%</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="pattern">pattern</h2> + +<p>Для {{SVGElement('pattern')}}, <code>width</code> определяет горизонтальный размер мастящегося паттерна. Точный эффект этого атрибута зависит от атрибутов {{SVGAttr('patternUnits')}} и {{SVGAttr('patternTransform')}}.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значание</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>0</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<h2 id="rect">rect</h2> + +<p>Для {{SVGElement('rect')}}, <code>width</code> определяет горизонтальный размер прямоугольника.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (пассматривается как <code>0</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для прямоугольника.</p> + +<h2 id="svg">svg</h2> + +<p>Для {{SVGElement('svg')}}, <code>width</code> определяет горизонтальный размер отображаемой области вьюпорта SVG.</p> + +<p class="note"><strong>Примечание:</strong> В HTML документе, если оба атрибута {{SVGAttr('viewBox')}} и <code>width</code> опущены, <a href="https://svgwg.org/specs/integration/#svg-css-sizing">svg-элемент будет отображаться с шириной <code>300px</code></a></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как <code>100%</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для <code><svg></code>.</p> + +<h2 id="use">use</h2> + +<p>Для {{SVGElement('use')}}, <code>width</code> определяет горизонтальный размер для ссылочного элемента.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Значение</th> + <td><code>auto</code> | <strong><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage"><percentage></a></strong></td> + </tr> + <tr> + <th scope="row">По умолчанию</th> + <td><code>auto</code> (рассматривается как <code>0</code>)</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Да</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Примечание:</strong> Начиная с SVG2, <code>width</code> это геометрическое свойство, что означает, что этот атрибут может, также, быть использован как свойство CSS для использоавнных элементов.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментаий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('Filters 1.0', '#element-attrdef-filter-width', 'width') }}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Определение для<code> <filter></code></td> + </tr> + <tr> + <td>{{ SpecName('Filters 1.0', '#element-attrdef-filter-primitive-width', 'width') }}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Определение для фильтр-примитивов</td> + </tr> + <tr> + <td>{{SpecName("CSS Masks", "#element-attrdef-mask-width", 'width')}}</td> + <td>{{Spec2("CSS Masks")}}</td> + <td>Определение для <code><mask></code></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "geometry.html#Sizing", "width")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определено как геометрическое свойство</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "pservers.html#PatternElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Определение для <code><pattern></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "extend.html#ForeignObjectElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><foreignObject></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "pservers.html#PatternElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><pattern></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#ImageElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><image></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#SVGElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><svg></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#UseElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><use></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#FilterElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><filter></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#FilterPrimitiveWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для фильтр-примитивов</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "masking.html#MaskElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><mask></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "shapes.html#RectElementWidthAttribute", "width")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение для <code><rect></code></td> + </tr> + </tbody> +</table> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p>Этот атрибут указывает координату оси <strong><code>x</code></strong> в контексте системы координат. Точный эффект этого атрибута зависит от каждого элемента. В основном атрибут работает по оси x от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента). Его синтаксис такой же, как и для <a href="https://www.w3.org/TR/SVG11/types.html#DataTypeLength"><strong><code><length></code></strong>.</a></p> + +<p>Если атрибут <strong><code>x</code></strong> явно не указан, то эффект будет таким, как если бы значение атрибута равнялось бы <strong>0</strong>, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равно <strong>-10%</strong>.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/ru/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/ru/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимируемый</th> + <td>Да</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#AltGlyphElementXAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute" title="http://www.w3.org/TR/SVG/interact.html#CursorElementXAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#fePointLightXAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute" title="http://www.w3.org/TR/SVG/filters.html#feSpotLightXAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterElementXAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementXAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#GlyphRefElementXAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementXAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementXAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementXAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementXAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TextElementXAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementXAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveXAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementXAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute" title="http://www.w3.org/TR/SVG/text.html#TSpanElementXAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{page("/ru/SVG/Content_type","coordinate")}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> + <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>x</code>.</p> + +<ul> + <li><code><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</code></li> + <li><code>{{SVGElement("altGlyph")}}</code></li> + <li><code>{{SVGElement("fePointLight")}}</code></li> + <li><code>{{SVGElement("feSpotLight")}}</code></li> + <li><code>{{SVGElement("filter")}}</code></li> + <li><code>{{SVGElement("foreignObject")}}</code></li> + <li><code>{{SVGElement("glyphRef")}}</code></li> + <li><code>{{SVGElement("image")}}</code></li> + <li><code>{{SVGElement("pattern")}}</code></li> + <li><code>{{SVGElement("rect")}}</code></li> + <li><code>{{SVGElement("svg")}}</code></li> + <li><code>{{SVGElement("text")}}</code></li> + <li><code>{{SVGElement("use")}}</code></li> + <li><code>{{SVGElement("mask")}}</code></li> + <li><code>{{SVGElement("tref")}}</code></li> + <li><code>{{SVGElement("tspan")}}</code></li> +</ul> 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' +--- +<div>{{deprecated_header("SVG2")}}</div> + +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>SVG supports the standard XML attribute <code>xml:space</code> 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 <code>xml:space</code> 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.</p> + +<div class="note"> +<p><strong>Note:</strong> Instead of using the <code>xml:space</code> attribute you should use the {{cssxref("white-space")}} CSS property.</p> +</div> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><code><strong>default</strong></code> | <code>preserve</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#WhiteSpace" title="http://www.w3.org/TR/SVG11/text.html#WhiteSpace">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>default</dt> + <dd>Браузер удалит все символы перевода строки. Затем он преобразует все символы табуляции в символы пробелов. Затем он вырежет все начальные и конечные пробелы. И, наконец, все смежные пробелы будут объединены.</dd> + <dt>preserve</dt> + <dd>Браузер преобразует все символы перевода строки и табуляции в символы пробелов. Затем он отрендерит все символы пробелов, в том числе начальные и конечные, а также смежные. Таким образом, когда рендеринг происходит с <code>xml:space="preserve"</code>, строка "a b" (три пробела между "a" и "b") будет иметь больше расстояние между "a" и "b", чем "a b" (один пробел между "a" и "b").</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<h2 id="Elements">Elements</h2> + +<p>All the SVG elements can use the <code>xml:space</code> attribute</p> 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 +--- +<p>« <a href="/ru/docs/Web/SVG/Attribute" title="Справочник SVG атрибутов">Справочник SVG атрибутов</a></p> + +<p><span class="seoSummary">Атрибут <strong><code>y</code></strong> указывает координаты вертикальной оси системы координат в контексте объекта. В основном атрибут работает по оси y от верхнего левого угла прямоугольной области(см. документацию каждого отдельного элемента).</span></p> + +<p>Если атрибут явно не указан, его значение по умолчанию равняется <strong>0</strong>, за исключением элементов {{SVGElement ("filter")}} и {{SVGElement ("mask")}}, где значение по умолчанию равняется <strong> -10% </strong>.</p> + +<h2 id="Использование">Использование</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категории</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Значение</th> + <td><a href="/ru/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Анимация</th> + <td>Возможно</td> + </tr> + <tr> + <th scope="row">Нормативные документы (en)</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/text.html#AltGlyphElementYAttribute">SVG 1.1 (2nd Edition): altGlyph element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/interact.html#CursorElementYAttribute">SVG 1.1 (2nd Edition): cursor element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#fePointLightYAttribute">SVG 1.1 (2nd Edition): fePointLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#feSpotLightYAttribute">SVG 1.1 (2nd Edition): feSpotLight element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterElementYAttribute">SVG 1.1 (2nd Edition): filter element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementYAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#GlyphRefElementYAttribute">SVG 1.1 (2nd Edition): glyphRef element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementYAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementYAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementYAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementYAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TextElementYAttribute">SVG 1.1 (2nd Edition): text element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementYAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveYAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementYAttribute">SVG 1.1 (2nd Edition): mask element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/text.html#TSpanElementYAttribute">SVG 1.1 (2nd Edition): tspan element</a></td> + </tr> + </tbody> +</table> + +<p>{{page("/ru/SVG/Content_type","coordinate")}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml line-numbers language-xml"><code class="language-xml"><span class="prolog token"><?xml version="1.0"?></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>svg</span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> + <span class="attr-name token">viewBox</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0 0 120 120<span class="punctuation token">"</span></span> + <span class="attr-name token">xmlns</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.w3.org/2000/svg<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span><span class="punctuation token">/></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>svg</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Элементы">Элементы</h2> + +<p>Следующие элементы могут использовать атрибут <code>y</code>.</p> + +<ul> + <li><a href="/ru/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("foreignObject")}}</li> + <li>{{SVGElement("glyphRef")}}</li> + <li>{{SVGElement("image")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("rect")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("use")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> |