{"json_modified": "2016-09-27T14:56:19.886881", "uuid": "2ecb4827-f81c-49c2-ad0e-9270f1712b69", "title": "<defs>", "url": "/en-US/docs/Web/SVG/Element/defs", "tags": ["Element", "Reference", "SVG", "SVG Container"], "translations": [{"uuid": "55ded9fa-1b22-40f9-a952-aec7b83ee4d4", "title": "<defs>", "url": "/fr/docs/Web/SVG/Element/defs", "tags": [], "summary": "SVG permet la d\u00e9finition d'objets graphiques (g\u00e9n\u00e9riques) qui peuvent utiliser pour une utilisation ult\u00e9rieure. Autant qu'il est possible, cet usage est recommand\u00e9 gr\u00e2ce aux propri\u00e9t\u00e9s offertes par l'\u00e9l\u00e9ment <code>defs</code>.<br/>\n Ainsi d\u00e9finir ces \u00e9l\u00e9ments au sein de l'\u00e9l\u00e9ment <code>defs</code> promeut une meilleure compr\u00e9hension du contenu SVG par l'homme et donc son accessibilit\u00e9.<br/><br/>\n Les \u00e9l\u00e9ments d\u00e9finis gr\u00e2ce \u00e0 <code>defs</code> ne sont jamais directement g\u00e9n\u00e9r\u00e9s (<em>au sens du rendu graphique : ils ne sont pas affich\u00e9s</em>). Vous devez utilis\u00e9 l'\u00e9l\u00e9ment <a href=\"/fr/docs/Web/SVG/Element/use\" title=\"L'&#xE9;lement &lt;use&gt; permet la duplication de nodes (noeuds du DOM, NDR) d&#xE9;finis par &lt;defs&gt; afin de les ins&#xE9;rer par ailleurs. L'effet est le m&#xEA;me que certains noeuds &#xE9;tait discr&#xE9;tement dans une partie non-rendue (au sens de non-affich&#xE9;e) au sein du DOM puis &quot;clon&#xE9;s&quot;&#xA0; l&#xE0; o&#xF9; est utilis&#xE9; use tel que le permet les&#xA0;&#xE9;l&#xE9;ments de gabarit gr&#xE2;ce &#xE0; HTML5.&#10; Tant que les noeuds clon&#xE9;s par use ne sont pas ins&#xE9;r&#xE9;s au sein du DOM tel que pr&#xE9;vu, vous devez &#xEA;tre attentif lorsque vous utilis&#xE9; des r&#xE8;gles de style CSS sur l'&#xE9;l&#xE9;ment use et ses enfants &quot;cach&#xE9;s&quot;. En effet les attributs CSS ne sont pas garantis d'&#xEA;tre h&#xE9;rit&#xE9;s lorsqu'ils seront clon&#xE9;s si vous n'explicitez correctement pas les h&#xE9;ritages CSS.\"><code>&lt;use&gt;</code></a> pour leur-s utilisation-s lorsque vous le souhaitez au sein du <code>viewport</code>.", "localization_tags": [], "locale": "fr", "last_edit": "2016-09-27T14:56:10", "review_tags": []}, {"uuid": "854cc0b3-baea-4b67-b3b5-22cf420b8f59", "title": "defs", "url": "/ja/docs/Web/SVG/Element/defs", "tags": [], "summary": "SVG\u3067\u306f\u3001\u5f8c\u3067\u518d\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u63cf\u753b\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002\u53c2\u7167\u3055\u308c\u308b\u8981\u7d20\u306f\u3001\u53ef\u80fd\u306a\u304b\u304e\u308a<code>defs</code>\u8981\u7d20\u5185\u3067\u5b9a\u7fa9\u3055\u308c\u308b\u3053\u3068\u304c\u63a8\u5968\u3055\u308c\u3066\u3044\u307e\u3059\u3002<code>defs</code>\u8981\u7d20\u5185\u3067\u3053\u308c\u3089\u306e\u8981\u7d20\u3092\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u306f\u3001SVG\u306e\u8981\u7d20\u306e\u53ef\u8aad\u6027\u3092\u5411\u4e0a\u3055\u305b\u3001\u3072\u3044\u3066\u306f\u64cd\u4f5c\u6027\u3092\u3082\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<code>defs</code>\u8981\u7d20\u306e\u63cf\u753b\u8981\u7d20\u306f\u3001\u305d\u306e\u307e\u307e\u3067\u306f\u63cf\u753b\u3055\u308c\u307e\u305b\u3093\u3002\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u4e0a\u3067\u63cf\u753b\u3057\u305f\u3044\u5834\u6240\u3078\u305d\u308c\u3089\u306e\u8981\u7d20\u3092\u63cf\u753b\u3059\u308b\u305f\u3081\u306b\u3001<a href=\"/ja/docs/Web/SVG/Element/use\" title=\"use &#x8981;&#x7D20;&#x306F; SVG &#x30C9;&#x30AD;&#x30E5;&#x30E1;&#x30F3;&#x30C8;&#x306E;&#x4E2D;&#x306E;&#x30CE;&#x30FC;&#x30C9;&#x3092;&#x5225;&#x306E;&#x5834;&#x6240;&#x306B;&#x91CD;&#x8907;&#x3055;&#x305B;&#x307E;&#x3059;&#x3002;&#x52B9;&#x679C;&#x306F;&#x3042;&#x305F;&#x304B;&#x3082;&#x30CE;&#x30FC;&#x30C9;&#x304C;&#x898B;&#x3048;&#x306A;&#x3044; DOM &#x306B;&#x6DF1;&#x304F;&#x30AF;&#x30ED;&#x30FC;&#x30F3;&#x3055;&#x308C;&#x3066;&#x3001;use &#x8981;&#x7D20;&#x304C;&#x3042;&#x308B;&#x5834;&#x6240;&#x306B;&#x8CBC;&#x308A;&#x4ED8;&#x3051;&#x3089;&#x308C;&#x305F;&#x306E;&#x3068;&#x540C;&#x3058;&#x3067;&#x3059;&#xFF08;&#x7121;&#x540D;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4;&#x3068; XBL &#x306B;&#x3068;&#x3066;&#x3082;&#x4F3C;&#x3066;&#x3044;&#x307E;&#x3059;&#xFF09;&#x3002;&#x30AF;&#x30ED;&#x30FC;&#x30F3;&#x3055;&#x308C;&#x305F;&#x30CE;&#x30FC;&#x30C9;&#x306F;&#x898B;&#x3048;&#x306A;&#x3044;&#x306E;&#x3067;&#x3001;CSS &#x3092;&#x4F7F;&#x3063;&#x3066; use &#x8981;&#x7D20;&#x3068;&#x305D;&#x306E;&#x96A0;&#x308C;&#x305F;&#x5B50;&#x5B6B;&#x8981;&#x7D20;&#x306B;&#x30B9;&#x30BF;&#x30A4;&#x30EB;&#x4ED8;&#x3051;&#x3092;&#x3059;&#x308B;&#x5834;&#x5408;&#x306F;&#x6CE8;&#x610F;&#x304C;&#x5FC5;&#x8981;&#x3067;&#x3059;&#x3002;CSS &#x5C5E;&#x6027;&#x304C;&#x30AF;&#x30ED;&#x30FC;&#x30F3;&#x3055;&#x308C;&#x305F;&#x96A0;&#x308C;&#x305F;&#x8981;&#x7D20;&#x306B;&#x7D99;&#x627F;&#x3055;&#x308C;&#x308B;&#x3053;&#x3068;&#x306F;&#x4FDD;&#x8A3C;&#x3055;&#x308C;&#x306A;&#x3044;&#x306E;&#x3067;&#x3001;&#x5C5E;&#x6027;&#x306E;&#x7D99;&#x627F;&#x3092; CSS &#x306E; inheritance &#x3092;&#x7528;&#x3044;&#x3066;&#x660E;&#x793A;&#x3059;&#x308B;&#x3053;&#x3068;&#x304C;&#x5FC5;&#x8981;&#x3067;&#x3059;&#x3002;\"><code>&lt;use&gt;</code></a>\u8981\u7d20\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2016-09-27T14:50:49", "review_tags": []}, {"uuid": "08941430-d952-4982-85c4-c38f72bbef11", "title": "defs", "url": "/pt-BR/docs/Web/SVG/Element/defs", "tags": ["Tag", "SVG", "\u00c9l\u00e9ment", "Element", "SVG Container", "tag", "Elemento"], "summary": "A especifica\u00e7\u00e3o do SVG permite que objetos gr\u00e1ficos sejam definidos para reuso posteriormente. Recomenda-se que, sempre que poss\u00edvel, os elementos referenciados sejam definidos dentro da tag\u00a0<code>defs</code>. A defini\u00e7\u00e3o destes elementos dentro de uma\u00a0tag\u00a0<code>defs</code> promove o entendimento\u00a0do conte\u00fado do SVG e, consequentemente, promove a acessibilidade. Elementos gr\u00e1ficos definidos dentro da tag\u00a0<code>defs</code> n\u00e3o ser\u00e3o diretamente renderizados. Voc\u00ea pode utilizar a tag\u00a0<a href=\"/pt-BR/docs/Web/SVG/Element/use\" title=\"O elemento&#xA0;use&#xA0;cria n&#xF3;s dentro de um documento SVG, e os duplica em outro local. O efeito &#xE9; o mesmo se os n&#xF3;s forem profundamente clonados em um&#xA0;DOM n&#xE3;o exposto, e ent&#xE3;o colado onde o elemento&#xA0;use &#xE9;, muito parecido&#xA0;com&#xA0;elementos de template&#xA0;clonados no HTML5. Como os n&#xF3;s clonados n&#xE3;o s&#xE3;o expostos, &#xE9; preciso ter cuidado ao utilizar&#xA0;CSS&#xA0;para estilizar o elemento&#xA0;use&#xA0;e seus descendentes ocultos. Atributos CSS n&#xE3;o &#xE9;&#xA0;garantidamente herdado pelos ocultos, DOM clonada a n&#xE3;o ser que voc&#xEA; deixe a requisi&#xE7;&#xE3;o explicita utilizando&#xA0;heran&#xE7;a CSS.\"><code>&lt;use&gt;</code></a> para renderizar tais elementos na janela de visualiza\u00e7\u00e3o.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2016-09-27T13:47:39", "review_tags": []}, {"uuid": "892dd0ad-706f-4840-bf9c-e565be7b6283", "title": "defs", "url": "/zh-CN/docs/Web/SVG/Element/defs", "tags": ["SVG\u5bb9\u5668", "SVG", "\u5143\u7d20"], "summary": "SVG \u5141\u8bb8\u6211\u4eec\u5b9a\u4e49\u4ee5\u540e\u9700\u8981\u91cd\u590d\u4f7f\u7528\u7684\u56fe\u5f62\u5143\u7d20\u3002 \u5efa\u8bae\u628a\u6240\u6709\u9700\u8981\u518d\u6b21\u4f7f\u7528\u7684\u5f15\u7528\u5143\u7d20\u5b9a\u4e49\u5728<code>defs</code>\u5143\u7d20\u91cc\u9762\u3002\u8fd9\u6837\u505a\u53ef\u4ee5\u589e\u52a0SVG\u5185\u5bb9\u7684\u6613\u8bfb\u6027\u548c\u53ef\u8bbf\u95ee\u6027\u3002 \u5728<code>defs</code>\u5143\u7d20\u4e2d\u5b9a\u4e49\u7684\u56fe\u5f62\u5143\u7d20\u4e0d\u4f1a\u76f4\u63a5\u5448\u73b0\u3002\u00a0\u4f60\u53ef\u4ee5\u5728\u4f60\u7684\u89c6\u53e3\u7684\u4efb\u610f\u5730\u65b9\u5229\u7528 <a href=\"/zh-CN/docs/Web/SVG/Element/use\" title=\"use&#x5143;&#x7D20;&#x5728;SVG&#x6587;&#x6863;&#x5185;&#x53D6;&#x5F97;&#x76EE;&#x6807;&#x8282;&#x70B9;&#xFF0C;&#x5E76;&#x5728;&#x522B;&#x7684;&#x5730;&#x65B9;&#x590D;&#x5236;&#x5B83;&#x4EEC;&#x3002;&#x5B83;&#x7684;&#x6548;&#x679C;&#x7B49;&#x540C;&#x4E8E;&#x8FD9;&#x4E9B;&#x8282;&#x70B9;&#x88AB;&#x6DF1;&#x514B;&#x9686;&#x5230;&#x4E00;&#x4E2A;&#x4E0D;&#x53EF;&#x89C1;&#x7684;DOM&#x4E2D;&#xFF0C;&#x7136;&#x540E;&#x5C06;&#x5176;&#x7C98;&#x8D34;&#x5230;use&#x5143;&#x7D20;&#x7684;&#x4F4D;&#x7F6E;&#xFF0C;&#x5F88;&#x50CF;HTML5&#x4E2D;&#x7684;&#x514B;&#x9686;&#x6A21;&#x677F;&#x5143;&#x7D20;&#x3002;&#x56E0;&#x4E3A;&#x514B;&#x9686;&#x7684;&#x8282;&#x70B9;&#x662F;&#x4E0D;&#x53EF;&#x89C1;&#x7684;&#xFF0C;&#x6240;&#x4EE5;&#x5F53;&#x4F7F;&#x7528;CSS&#x6837;&#x5F0F;&#x5316;&#x4E00;&#x4E2A;use&#x5143;&#x7D20;&#x4EE5;&#x53CA;&#x5B83;&#x7684;&#x9690;&#x85CF;&#x7684;&#x540E;&#x4EE3;&#x5143;&#x7D20;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5FC5;&#x987B;&#x5C0F;&#x5FC3;&#x6CE8;&#x610F;&#x3002;&#x9690;&#x85CF;&#x7684;&#x3001;&#x514B;&#x9686;&#x7684;DOM&#x4E0D;&#x80FD;&#x4FDD;&#x8BC1;&#x7EE7;&#x627F;CSS&#x5C5E;&#x6027;&#xFF0C;&#x9664;&#x975E;&#x4F60;&#x660E;&#x6587;&#x8BBE;&#x7F6E;&#x4F7F;&#x7528;CSS&#x7EE7;&#x627F;&#x3002;\"><code>&lt;use&gt;</code></a>\u5143\u7d20\u5448\u73b0\u8fd9\u4e9b\u5143\u7d20\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-09-27T14:14:07", "review_tags": []}], "modified": "2016-09-27T05:52:02", "label": "<defs>", "localization_tags": [], "locale": "en-US", "id": 6364, "last_edit": "2016-09-27T05:51:53", "summary": "SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a <strong><code>&lt;defs&gt;</code></strong> element. Defining these elements inside of a <code>&lt;defs&gt;</code> element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a <code>&lt;defs&gt;</code> element will not be directly rendered. You can use a <a href=\"/en-US/docs/Web/SVG/Element/use\" title=\"The &lt;use&gt; element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is, much like cloned&#xA0;template elements&#xA0;in HTML5. Since the cloned nodes are not exposed, care must be taken when using CSS to style a use element and its hidden descendants. CSS attributes are not guaranteed to be inherited by the hidden, cloned DOM unless you explicitly request it using CSS inheritance.\"><code>&lt;use&gt;</code></a> element to render those elements wherever you want on the viewport.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Usage_context", "title": "Usage context"}, {"id": "Attributes", "title": "Attributes"}, {"id": "Global_attributes", "title": "Global attributes"}, {"id": "Specific_attributes", "title": "Specific attributes"}, {"id": "DOM_Interface", "title": "DOM\u00a0Interface"}, {"id": "Example", "title": "Example"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}, {"id": "Related", "title": "Related"}], "slug": "Web/SVG/Element/defs", "review_tags": []}