diff options
Diffstat (limited to 'files/ru/web/svg/элемент/defs/index.html')
| -rw-r--r-- | files/ru/web/svg/элемент/defs/index.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/files/ru/web/svg/элемент/defs/index.html b/files/ru/web/svg/элемент/defs/index.html new file mode 100644 index 0000000000..0312b05e34 --- /dev/null +++ b/files/ru/web/svg/элемент/defs/index.html @@ -0,0 +1,101 @@ +--- +title: <defs> +slug: Web/SVG/Элемент/defs +tags: + - NeedsUpdate + - SVG + - Контейнер SVG + - Элемент +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>SVG позволяет задавать графические объекты для последующего использования. Рекомендуется там, где это возможно, объявлять подобные элементы внутри элемента <strong><code><defs></code></strong>. Объекты, созданные внутри элемента <code><defs></code> не отображаются немедленно; рассматривайте их, как шаблоны или макросы, созданные для будущего использования.</p> + +<p>Создание подобных элементов внутри элемента <code><defs></code> способствует лучшему пониманию содержимого SVG и поэтому способствует также доступности. Вы можете использовать элемент {{SVGElement("use")}}, чтобы отрисовать данные элементы в любом месте области просмотра.</p> + +<p><code><defs></code> также можно использовать для создания градиентов; в качестве иллюстрации можно посмотреть пример для атрибута {{SVGAttr("x1")}}.</p> + +<h2 id="Контекст_использования">Контекст использования</h2> + +<p>{{svginfo}}</p> + +<h2 id="Атрибуты">Атрибуты</h2> + +<h3 id="Глобальные_атрибуты">Глобальные атрибуты</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Conditional_processing_attributes">Conditional processing attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes">Core attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Graphical_event_attributes">Graphical event attributes</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">Presentation attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Специфичные_атрибуты">Специфичные атрибуты</h3> + +<p><em>Нет</em></p> + +<h2 id="Интерфейс_DOM">Интерфейс DOM </h2> + +<p>Элемент реализует интерфейс {{domxref("SVGDefsElement")}}.</p> + +<h2 id="Пример">Пример</h2> + +<pre class="brush: xml"><svg width="80px" height="30px" viewBox="0 0 80 30" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="Gradient01"> + <stop offset="20%" stop-color="#39F" /> + <stop offset="90%" stop-color="#F3F" /> + </linearGradient> + </defs> + + <rect x="10" y="10" width="60" height="10" + fill="url(#Gradient01)" /> +</svg> +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Без изменений</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "struct.html#Head", "<defs>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Первоначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Браузерная_совместимость">Браузерная совместимость</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("svg.elements.defs")}}</p> + +<p> </p> + +<h2 id="Связанные_темы">Связанные темы</h2> + +<ul> + <li>{{SVGElement("use")}}</li> +</ul> |