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/элемент | |
| 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/элемент')
21 files changed, 0 insertions, 2568 deletions
diff --git a/files/ru/web/svg/элемент/a/index.html b/files/ru/web/svg/элемент/a/index.html deleted file mode 100644 index 97c2daf793..0000000000 --- a/files/ru/web/svg/элемент/a/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -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/элемент/animate/index.html b/files/ru/web/svg/элемент/animate/index.html deleted file mode 100644 index 90988b58f8..0000000000 --- a/files/ru/web/svg/элемент/animate/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -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/элемент/animatemotion/index.html b/files/ru/web/svg/элемент/animatemotion/index.html deleted file mode 100644 index 3b1259dcb3..0000000000 --- a/files/ru/web/svg/элемент/animatemotion/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -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/элемент/circle/index.html b/files/ru/web/svg/элемент/circle/index.html deleted file mode 100644 index 3f1907b3bf..0000000000 --- a/files/ru/web/svg/элемент/circle/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -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/элемент/defs/index.html b/files/ru/web/svg/элемент/defs/index.html deleted file mode 100644 index 0312b05e34..0000000000 --- a/files/ru/web/svg/элемент/defs/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -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/элемент/ellipse/index.html b/files/ru/web/svg/элемент/ellipse/index.html deleted file mode 100644 index f04083c1e1..0000000000 --- a/files/ru/web/svg/элемент/ellipse/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -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/элемент/feblend/index.html b/files/ru/web/svg/элемент/feblend/index.html deleted file mode 100644 index acd3547dcd..0000000000 --- a/files/ru/web/svg/элемент/feblend/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -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/элемент/foreignobject/index.html b/files/ru/web/svg/элемент/foreignobject/index.html deleted file mode 100644 index 64e32d019f..0000000000 --- a/files/ru/web/svg/элемент/foreignobject/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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/элемент/g/index.html b/files/ru/web/svg/элемент/g/index.html deleted file mode 100644 index c425f3c5b8..0000000000 --- a/files/ru/web/svg/элемент/g/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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/элемент/image/index.html b/files/ru/web/svg/элемент/image/index.html deleted file mode 100644 index e417a4ac65..0000000000 --- a/files/ru/web/svg/элемент/image/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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/элемент/index.html b/files/ru/web/svg/элемент/index.html deleted file mode 100644 index b65942e344..0000000000 --- a/files/ru/web/svg/элемент/index.html +++ /dev/null @@ -1,253 +0,0 @@ ---- -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/элемент/line/index.html b/files/ru/web/svg/элемент/line/index.html deleted file mode 100644 index b7f75c6a96..0000000000 --- a/files/ru/web/svg/элемент/line/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -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/элемент/lineargradient/index.html b/files/ru/web/svg/элемент/lineargradient/index.html deleted file mode 100644 index 37ab6a334d..0000000000 --- a/files/ru/web/svg/элемент/lineargradient/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -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/элемент/path/index.html b/files/ru/web/svg/элемент/path/index.html deleted file mode 100644 index 7dc97ca989..0000000000 --- a/files/ru/web/svg/элемент/path/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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/элемент/pattern/index.html b/files/ru/web/svg/элемент/pattern/index.html deleted file mode 100644 index 2d572737d3..0000000000 --- a/files/ru/web/svg/элемент/pattern/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -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/элемент/polygon/index.html b/files/ru/web/svg/элемент/polygon/index.html deleted file mode 100644 index b1baf626a3..0000000000 --- a/files/ru/web/svg/элемент/polygon/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -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/элемент/radialgradient/index.html b/files/ru/web/svg/элемент/radialgradient/index.html deleted file mode 100644 index 04906d4fd5..0000000000 --- a/files/ru/web/svg/элемент/radialgradient/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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/элемент/rect/index.html b/files/ru/web/svg/элемент/rect/index.html deleted file mode 100644 index 8e4b7c9af7..0000000000 --- a/files/ru/web/svg/элемент/rect/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -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/элемент/svg/index.html b/files/ru/web/svg/элемент/svg/index.html deleted file mode 100644 index 12e37bee9d..0000000000 --- a/files/ru/web/svg/элемент/svg/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -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/элемент/text/index.html b/files/ru/web/svg/элемент/text/index.html deleted file mode 100644 index d63d1b47dd..0000000000 --- a/files/ru/web/svg/элемент/text/index.html +++ /dev/null @@ -1,211 +0,0 @@ ---- -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/элемент/use/index.html b/files/ru/web/svg/элемент/use/index.html deleted file mode 100644 index 12d7007932..0000000000 --- a/files/ru/web/svg/элемент/use/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -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> |