diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:51:05 +0100 |
commit | c058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch) | |
tree | df20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/svg/element | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2 translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip |
unslug ru: move
Diffstat (limited to 'files/ru/web/svg/element')
21 files changed, 2568 insertions, 0 deletions
diff --git a/files/ru/web/svg/element/a/index.html b/files/ru/web/svg/element/a/index.html new file mode 100644 index 0000000000..97c2daf793 --- /dev/null +++ b/files/ru/web/svg/element/a/index.html @@ -0,0 +1,151 @@ +--- +title: a +slug: Web/SVG/Элемент/a +tags: + - SVG +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p>SVG элемент <strong><a></strong> создаёт гиперссылку на другие веб-страницы, файлы, позиции в этом же документе, email-адреса или другие URL. Очень похож на элемент HTML {{htmlelement("a")}}.</p> + +<p>Элемент <code><a></code> является контейнером. Это означает, что вы можете обернуть текст в ссылку (как в HTML). Таким же образом можно обернуть фигуру.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">@namespace svg url(http://www.w3.org/2000/svg); +html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Ссылка в фигуре --> + <a href="/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- Ссылка в тексте --> + <a href="/docs/Web/SVG/Element/text"> + <text x="50" y="90" text-anchor="middle"> + &lt;circle&gt; + </text> + </a> +</svg></pre> + +<pre class="brush: js">/* Так как SVG не предоставляет визуальных стилей по-умолчанию для ссылок, + будет лучше задать самостоятельно */ + +@namespace svg url(http://www.w3.org/2000/svg); +/* Необходимо выделить только SVG элементы <a>, но не HTML. + Смотрите предупреждение ниже */ + +svg|a:link, svg|a:visited { + cursor: pointer; +} + +svg|a text, +text svg|a { + fill: blue; /* Даже для текста SVG использует заливку */ + text-decoration: underline; +} + +svg|a:hover, svg|a:active { + outline: dotted 1px blue; +}</pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> + +<div class="blockIndicator warning"> +<p>Поскольку этот элемент разделяет своё имя с <a href="/ru/docs/Web/HTML/Element/A">элементом HTML <code><a></code></a>, выбор <code>a</code> через CSS или <a href="/ru/docs/Web/API/Document/querySelector"><code>querySelector</code></a> может выбрать не тот тип элемента. Попробуйте <a href="/ru/docs/Web/CSS/@namespace">правило <code>@namespace</code></a>, чтобы разделять их.</p> +</div> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt> + <dd>Указывает браузеру выполнить загрузку по {{Glossary("URL")}}, вместо того, чтобы переходить по нему. Таким образом пользователю будет предложено сохранить файл локально.<br> + <small><em>Тип</em>: <strong><string></strong> ;<em>Значение по-умолчанию</em>: <em>none</em>;<em>Анимируем</em>: <strong>нет</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>{{Glossary("URL")}} или фрагмент URL для перехода.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{htmlattrxref("hreflang", "a")}}</dt> + <dd>URL на человеческом языке или фрагмент URL для перехода.<br> + <small><em>Тип</em>: <strong><string></strong>; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt> + <dd>Разделённый пробелами список URL при переходе по которым браузер будет отправлять <code><a href="/ru/docs/Web/HTTP/Methods/POST">POST</a></code> запросы с телом <code>PING</code> (в фоне). Обычно используется для трекинга.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong>; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>нет</strong></small></dd> + <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt> + <dd>Какой <a href="/ru/docs/Web/HTTP/Заголовки/Referer">referrer</a> отправить при получении {{Glossary("URL")}}.<br> + <small><em>Тип</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>нет</strong></small></dd> + <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt> + <dd>Отношение между целевым объектом и объектом link.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("target")}}</dt> + <dd>Где отобразить переход {{Glossary("URL")}}.<br> + <small><em>Тип</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>Значение по-умолчанию</em>: <code>_self</code>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{htmlattrxref("type", "a")}}</dt> + <dd>{{Glossary("MIME type")}} для ссылки URL.<br> + <small><em>Тип</em>: <strong><string></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>URL или фрагмент URL, на который указывает гиперссылка. Может понадобиться для обратной совместимости со старыми браузерами.<br> + <small><em>Тип</em>: <strong><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Значение по-умолчанию</em>: <em>none</em>; <em>Анимируем</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Глобальные_аттрибуты">Глобальные аттрибуты</h3> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Наиболее используемые: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Наиболее используемые: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="https://wiki.developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Наиболее используемые: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink Attributes</dt> + <dd><small>Наиболее используемые: {{SVGAttr("xlink:title")}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p>Этот элемент реализует интерфейс <code><a href="/ru/docs/DOM/SVGAElement" title="DOM/SVGAElement">SVGAElement</a></code>.</p> + +<h2 id="Примечания_к_использованию">Примечания к использованию</h2> + +<p>{{svginfo}}</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", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Аттрибут {{SVGAttr("xlink:href")}} заменён на {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</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.elements.a")}}</p> diff --git a/files/ru/web/svg/element/animate/index.html b/files/ru/web/svg/element/animate/index.html new file mode 100644 index 0000000000..90988b58f8 --- /dev/null +++ b/files/ru/web/svg/element/animate/index.html @@ -0,0 +1,81 @@ +--- +title: <animate> +slug: Web/SVG/Элемент/animate +tags: + - NeedsUpdate + - SVG + - SVG Animation + - svg анимация +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<p> Тег <animate> может быть помещен внутри какой-то фигуры, например, <circle> . Он задает анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определенным интервалом.</p> + +<h2 id="Использование">Использование</h2> + +<p>{{svginfo}}</p> + +<h2 id="Пример">Пример</h2> + +<p>» <a href="/files/3258/animate.svg">animate.svg</a></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationEvent">Animation event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationTiming">Animation timing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Атрибуты_элемента">Атрибуты элемента</h3> + +<ul> + <li>{{SVGAttr("attributeName")}}</li> + <li>{{SVGAttr("attributeType")}}</li> + <li>{{SVGAttr("from")}}</li> + <li>{{SVGAttr("to")}}</li> + <li>{{SVGAttr("dur")}}</li> + <li>{{SVGAttr("repeatCount")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Элемент реализует <code><a href="/en-US/docs/Web/DOM/SVGAnimateElement">SVGAnimateElement</a></code> интерфейс .</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('SVG1.1', 'animate.html#AnimateElement', '<animate>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддерживаемые_браузеры">Поддерживаемые браузеры</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.elements.animate")}}</p> + +<p> </p> diff --git a/files/ru/web/svg/element/animatemotion/index.html b/files/ru/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..3b1259dcb3 --- /dev/null +++ b/files/ru/web/svg/element/animatemotion/index.html @@ -0,0 +1,112 @@ +--- +title: <animateMotion> +slug: Web/SVG/Элемент/animateMotion +tags: + - SVG + - svg анимация + - Элемент +translation_of: Web/SVG/Element/animateMotion +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><animateMotion></code></strong> вызывает перемещение ссылочного элемента вдоль пути движения.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/ru/docs/SVG/Attribute#Conditional_processing_attributes" title="en/SVG/Attribute#ConditionalProccessing">Условные атрибуты обработки</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Основные атрибуты</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_event_attributes" title="en/SVG/Attribute#AnimationEvent">Атрибуты события анимации</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#XLink_attributes" title="en/SVG/Attribute#XLink">Атрибуты Xlink</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_timing_attributes" title="en/SVG/Attribute#AnimationTiming">Атрибуты времени анимации</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_value_attributes" title="en/SVG/Attribute#AnimationValue">Величина атрибутов анимации</a> » </li> + <li><a href="/ru/docs/SVG/Attribute#Animation_addition_attributes" title="en/SVG/Attribute#AnimationAddition">Атрибуты добавления анимации</a> » </li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Собственные_атрибуты">Собственные атрибуты</h3> + +<ul> + <li>{{SVGAttr("calcMode")}}</li> + <li>{{SVGAttr("path")}}</li> + <li>{{SVGAttr("keyPoints")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("origin")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует интерфейс {{domxref("SVGAnimateMotionElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[18-20]"><?xml version="1.0"?> +<svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Рисуем серый контур движения с двумя + маленькими кружками в ключевых точках --> + <path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none" + d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" /> + <circle cx="10" cy="110" r="3" fill="lightgrey" /> + <circle cx="110" cy="10" r="3" fill="lightgrey" /> + + <!-- Рисуем красный круг, который будет перемещаться + вдоль траектории движения. --> + <circle cx="" cy="" r="5" fill="red"> + + <!-- Определяем анимацию пути движения --> + <animateMotion dur="6s" repeatCount="indefinite"> + <mpath xlink:href="#theMotionPath"/> + </animateMotion> + </circle> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример", 120, 120)}}</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("SVG Animations 2", "#AnimateMotionElement", "<animateMotion>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'animate.html#AnimateMotionElement', '<animateMotion>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> + +<p>{{Compat("svg.elements.animateMotion")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("mpath")}}</li> +</ul> diff --git a/files/ru/web/svg/element/circle/index.html b/files/ru/web/svg/element/circle/index.html new file mode 100644 index 0000000000..3f1907b3bf --- /dev/null +++ b/files/ru/web/svg/element/circle/index.html @@ -0,0 +1,109 @@ +--- +title: <circle> +slug: Web/SVG/Элемент/circle +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p><code>Элемент circle</code> — базовая SVG фигура, используется для создания кругов c помощью координат центра и размера радиуса.</p> + +<h2 id="Информация">Информация</h2> + +<p>{{svginfo}}</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">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">version</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1.1<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>circle</span> <span class="attr-name token">cx</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">cy</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>60<span class="punctuation token">"</span></span> <span class="attr-name token">r</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>50<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> + + + +<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Унаследованные">Унаследованные</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты</a> »</li> + <li><a href="/en-US/SVG/Attribute#Core_attributes">Ключевые атрибуты</a> »</li> + <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">Атрибуты графических событий</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation_attributes">Атрибуты представления</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Особые">Особые</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> +</ul> + +<p>Координата центра окружности по оси x.</p> + +<ul> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<p>Координата центра окружности по оси y.</p> + +<ul> + <li>{{ SVGAttr("r") }}</li> +</ul> + +<p>Радиус окружности.</p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс</span></span> {{ domxref("SVGCircleElement") }}.</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', 'shapes.html#CircleElement', '<circle>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Исходное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</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.elements.circle")}}</p> + + + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> + <li><a href="https://www.svg-expert.ru/svg/circle/">SVG Circle</a></li> +</ul> diff --git a/files/ru/web/svg/element/defs/index.html b/files/ru/web/svg/element/defs/index.html new file mode 100644 index 0000000000..0312b05e34 --- /dev/null +++ b/files/ru/web/svg/element/defs/index.html @@ -0,0 +1,101 @@ +--- +title: <defs> +slug: Web/SVG/Элемент/defs +tags: + - NeedsUpdate + - SVG + - Контейнер SVG + - Элемент +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <strong><code><defs></code></strong>. Объекты, созданные внутри элемента <code><defs></code> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.</p> + +<p>Создание подобных элементов внутри элемента <code><defs></code> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.</p> + +<p><code><defs></code> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<p><em>Нет</em></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM </h2> + +<p>Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"><svg width="80px" height="30px" viewBox="0 0 80 30" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="Gradient01"> + <stop offset="20%" stop-color="#39F" /> + <stop offset="90%" stop-color="#F3F" /> + </linearGradient> + </defs> + + <rect x="10" y="10" width="60" height="10" + fill="url(#Gradient01)" /> +</svg> +</pre> + +<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#Head", "<defs>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</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.elements.defs")}}</p> + +<p> </p> + +<h2 id="Связанные_темы">Связанные темы</h2> + +<ul> + <li>{{SVGElement("use")}}</li> +</ul> diff --git a/files/ru/web/svg/element/ellipse/index.html b/files/ru/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..f04083c1e1 --- /dev/null +++ b/files/ru/web/svg/element/ellipse/index.html @@ -0,0 +1,129 @@ +--- +title: <ellipse> +slug: Web/SVG/Элемент/ellipse +tags: + - NeedsUpdate +translation_of: Web/SVG/Element/ellipse +--- +<div>{{SVGRef}}</div> + +<p>Элемент <code>ellipse</code> — базовая SVG фигура, используемая для создания эллипсов с помощью координат центра и обоих радиусов.</p> + +<div class="blockIndicator note"> +<p>Сам по себе элемент <code>ellipse </code>не позволяет задать точное его расположение (например, нельзя сразу отобразить эллипс, повёрнутый на 45<strong>°</strong>), однако его можно повернуть с помощью атрибута {{SVGAttr("transform")}}.</p> +</div> + + + +<div class="hidden"> +<pre><code>html,body,svg { height:100% }</code></pre> +</div> + +<pre><code><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="100" cy="50" rx="100" ry="50" /> +</svg></code></pre> + +<p>{{EmbedLiveSample('Exemple', 100, '100%')}}</p> + + + +<h2 id="Атрибуты">Атрибуты</h2> + + + +<dl> + <dt>{{SVGAttr("cx")}}</dt> + <dd>Позиция эллипса по x.<br> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("cy")}}</dt> + <dd>Позиция эллипса по y.<br> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("rx")}}</dt> + <dd>Радиус эллипса по x.<br> + <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ;<em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("ry")}}</dt> + <dd>Радиус эллипса по y.<br> + <small><em>Тип значения</em>: <code>auto</code>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Значение по умолчанию</em>: <code>auto</code>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Этот атрибут позволяет установить длину всего пути.<br> + <small><em>Тип значения</em>: <a href="https://developer.mozilla.org/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчани</em>: <em>нет</em>; <em>Можно анимировать</em>: <strong>да</strong></small></dd> + <dd> + + + <div class="blockIndicator note"> + <p><strong>Обратите внимание:</strong> Начиная с SVG2, <code>cx</code>, <code>cy</code>, <code>rx</code> и <code>ry</code> это <em>Геометрические свойства</em>. Это означает, что они могут быть использованы как CSS свойства элемента.</p> + </div> + + <h3 id="Глобальные_Атрибуты">Глобальные Атрибуты</h3> + </dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Аттрибуты событий</dt> + <dd><small><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты событий</a>, <a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> + <dt><a href="https://developer.mozilla.org/docs/Web/SVG/Attribute/Presentation">Атрибуты представления</a></dt> + <dd><small>Самые важные: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA-Атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>,<code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>,<code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>,<code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>,<code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + + + + + +<h2 id="Информация">Информация</h2> + +<p>{{svginfo}}</p> + + + +<h2 id="Пример">Пример</h2> + +<p>» <a href="https://developer.mozilla.org/files/3253/ellipse.svg">ellipse.svg</a></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Этот элемент</span> <span class="hps">реализует интерфейс </span></span>{{ domxref("SVGEllipseElement") }}.</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', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Исходное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</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.elements.ellipse")}}</p> + + + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li>{{SVGElement("circle")}}</li> +</ul> diff --git a/files/ru/web/svg/element/feblend/index.html b/files/ru/web/svg/element/feblend/index.html new file mode 100644 index 0000000000..acd3547dcd --- /dev/null +++ b/files/ru/web/svg/element/feblend/index.html @@ -0,0 +1,115 @@ +--- +title: <feBlend> +slug: Web/SVG/Элемент/feBlend +tags: + - фильтры +translation_of: Web/SVG/Element/feBlend +--- +<div>{{SVGRef}}</div> + +<p><a href="/en-US/docs/Web/SVG">SVG </a>фильтр примитивна <strong><code><feBlend></code></strong> объединяет два объекта, управляемых определенным режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоев. Режим определяется атрибутом {{SVGAttr("mode")}}.</p> + +<h2 id="Используемый_контекст">Используемый контекст</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Filter_primitive_attributes">Filter primitive attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="Специальные_атрибуты">Специальные атрибуты</h3> + +<ul> + <li>{{SVGAttr("in")}}</li> + <li>{{SVGAttr("in2")}}</li> + <li>{{SVGAttr("mode")}}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Этот элемент реализует интерфейс {{domxref("SVGFEBlendElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[5-6]"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="spotlight"> + <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" + flood-color="green" flood-opacity="1"/> + <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"/> + </filter> + </defs> + + <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" + x="10%" y="10%" width="80%" height="80%" + style="filter:url(#spotlight);"/> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", 200, 200)}}</p> + +<h2 id="Спецификации">Спецификации</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("Filters 1.0", "#feBlendElement", "<feBlend>")}}</td> + <td>{{Spec2("Filters 1.0")}}</td> + <td>Аутсорсинг режимов наложения на{{SpecName("Compositing", "#ltblendmodegt")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "filters.html#feBlendElement", "<feBlend>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первое определение</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("svg.elements.feBlend")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("set")}}</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><a href="/en-US/docs/Web/SVG/Tutorial/Filter_effects">SVG tutorial: Filter effects</a></li> +</ul> diff --git a/files/ru/web/svg/element/foreignobject/index.html b/files/ru/web/svg/element/foreignobject/index.html new file mode 100644 index 0000000000..64e32d019f --- /dev/null +++ b/files/ru/web/svg/element/foreignobject/index.html @@ -0,0 +1,119 @@ +--- +title: <foreignObject> +slug: Web/SVG/Элемент/foreignObject +translation_of: Web/SVG/Element/foreignObject +--- +<div>{{SVGRef}}<br> +Элемент <strong><code><foreignObject></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет включать другое пространство имен XML.<br> +В контексте браузера это, скорее всего, XHTML / HTML.</div> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[16,27]"><svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <style> + polygon { fill: black } + + div { + color: white; + font:18px serif; + height: 100%; + overflow: auto; + } + </style> + + <polygon points="5,5 195,10 185,185 10,195" /> + + <!-- Типичный пример использования: встраивание HTML-текста в SVG --> + <foreignObject x="20" y="20" width="160" height="160"> + <!-- +В контексте SVG, внедренного в HTML, пространство имен XHTML может и следует избегать, +но это обязательно в контексте документа SVG + --> + <div xmlns="http://www.w3.org/1999/xhtml"> + <em>- Смолчал хозяин, да и то, что мог сказать + - Мне невдомёк, но во владениях чертога + Поможет дом срубить да судьбы вам связать. + Не веришь ежли - испроси у Бога...</em> + </div> + </foreignObject> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr("height")}}</dt> + <dd>Этот атрибут определяет высоту прямоугольника.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>Этот атрибут определяет ширину прямоугольника.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Этот атрибут определяет координату x контейнера svg.<br> + Это не влияет на внешние элементы SVG.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>Этот атрибут определяет координату Y контейнера SVG.<br> + Это не влияет на внешние элементы SVG.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Starting with SVG2 <code>x</code>, <code>y</code>, <code>width</code>, and <code>height</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p> +</div> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Примечания_по_использованию">Примечания по использованию</h2> + +<p>{{svginfo}}</p> + +<h2 id="Характеристики">Характеристики</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', 'embedded.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + + + +<p>{{Compat("svg.elements.foreignObject")}}</p> diff --git a/files/ru/web/svg/element/g/index.html b/files/ru/web/svg/element/g/index.html new file mode 100644 index 0000000000..c425f3c5b8 --- /dev/null +++ b/files/ru/web/svg/element/g/index.html @@ -0,0 +1,98 @@ +--- +title: <g> +slug: Web/SVG/Элемент/g +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/g +--- +<div>{{SVGRef}}</div> + +<p><span class="seoSummary">Элемент g используется для группировки других SVG элементов.</span> Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью {{SVGElement("use")}}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html notranslate"><svg viewBox="0 0 95 50" + xmlns="http://www.w3.org/2000/svg"> + <g stroke="green" fill="white" stroke-width="5"> + <circle cx="25" cy="25" r="15"/> + <circle cx="40" cy="25" r="15"/> + <circle cx="55" cy="25" r="15"/> + <circle cx="70" cy="25" r="15"/> + </g> +</svg> +</pre> + +<p>{{EmbedLiveSample("Example",220,130)}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<p><em>Нет специфичных атрибутов.</em></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p>Этот элемент реализует <code><a href="/en-US/docs/DOM/SVGGElement">SVGGElement</a></code> интерейс.</p> + +<h2 id="Спецификации">Спецификации</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', 'struct.html#GElement', '<g>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#Groups', '<g>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</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.elements.g")}}</p> + + + +<h2 id="Смотрите_также">Смотрите также:</h2> + + + +<ul> + <li>{{SVGElement("use")}}</li> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("symbol")}}</li> + <li><a href="http://tutorials.jenkov.com/svg/g-element.html">SVG элемент g</a></li> +</ul> diff --git a/files/ru/web/svg/element/image/index.html b/files/ru/web/svg/element/image/index.html new file mode 100644 index 0000000000..e417a4ac65 --- /dev/null +++ b/files/ru/web/svg/element/image/index.html @@ -0,0 +1,94 @@ +--- +title: <image> +slug: Web/SVG/Элемент/image +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/image +--- +<div>{{SVGRef}}</div> + +<p>Элемент <image> позволяет включить растровые изображения в SVG документ.</p> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink">Xlink attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("width")}}</li> + <li>{{SVGAttr("height")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the <code><a href="/en-US/docs/Web/API/SVGImageElement">SVGImageElement</a></code> interface.</p> + +<h2 id="Пример">Пример</h2> + +<p>Базовый рендеринг PNG изображения в качестве объекта SVG:</p> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html notranslate"><svg width="200" height="200" + xmlns="http://www.w3.org/2000/svg"> + <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> +</svg> +</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Пример", 250, 260)}}</p> + +<h2 id="Спецификации">Спецификации</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', 'embedded.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '<image>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">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.elements.image")}}</p> diff --git a/files/ru/web/svg/element/index.html b/files/ru/web/svg/element/index.html new file mode 100644 index 0000000000..b65942e344 --- /dev/null +++ b/files/ru/web/svg/element/index.html @@ -0,0 +1,253 @@ +--- +title: Справочник SVG элементов +slug: Web/SVG/Элемент +tags: + - SVG + - SVG Reference + - Руководство +translation_of: Web/SVG/Element +--- +<p>« <a href="/ru/docs/Web/SVG" title="SVG">SVG</a> / <a href="/ru/docs/Web/SVG/Attribute" title="SVG/Attribute">Справочник SVG атрибутов</a> »</p> + +<h2 id="SVG_элементы">SVG элементы</h2> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> +<span id="C">B C</span> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> +<span id="D">D</span> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> +<span id="F">F</span> + +<ul> + <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("feDistantLight")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> +<span id="G">G</span> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> +<span id="H">H</span> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> + <li>{{SVGElement("hkern")}}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> +<span id="L">J K L</span> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("mesh")}}</li> + <li>{{SVGElement("meshgradient")}}</li> + <li>{{SVGElement("meshpatch")}}</li> + <li>{{SVGElement("meshrow")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> +<span id="P">N O P</span> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> +<span id="R">Q R</span> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("solidcolor")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> +<span id="V">V — Z</span> + +<ul> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="Элементы_SVG_по_категориям">Элементы SVG по категориям</h2> + +<h3 id="Элементы_анимации">Элементы анимации</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("discard")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="Базовые_фигуры">Базовые фигуры</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Контейнеры">Контейнеры</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Элементы_описания">Элементы описания</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Фильтры">Фильтры</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="Элементы_шрифта">Элементы шрифта</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="Градиентные_элементы">Градиентные элементы</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Графические_элементы">Графические элементы</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}} </p> + +<h3 id="Элементы_ссылки_на_графику">Элементы ссылки на графику</h3> + +<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> + +<h3 id="Источники_света">Источники света</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}} </p> + +<h3 id="Непрозрачные_элементы">Непрозрачные элементы</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("defs")}}, {{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("meshgradient")}}, {{SVGElement("metadata")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("symbol")}}, {{SVGElement("title")}} </p> + +<h3 id="Элементы_сервера_печати">Элементы сервера печати</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}} </p> + +<h3 id="Отличительные_элементы">Отличительные элементы</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("foreignObject")}}, {{SVGElement("g")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("text")}}, {{SVGElement("textPath")}}, {{SVGElement("tspan")}}, {{SVGElement("unknown")}}, {{SVGElement("use")}} </p> + +<h3 id="Элементы_формы">Элементы формы</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Структурные_элементы">Структурные элементы</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Элементы_текстового_контента">Элементы текстового контента</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Текстовые_контентные_дочерние_элементы">Текстовые контентные дочерние элементы</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Некатегоризированные_элементы">Некатегоризированные элементы</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("hatchpath")}}, {{SVGElement("meshpatch")}}, {{SVGElement("meshrow")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}} </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute">Ссылка на атрибут SVG</a> </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial">Учебник SVG</a> </li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model#SVG_interfaces">Ссылка на интерфейс SVG</a> </li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/ru/web/svg/element/line/index.html b/files/ru/web/svg/element/line/index.html new file mode 100644 index 0000000000..b7f75c6a96 --- /dev/null +++ b/files/ru/web/svg/element/line/index.html @@ -0,0 +1,104 @@ +--- +title: <line> +slug: Web/SVG/Элемент/line +tags: + - SVG +translation_of: Web/SVG/Element/line +--- +<div> {{SVGRef}}</div> + +<p>Элемент <strong><code><line></code></strong> одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.</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"> + <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> + + <!-- Если вы не укажете цвет контура, + линия не будет видна --> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr('x1')}}</dt> + <dd>Определяет координату начальной точки линии по оси x .<br> + <small><em>Тип значения:</em> <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr('x2')}}</dt> + <dd>Определяет координату конечной точки линии по оси x.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr('y1')}}</dt> + <dd>Определяет координату начальной точки линии по оси y.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr('y2')}}</dt> + <dd>Определяет координату конечной точки линии по оси y.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>|<a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; А<em>нимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Определяет общую длину пути в пользовательских единицах.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; А<em>нимируемый</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>В первую очередь: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты оформления (стилей)</a> </dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибуты условной обработки</a></dt> + <dd><small>В первую очередь: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты события</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Глобальные атрибуты события</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Графические атрибуты события</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Атрибуты презентации</a></dt> + <dd><small>В превую очередь: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Атрибуты ARIA</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Спецификации">Спецификации</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', 'shapes.html#LineElement', '<line>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#LineElement', '<line>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</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.elements.line")}}</p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также:</h2> + +<ul> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("path")}}</li> + <li><a href="https://www.svg-expert.ru/svg/line/">SVG Line - описание и примеры</a></li> +</ul> diff --git a/files/ru/web/svg/element/lineargradient/index.html b/files/ru/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..37ab6a334d --- /dev/null +++ b/files/ru/web/svg/element/lineargradient/index.html @@ -0,0 +1,105 @@ +--- +title: <linearGradient> +slug: Web/SVG/Элемент/linearGradient +tags: + - NeedsUpdate + - SVG + - SVG градиент + - Справка + - Элемент +translation_of: Web/SVG/Element/linearGradient +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><linearGradient></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Атрибуты Xlink</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> + +<ul> + <li>{{SVGAttr("gradientUnits")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("x1")}}</li> + <li>{{SVGAttr("y1")}}</li> + <li>{{SVGAttr("x2")}}</li> + <li>{{SVGAttr("y2")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует {{domxref("SVGLinearGradientElement")}} интерфейс.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: html"><svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="green"/> + <stop offset="95%" stop-color="gold"/> + </linearGradient> + </defs> + + <rect fill="url(#MyGradient)" + x="10" y="10" width="100" height="100"/> +</svg></pre> + +<p>{{EmbedLiveSample("Example", 120, 120, "https://mdn.mozillademos.org/files/10061/svg-lineargradient.png")}}</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', 'pservers.html#LinearGradientElement', '<linearGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<div id="compat-desktop"> +<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.elements.linearGradient")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("stop")}}</li> +</ul> diff --git a/files/ru/web/svg/element/path/index.html b/files/ru/web/svg/element/path/index.html new file mode 100644 index 0000000000..7dc97ca989 --- /dev/null +++ b/files/ru/web/svg/element/path/index.html @@ -0,0 +1,98 @@ +--- +title: <path> +slug: Web/SVG/Элемент/path +translation_of: Web/SVG/Element/path +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><path></code></strong> является общим элементом для описания фигуры. Все базовые фигуры могут быть созданы с помощью элемента path.</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 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, 100)}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("d")}}</dt> + <dd>Этот атрибут определяет форму.<br> + <small><em>Тип значения</em>: <strong><string></strong> ; <em>Значеие по умолчанию</em>: <code>''</code>; <em>Анимирование</em>: <strong>Да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Этот атрибут позволяет указывать общую длину в пользовательских единицах.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значеие по умолчанию</em>:<em>нет</em>; <em>Анимирование</em>: <strong>Да</strong></small></dd> +</dl> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Атрибуты ядра</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты стиля</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Атрибуты условной обработки</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты событий</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Атрибуты глобальных событий</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Использование">Использование</h2> + +<p>{{svginfo}}</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("SVG Paths", "#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG Paths")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#PathElement", "<path>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</h2> + +<p>div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, перейдите на https://github.com/mdn/browser-compat-data и отправьте pull request на изменение.</p> + +<p>{{Compat("svg.elements.path")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Paths">The MDN SVG "Getting Started" tutorial : Path</a></li> +</ul> diff --git a/files/ru/web/svg/element/pattern/index.html b/files/ru/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..2d572737d3 --- /dev/null +++ b/files/ru/web/svg/element/pattern/index.html @@ -0,0 +1,125 @@ +--- +title: <pattern> +slug: Web/SVG/Элемент/pattern +tags: + - SVG +translation_of: Web/SVG/Element/pattern +--- +<div>{{SVGRef}}<br> +Элемент <strong><code><pattern></code></strong> определяет графический объект, который может быть перерисован с повторяющимися координатами <strong>x</strong> и <strong>y</strong> («мозаичным»), чтобы покрыть область.</div> + +<div><br> +На ссылку <code><pattern></code> ссылаются атрибуты {{SVGAttr("fill")}} и / или {{SVGAttr("stroke")}} на других <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes">графических элементах</a> , чтобы заполнить или обвести эти элементы указанным шаблоном. </div> + +<div> </div> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="star" viewBox="0,0,10,10" width="10%" height="10%"> + <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> + </pattern> + </defs> + + <circle cx="50" cy="50" r="50" fill="url(#star)"/> + <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr("height")}}</dt> + <dd>Этот атрибут определяет высоту плитки шаблона.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a>; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>Этот атрибут по умолчанию ссылается на пример шаблона для <code><pattern></code><br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("patternContentUnits")}}</dt> + <dd>Этот атрибут определяет систему координат содержимого {{ SVGElement("pattern") }}. <br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>userSpaceOnUse</code>; <em>Animatable</em>: <strong>yes</strong></small> + <p class="note"><strong>Сноска:</strong> Этот атрибут не действует, если в элементе <code><pattern></code> указан атрибут <code>viewBox</code>.</p> + </dd> + <dt>{{SVGAttr("patternTransform")}}</dt> + <dd>Этот атрибут содержит определение необязательного дополнительного преобразования из системы координат шаблона в целевую систему координат.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#Transform-list"><transform-list></a></strong>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("patternUnits")}}</dt> + <dd>Этот атрибут определяет систему координат для атрибутов <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code>. <br> + <small><em>Value type</em>: <code>userSpaceOnUse</code>|<code>objectBoundingBox</code>; <em>Default value</em>: <code>objectBoundingBox</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>Этот атрибут определяет, как фрагмент svg должен быть деформирован, если он встроен в контейнер с другим соотношением сторон.<br> + <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd>Этот атрибут определяет границы области просмотра SVG для фрагмента шаблона.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd>Этот атрибут определяет ширину плитки шаблона.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Этот атрибут определяет смещение координаты x мозаичного изображения.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>Этот атрибут ссылается на пример шаблона, предоставляющего значения по умолчанию для атрибутов <code><pattern></code>.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a>; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small> + <p class="note"><strong>Сноска:</strong> Для браузеров, реализующих <code>href</code>, если заданы как <code>href</code>, так и <code>xlink:href</code>, <code>xlink:href</code> будет игнорироваться, используя только <code>href</code>.</p> + </dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>Этот атрибут определяет смещение координат y мозаичного элемента.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink Attributes</dt> + <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Нотации">Нотации</h2> + +<p>{{svginfo}}</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', 'pservers.html#Patterns', '<pattern>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#Patterns', '<pattern>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_браузера">Совместимость браузера</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.elements.pattern")}}</p> diff --git a/files/ru/web/svg/element/polygon/index.html b/files/ru/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..b1baf626a3 --- /dev/null +++ b/files/ru/web/svg/element/polygon/index.html @@ -0,0 +1,95 @@ +--- +title: <polygon> +slug: Web/SVG/Элемент/polygon +tags: + - SVG +translation_of: Web/SVG/Element/polygon +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><polygon></code></strong> описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент {{SVGElement("polyline")}}.</p> + +<div id="Exemple"> +<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"> + <!-- Example of a polygon with the default fill --> + <polygon points="0,100 50,25 50,75 100,0" /> + + <!-- Example of the same polygon shape with stroke and no fill --> + <polygon points="100,100 150,25 150,75 200,0" + fill="none" stroke="black" /> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt>{{SVGAttr('points')}}</dt> + <dd>Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a>+ ; <em>Значение по умолчанию</em>: <code>""</code>; <em>Анимируемый</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Значение по умолчанию</em>: <em>none</em>; <em>Анимируемый</em>: <strong>да</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Основные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Атрибуты стилизации</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Условные атрибуты</a></dt> + <dd><small>Самые важные: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты событий</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Атрибуты глобальных событий</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Атрибуты графических событий</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</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', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#PolygonElement', '<polygon>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + + + +<p>{{Compat("svg.elements.polygon")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>Другие базовые фигуры SVG: {{ SVGElement('circle') }}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, <strong>{{ SVGElement('polyline') }}</strong>, <strong>{{ SVGElement('rect') }}</strong></li> +</ul> diff --git a/files/ru/web/svg/element/radialgradient/index.html b/files/ru/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..04906d4fd5 --- /dev/null +++ b/files/ru/web/svg/element/radialgradient/index.html @@ -0,0 +1,108 @@ +--- +title: <radialGradient> +slug: Web/SVG/Элемент/radialGradient +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/radialGradient +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><radialGradient></code></strong> <a href="/en-US/docs/Web/SVG">SVG</a> позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты презентации</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#XLink_attributes">Атрибуты Xlink</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> + +<ul> + <li>{{SVGAttr("gradientUnits")}}</li> + <li>{{SVGAttr("gradientTransform")}}</li> + <li>{{SVGAttr("cx")}}</li> + <li>{{SVGAttr("cy")}}</li> + <li>{{SVGAttr("r")}}</li> + <li>{{SVGAttr("fx")}}</li> + <li>{{SVGAttr("fy")}}</li> + <li>{{SVGAttr("fr")}}</li> + <li>{{SVGAttr("spreadMethod")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_интерфейс">DOM интерфейс</h2> + +<p>Этот элемент реализует {{domxref("SVGRadialGradientElement")}} интерфейс.</p> + +<h2 id="Пример">Пример</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="120" height="120" viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <radialGradient id="exampleGradient"> + <stop offset="10%" stop-color="gold"/> + <stop offset="95%" stop-color="green"/> + </radialGradient> + </defs> + + <circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/> +</svg></pre> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample("Example", 120, 120)}}</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', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>Добавлен атрибут <code>fr</code></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'pservers.html#RadialGradients', '<radialGradient>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</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> + +<p>{{Compat("svg.elements.radialGradient")}}</p> +</div> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{SVGElement("linearGradient")}}</li> +</ul> diff --git a/files/ru/web/svg/element/rect/index.html b/files/ru/web/svg/element/rect/index.html new file mode 100644 index 0000000000..8e4b7c9af7 --- /dev/null +++ b/files/ru/web/svg/element/rect/index.html @@ -0,0 +1,115 @@ +--- +title: <rect> +slug: Web/SVG/Элемент/rect +tags: + - NeedsUpdate + - SVG +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p><code><rect></code> - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Категория</th> + <td>Простая фигура, Графический элемент</td> + </tr> + <tr> + <th scope="row">Разрешенное содержимое</th> + <td>Любое количество указанных элементов в любом порядке:<br> + <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Элементы анимации</a> »<br> + <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Элементы описания</a> »</td> + </tr> + <tr> + <th scope="row">Нормативный документ</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2ое издание)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Пример">Пример</h2> + +<h3 id="Простой_пример_использования_rect">Простой пример использования rect</h3> + +<p> </p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="100" height="100"/> +</svg></pre> + +<p> </p> + +<p>» <a href="https://mdn.mozillademos.org/files/8893/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> + +<h3 id="<rect>_со_скругленными_углами"><code><rect></code> со скругленными углами</h3> + +<p> </p> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg width="120" height="120" + viewBox="0 0 120 120" + xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" + width="100" height="100" + rx="15" ry="15"/> + +</svg></pre> + +<p>» <a href="https://mdn.mozillademos.org/files/8897/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Атрибуты условной обработки</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Атрибуты ядра</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Атрибуты графических собы</a>тий »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Атрибуты представления</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Специальные_атрибуты">Специальные атрибуты</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_Интерфейс">DOM Интерфейс</h2> + +<p>Данный элемент реализует интерфейс <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> .</p> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p> </p> + +<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.elements.rect")}}</p> + +<p> </p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ SVGElement("path") }}</li> +</ul> diff --git a/files/ru/web/svg/element/svg/index.html b/files/ru/web/svg/element/svg/index.html new file mode 100644 index 0000000000..12e37bee9d --- /dev/null +++ b/files/ru/web/svg/element/svg/index.html @@ -0,0 +1,119 @@ +--- +title: <svg> +slug: Web/SVG/Элемент/svg +translation_of: Web/SVG/Element/svg +--- +<div>{{SVGRef}}</div> + +<p>Элемент <code>svg</code> является контейнером, который определяет новую систему координат и <a href="/en-US/docs/Web/SVG/Attribute/viewBox">область просмотра</a>. Он используется, как самый внешний элемент документов SVG, но также может использоваться для встраивания фрагмента SVG в документ SVG или HTML.</p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Атрибут <code>xmlns</code> требуется только для самого внешнего элемента <code>svg</code> документов SVG.</span> <span title="">Это не нужно для внутренних элементов <code>svg</code> или внутри документов HTML.</span></span></p> +</div> + +<div id="Exeemple"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4] notranslate"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> + <circle cx="50" cy="50" r="40" /> + <circle cx="150" cy="50" r="4" /> + + <svg viewBox="0 0 10 10" x="200" width="100"> + <circle cx="5" cy="5" r="4" /> + </svg> +</svg></pre> + +<p>{{EmbedLiveSample('Exeemple', 150, '100%')}}</p> +</div> + +<h2 id="Атрибуты"><span class="tlid-translation translation" lang="ru"><span title="">Атрибуты</span></span></h2> + +<dl> + <dt>{{SVGAttr("baseProfile")}} {{deprecated_inline('svg2')}}</dt> + <dd>The minimum SVG language profile that the document requires.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentScriptType")}} {{deprecated_inline('svg2')}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Язык сценариев по умолчанию, используемый фрагментом SVG.</span></span><br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <code>application/ecmascript</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("contentStyleType")}} {{deprecated_inline('svg2')}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Язык таблицы стилей по умолчанию, используемый фрагментом SVG.</span></span><br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <code>text/css</code>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span class="alt-edited" title="">Отображаемая высота прямоугольной области просмотра.</span> <span title="">(Не высота его системы координат.)</span></span><br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("preserveAspectRatio")}}</dt> + <dd>How the <code>svg</code> fragment must be deformed if it is displayed with a different aspect ratio.<br> + <small><em>Value type</em>: (<code>none</code>| <code>xMinYMin</code>| <code>xMidYMin</code>| <code>xMaxYMin</code>| <code>xMinYMid</code>| <code>xMidYMid</code>| <code>xMaxYMid</code>| <code>xMinYMax</code>| <code>xMidYMax</code>| <code>xMaxYMax</code>) (<code>meet</code>|<code>slice</code>)? ; <em>Default value</em>: <code>xMidYMid meet</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("version")}} {{deprecated_inline('svg2')}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Какая версия SVG используется для внутреннего содержимого элемента.</span></span><br> + <small><em>Value type</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("viewBox")}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Координаты области просмотра SVG для текущего фрагмента SVG.</span></span><br> + <small><em>Value type</em>: <strong><a href="/en-US/docs/Web/SVG/Content_type#List-of-Ts"><list-of-numbers></a></strong> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("width")}}</dt> + <dd><span class="tlid-translation translation" lang="ru"><span class="alt-edited" title="">Отображаемая ширина прямоугольной области просмотра.</span> <span title="">(Не </span><span class="alt-edited" title="">ширина </span><span title="">его системы координат.)</span></span><br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>The displayed x coordinate of the svg container. No effect on outermost <code>svg</code> elements.<br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>The displayed y coordinate of the svg container. No effect on outermost <code>svg</code> elements.<br> + <small><em>Value type</em>: <a href="/en-US/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/en-US/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с SVG2, <code>x</code>, <code>y</code>, <code>width</code> и <code>height</code> являются Geometry Properties, то есть эти атрибуты также можно использовать в качестве CSS-свойств.</span></span></p> +</div> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/en-US/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Document_Event_Attributes">Document event attributes</a>, <a href="/en-US/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> + <dt><a href="/en-US/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>Aria атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Примечания_по_использованию"><span class="tlid-translation translation" lang="ru"><span title="">Примечания по использованию</span></span></h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</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', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Кросс-браузерность"><span class="module__title__link">Кросс-браузерность</span></h2> + + + +<p>{{Compat("svg.elements.svg")}}</p> diff --git a/files/ru/web/svg/element/text/index.html b/files/ru/web/svg/element/text/index.html new file mode 100644 index 0000000000..d63d1b47dd --- /dev/null +++ b/files/ru/web/svg/element/text/index.html @@ -0,0 +1,211 @@ +--- +title: <text> +slug: Web/SVG/Элемент/<text> +tags: + - NeedsUpdate + - SVG + - SVG text +translation_of: Web/SVG/Element/text +--- +<div>{{SVGRef}}</div> + +<p>SVG элемент <strong><code><text></code></strong> определяет графический элемент, содержащий текст. Как и к любому другому графическому элементу SVG, к элементу <code><text></code> можно применить градиент, шаблон, окантовку, маску или фильтр.</p> + +<p>Текст не будет отображаться, если он не находится внутри SVG элемента <code><text></code>. Это отличается от сокрытия по умолчанию, поскольку установка <a href="/en-US/docs/Web/SVG/Attribute/display">свойства display</a> не отображает текст.</p> + +<h2 id="Пример">Пример</h2> + +<div id="Пример1"> +<div class="hidden"> +<pre class="brush: css"> html,body,svg { height:100% } + </pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"> + <style> + .small { font: italic 13px sans-serif; } + .heavy { font: bold 30px sans-serif; } + + /* Обратите внимание, что цвет текста задается с помощью * + * fill свойства, а свойство color используется только для HTML */ + .Rrrrr { font: italic 40px serif; fill: red; } + </style> + + <text x="20" y="35" class="small">Мой</text> + <text x="60" y="35" class="heavy">кот</text> + <text x="60" y="55" class="small">очень</text> + <text x="100" y="55" class="Rrrrr">Сердит!</text> +</svg> +</pre> +</div> + +<p>{{EmbedLiveSample('Пример', 150, '100%')}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Условные атрибуты обработки</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Основные атрибуты</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Графические атрибуты событий</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Атрибуты представления</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("transform")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Специфические_атрибуты">Специфические атрибуты</h3> + +<ul> + <li>{{SVGAttr("х")}}</li> + <li>{{SVGAttr("у")}}</li> + <li>{{SVGAttr("dх")}}</li> + <li>{{SVGAttr("dy")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("textLength")}}</li> + <li>{{SVGAttr("text-anchor")}}</li> + <li>{{SVGAttr("lengthAdjust")}}</li> +</ul> + +<h2 id="Интерфейс_DOM">Интерфейс DOM</h2> + +<p>Этот элемент реализует интерфейс {{domxref("SVGTextElement")}}.</p> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Основы_использования_элемента_<text>">Основы использования элемента <text></h3> + +<h4 id="SVG">SVG</h4> + +<div id="Примеры2"> +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg"> + <style> + .mal { font: italic 16px sans-serif; } + .hey { font: bold 26px sans-serif; fill: #6de;} + </style> + <text x="0" y="68" class="mal">- Привет,</text> + <text x="110" y="40" class="hey">Сахалин!</text> +</svg> +</pre> +</div> + +<h4 id="Результат">Результат</h4> + +<p>{{EmbedLiveSample('SVG', 150, '100%')}}</p> + +<h3 id="Изменение_направления_написания_текста.">Изменение направления написания текста.</h3> + +<p>Направление написания SVG-текста можно сменить на обратное, применив трансформацию.</p> + +<h4 id="SVG_2">SVG</h4> + +<div id="Реверс"> +<pre class="brush: html"> + +<svg viewBox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> + <style> + .mal {font: italic 16px sans-serif; transform: rotate(180, 50, 50);} + .hey {font: bold 26px sans-serif; fill: #6de;} + </style> + <text x="-40" y="68" class="mal" transform="rotate(180, 50, 50)"> + Пример ротации</text> + <text x="180" y="40" class="hey">SVG-текста.</text> +</svg> + + +</pre> +</div> + +<h4 id="Результат_2">Результат</h4> + +<p>{{EmbedLiveSample('Реверс', 200, '100%')}}</p> + +<h3 id="Цвет_текста">Цвет текста</h3> + +<p>Цвет текста в SVG-элементе <text> может быть изменён посредством свойства <strong>fill</strong>="[color]" внутри элемента <text>.</p> + +<h4 id="SVG_3">SVG</h4> + +<div id="Цвет"> +<pre class="brush: html"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <style> + .gri {font: italic 16px sans-serif; fill: #6dd;} + .red {font: bold 26px sans-serif; fill: #d66;} + </style> + <text class="gri" x="10" y="30">Цвет текста</text> + <text class="red" x="120" y="30">SVG.</text> +</svg> +</pre> +</div> + +<h4 id="Результат_3">Результат</h4> + +<p>{{EmbedLiveSample('SVG_3', 200, '100%')}}</p> + +<h3 id="Применение_CSS-стилей_к_содержимому_элемента_<text>.">Применение CSS-стилей к содержимому элемента <text>.</h3> + +<p>Содержимое SVG элемента <strong><text></strong> может быть стилизовано как обычный текст в HTML.</p> + +<h4 id="SVG_4">SVG</h4> + +<div id="Стиляга"> +<pre class="brush: html"> <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <style> + .stil {font: italic 16px sans-serif;} + .list {font: bold 26px sans-serif;} + </style> + <text class="stil" x="10" y="30">Стиль текста</text> + <text class="list" x="140" y="30">SVG.</text> +</svg> +</pre> +</div> + +<h4 id="Результат_4">Результат</h4> + +<p>{{EmbedLiveSample('SVG_4', 200, '100%')}}</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', 'text.html#TextElement', '<text>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#TextElement', '<text>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<p>Таблица составлена по информации из <a href="/en-US/docs/Web/SVG/Compatibility_sources">этого источника</a>.</p> + +<h2 id="Совместимость_с_браузером">Совместимость с браузером</h2> + +<div class="hidden">Таблица совместимости на этой странице создается из структурированных данных. Если вы хотите внести свой вклад в данные, ознакомьтесь с <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на перенос.</div> + +<p>{{Compat("svg.elements.text")}}</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{Svginfo}}</p> + +<h2 id="Связь">Связь</h2> + +<ul> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> + <li>{{SVGElement("altGlyph")}}</li> +</ul> diff --git a/files/ru/web/svg/element/use/index.html b/files/ru/web/svg/element/use/index.html new file mode 100644 index 0000000000..12d7007932 --- /dev/null +++ b/files/ru/web/svg/element/use/index.html @@ -0,0 +1,126 @@ +--- +title: <use> +slug: Web/SVG/Элемент/use +tags: + - SVG + - SVG Графика + - Ссылка + - Элемент +translation_of: Web/SVG/Element/use +--- +<div>{{SVGRef}}</div> + +<p>Элемент <strong><code><use></code></strong> берёт элементы из SVG-документа и дублирует их где-то еще.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> + <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/> + <use href="#myCircle" x="10" fill="blue"/> + <use href="#myCircle" x="20" fill="white" stroke="red"/> + <!-- + В данном случае атрибут stroke="red" будет игнорироваться, так как + ранее он был задан непосредственно для фигуры круга с id "myCircle". + Большинство атрибутов (кроме x, y, width, height и (xlink:)href) не + переопределяют значения, заданные у предка. + Вот почему круги имеют разные координаты "x", но одинаковое значение "stroke". + --> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +</div> + +<p>Эффект такой же, как если бы элементы были полностью склонированы в DOM, а затем расположены в месте, где находится элемент <code>use</code>, подобно элементам <code><template></code> в HTML 5.<br> + <br> + Большинство атрибутов <code>use</code> <strong>не</strong> переопределяют те, что уже заданы у элемента, на который <code>use</code> ссылается. (Это отличается от того, как атрибуты CSS-стилей, переопределяют те, что были заданы раньше в каскаде). <strong>Только</strong> атрибуты {{SVGAttr("x")}}, {{SVGAttr("y")}}, {{SVGAttr("width")}}, {{SVGAttr("height")}} и {{SVGAttr("href")}} элемента <code>use</code> будут переопределять те, что были заданы у элемента, на который <code>use</code> ссылается. Однако к элементу <code>use</code> будут применены любые другие атрибуты, не заданные у элемента, на который <code>use</code> ссылается.<br> + <br> + Поскольку клонированные элементы не отображаются, нужно соблюдать осторожность при использовании <a href="/en-US/docs/Web/CSS" title="en/CSS">CSS</a> для стилизации элемента <code>use</code> и его клонированных потомков. Нет гарантии, что CSS-свойства будут унаследованы клонированным DOM, пока вы явно не зададите им использование <a href="/en-US/docs/Web/CSS/inheritance">CSS-наследования</a>.<br> + <br> + По соображениям безопасности, браузеры могут применять <a href="/en-US/docs/Web/Security/Same-origin_policy">правило ограничения домена</a> для элементов <code>use</code> и могут отказаться загружать URL другого источника в атрибуте {{SVGAttr("href")}}.</p> + +<div class="warning"> +<p>Начиная с SVG 2, атрибут {{SVGAttr("xlink:href")}} получил статус "Устарело" в пользу {{SVGAttr("href")}}. Дополнительную информацию ищите на странице {{SVGAttr("xlink:href")}}. Тем не менее, на практике всё еще может быть потребность в использовании {{SVGAttr("xlink:href")}} для кроссбраузерной совместимости (смотрите <a href="#browser-compatibility">таблицу совместимости</a> ниже).</p> +</div> + +<h2 id="Атрибуты">Атрибуты</h2> + +<dl> + <dt id="attr-cx">{{SVGAttr("href")}}</dt> + <dd>Ссылка на элемент/фрагмент, который нужно продублировать.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#URL"><strong><URL></strong></a> ; <em>Значение по умолчанию</em>: <code>none</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt id="attr-cx">{{SVGAttr("xlink:href")}}</dt> + <dd>{{Deprecated_Header("SVG2")}}<a href="/en/SVG/Content_type#IRI" title="https://developer.mozilla.org/en/SVG/Content_type#IRI"><IRI></a>-ссылка на элемент/фрагмент, который нужно продублировать.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#IRI"><strong><IRI></strong></a> ; <em>Значение по умолчанию</em>: <code>none</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("x")}}</dt> + <dd>Координата "x" элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt id="attr-cy">{{SVGAttr("y")}}</dt> + <dd>Координата "y" элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Coordinate"><strong><coordinate></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt id="attr-r">{{SVGAttr("width")}}</dt> + <dd>Ширина элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> + <dt>{{SVGAttr("height")}}</dt> + <dd>Высота элемента <code>use</code>.<br> + <small><em>Тип значения</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a> ; <em>Значение по умолчанию</em>: <code>0</code>; <em>Анимируется</em>: <strong>да</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Примечание:</strong> Начиная с SVG2, <code>x</code>, <code>y</code>, <code>width</code>, и <code>height</code> являются <em>Свойствами Геометрии</em>, то есть эти атрибуты также могут быть использованы в качестве CSS-свойств для этого элемента.</p> +</div> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Атрибуты Событий</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA Атрибуты</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> + <dt>XLink Атрибуты</dt> + <dd><small>{{SVGAttr("xlink:href")}}, {{SVGAttr("xlink:title")}}</small></dd> +</dl> + +<h2 id="Примечание_по_использованию">Примечание по использованию</h2> + +<p>{{svginfo}}</p> + +<h2 id="Спецификации">Спецификации</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', 'struct.html#UseElement', '<use>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость"><a id="browser-compatibility" name="browser-compatibility">Браузерная совместимость</a></h2> + + + +<p>{{Compat("svg.elements.use")}}</p> |