diff options
Diffstat (limited to 'files/ru/web/svg/элемент/use/index.html')
| -rw-r--r-- | files/ru/web/svg/элемент/use/index.html | 126 |
1 files changed, 0 insertions, 126 deletions
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> |