{"json_modified": "2016-09-27T14:23:18.602171", "uuid": "367416c4-129c-496d-8f7c-6cf8ccdf88f0", "title": "<symbol>", "url": "/en-US/docs/Web/SVG/Element/symbol", "tags": ["Element", "SVG", "SVG Container"], "translations": [{"uuid": "1a8989a4-e44b-4b0f-9935-bdb4d1b1dfef", "title": "symbol", "url": "/pt-BR/docs/Web/SVG/Element/symbol", "tags": ["Elemento", "SVG", "Container SVG", "Refer\u00eancia"], "summary": "O elemento <code>symbol</code> \u00e9 usado para definir um template que pode ser inicializado por um elemento <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>. A utiliza\u00e7\u00e3o de elementos <code>symbol</code> para gr\u00e1ficos que s\u00e3o usados v\u00e1rias vezes no mesmo documento acrescenta estrutura e sem\u00e2ntica. Documentos que s\u00e3o ricos em estrutura podem ser renderizados graficamente, atrav\u00e9s da fala, ou do braille, e assim promover a acessibilidade. Note que o elemento <code>symbol</code> em si n\u00e3o \u00e9 renderizado. Somente inst\u00e2ncias de um elemento <code>symbol</code> (por exemplo, uma refer\u00eancia \u00e0 um elemento <code>symbol</code> feita por um elemento <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>) s\u00e3o renderizadas.", "localization_tags": [], "locale": "pt-BR", "last_edit": "2016-09-27T13:41:20", "review_tags": []}, {"uuid": "2046d103-4448-4754-9508-46702192819e", "title": "symbol", "url": "/zh-CN/docs/Web/SVG/Element/symbol", "tags": ["SVG\u5bb9\u5668", "SVG", "\u9700\u8981\u793a\u4f8b", "\u5143\u7d20"], "summary": "<code>symbol</code>\u5143\u7d20\u7528\u6765\u5b9a\u4e49\u4e00\u4e2a\u56fe\u5f62\u6a21\u677f\u5bf9\u8c61\uff0c\u5b83\u53ef\u4ee5\u7528\u4e00\u4e2a<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\u5b9e\u4f8b\u5316\u3002<code>symbol</code>\u5143\u7d20\u5bf9\u56fe\u5f62\u7684\u4f5c\u7528\u662f\u5728\u540c\u4e00\u6587\u6863\u4e2d\u591a\u6b21\u4f7f\u7528\uff0c\u6dfb\u52a0\u7ed3\u6784\u548c\u8bed\u4e49\u3002\u7ed3\u6784\u4e30\u5bcc\u7684\u6587\u6863\u53ef\u4ee5\u66f4\u751f\u52a8\u5730\u5448\u73b0\u51fa\u6765\uff0c\u7c7b\u4f3c\u8bb2\u6f14\u7a3f\u6216\u76f2\u6587\uff0c\u4ece\u800c\u63d0\u5347\u4e86\u53ef\u8bbf\u95ee\u6027\u3002\u6ce8\u610f\uff0c\u4e00\u4e2a<code>symbol</code>\u5143\u7d20\u672c\u8eab\u662f\u4e0d\u5448\u73b0\u7684\u3002\u53ea\u6709<code>symbol</code>\u5143\u7d20\u7684\u5b9e\u4f8b\uff08\u4ea6\u5373\uff0c\u4e00\u4e2a\u5f15\u7528\u4e86<code>symbol</code>\u7684\u00a0<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\uff09\u624d\u80fd\u5448\u73b0\u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2016-09-27T14:23:09", "review_tags": []}], "modified": "2016-09-19T02:10:31", "label": "<symbol>", "localization_tags": [], "locale": "en-US", "id": 6341, "last_edit": "2016-09-19T02:10:21", "summary": "The <strong><code>&lt;symbol&gt;</code></strong> element is used to define graphical template objects which can be instantiated by 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. The use of <code>symbol</code> elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility. Note that a <code>symbol</code> element itself is not rendered. Only instances of a <code>symbol</code> element (i.e., a reference to a <code>symbol</code> by 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) are rendered.", "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": "See_also", "title": "See also"}], "slug": "Web/SVG/Element/symbol", "review_tags": []}