diff options
Diffstat (limited to 'files/pt-br/web/svg/element')
48 files changed, 4835 insertions, 0 deletions
diff --git a/files/pt-br/web/svg/element/a/index.html b/files/pt-br/web/svg/element/a/index.html new file mode 100644 index 0000000000..d55a659582 --- /dev/null +++ b/files/pt-br/web/svg/element/a/index.html @@ -0,0 +1,146 @@ +--- +title: a +slug: Web/SVG/Element/a +tags: + - Elemento + - SVG +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p>O elemento <strong><a></strong> do SVG cria um hiperlink para outras páginas da web, arquivos, locais na mesma página, endereços de email ou qualquer outra URL. É muito semelhante ao elemento {{htmlelement ("a")}} do HTML.</p> + +<p>O elemento <code><a></code> do SVG é um contêiner, o que significa que você pode criar um link em torno do texto (como em HTML), mas também em torno de qualquer elemento.</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 link around a shape --> + <a href="/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- A link around a text --> + <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: css">/* As SVG does not provide a default visual style for links, + it's considered best practice to add some */ + +@namespace svg url(http://www.w3.org/2000/svg); +/* Necessary to select only SVG <a> elements, and not also HTML’s. + See warning below */ + +svg|a:link, svg|a:visited { + cursor: pointer; +} + +svg|a text, +text svg|a { + fill: blue; /* Even for text, SVG uses fill over color */ + text-decoration: underline; +} + +svg|a:hover, svg|a:active { + outline: dotted 1px blue; +}</pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +</div> + +<div class="warning"> +<p>Como esse elemento compartilha seu nome de tag com o <a href="/pt-BR/docs/Web/HTML/Element/a">elemento <code><a></code> do HTML</a>, selecionar <code>a</code> com CSS ou <code><a href="/pt-BR/docs/Web/API/Document/querySelector">querySelector</a></code>, pode ser aplicar ao tipo errado de elemento. Experimente usar <a href="/pt-BR/docs/Web/CSS/@namespace">a regra @namespace</a> para distinguir os dois.</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt> + <dd>Instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>The {{Glossary("URL")}} or URL fragment the hyperlink points to.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("hreflang", "a")}}</dt> + <dd>The human language of the URL or URL fragment that the hyperlink points to.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt> + <dd>A space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt> + <dd>Which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the {{Glossary("URL")}}.<br> + <small><em>Value type</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>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt> + <dd>The relationship of the target object to the link object.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("target")}}</dt> + <dd>Where to display the linked {{Glossary("URL")}}.<br> + <small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("type", "a")}}</dt> + <dd>A {{Glossary("MIME type")}} for the linked URL.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>The URL or URL fragment that the hyperlink points to. May be required for backwards compatibility for older browsers.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{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#Document_Element_Event_Attributes">Document element 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>XLink Attributes</dt> + <dd><small>Most notably: {{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="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</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", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.a")}}</p> diff --git a/files/pt-br/web/svg/element/altglyph/index.html b/files/pt-br/web/svg/element/altglyph/index.html new file mode 100644 index 0000000000..5c73b99f10 --- /dev/null +++ b/files/pt-br/web/svg/element/altglyph/index.html @@ -0,0 +1,113 @@ +--- +title: altGlyph +slug: Web/SVG/Element/altGlyph +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/altGlyph +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>altGlyph</code> habilita a seleção sofisticada de símbolos utilizada para renderizar os dados de caractere de seu elemento filho.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/en-US/docs/Web/API/SVGAltGlyphElement" title="en/DOM/SVGAltGlyphElement">SVGAltGlyphElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('2.0') }} <a href="#supportGecko">[1]</a></td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatOpera('10.6') }}</td> + <td>{{ CompatSafari('4.0') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile('2.0') }} <a href="#supportGecko">[1]</a></td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatOperaMobile('11.0') }}</td> + <td>{{ CompatSafari('4.0') }}</td> + </tr> + </tbody> +</table> +</div> + +<p id="supportGecko">[1] suporte parcial, veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=456286" rel="external">bug 456286</a> e <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=571808" rel="external">bug 571808</a>.</p> + +<p>A tabela é baseada <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("altGlyphDef") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/altglyphdef/index.html b/files/pt-br/web/svg/element/altglyphdef/index.html new file mode 100644 index 0000000000..6ae9ca105c --- /dev/null +++ b/files/pt-br/web/svg/element/altglyphdef/index.html @@ -0,0 +1,42 @@ +--- +title: altGlyphDef +slug: Web/SVG/Element/altGlyphDef +tags: + - Conteúdo Textual + - Elemento + - SVG +translation_of: Web/SVG/Element/altGlyphDef +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>altGlyphDef</code> define a substituição representativa para os símbolos.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="Atributos principais">Atributos principais</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>Nenhum</em></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGAltGlyphDefElement" title="SVGAltGlyphDefElement">SVGAltGlyphDefElement</a></code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("altGlyphDef") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/altglyphitem/index.html b/files/pt-br/web/svg/element/altglyphitem/index.html new file mode 100644 index 0000000000..c228f2b243 --- /dev/null +++ b/files/pt-br/web/svg/element/altglyphitem/index.html @@ -0,0 +1,43 @@ +--- +title: altGlyphItem +slug: Web/SVG/Element/altGlyphItem +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/altGlyphItem +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>altGlyphItem</code> fornece uma série de candidados para a substituição de símbolos através do elemento {{ SVGElement("altGlyph") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>Nenhum</em></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGAltGlyphItemElement" title="en/DOM/SVGAltGlyphItemElement">SVGAltGlyphItemElement</a></code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("altGlyphDef") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/animate/index.html b/files/pt-br/web/svg/element/animate/index.html new file mode 100644 index 0000000000..fc2ffb9191 --- /dev/null +++ b/files/pt-br/web/svg/element/animate/index.html @@ -0,0 +1,102 @@ +--- +title: animate +slug: Web/SVG/Element/animate +tags: + - Animação + - Elemento + - SVG +translation_of: Web/SVG/Element/animate +--- +<div>{{SVGRef}}</div> + +<p>O elemento SVG <code><strong><animate></strong></code> fornece uma maneira de animar um atributo de um elemento ao longo do tempo.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100%; margin:0; padding:0; }</pre> +</div> + +<pre class="brush: html; highlight[2]"><svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <rect width="10" height="10"> + <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" /> + </rect> +</svg></pre> + +<p>{{EmbedLiveSample('Exemple', 150, '100%')}}</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<h3 id="Animation_Attributes">Animation Attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Timing_Attributes">Animation timing attributes</a></dt> + <dd><small>{{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Value_Attributes">Animation value attributes</a></dt> + <dd><small>{{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute#Animation_Attributes">Other Animation attributes</a></dt> + <dd><small>Most notably: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Events#Animation_Event_Attributes">Animation event attributes</a></dt> + <dd><small>Most notably: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}</small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</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#Document_Element_Event_Attributes">Document element event attributes</a></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>This element implements the {{domxref("SVGAnimateElement")}} interface.</p> + +<h2 id="Accessibility_concerns">Accessibility concerns</h2> + +<p>Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.</p> + +<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p> + +<ul> + <li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li> + <li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li> + <li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications">Specifications</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("SVG Animations 2", "#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#AnimateElement", "<animate>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("svg.elements.animate")}}</p> +</div> diff --git a/files/pt-br/web/svg/element/animatecolor/index.html b/files/pt-br/web/svg/element/animatecolor/index.html new file mode 100644 index 0000000000..a0161871b3 --- /dev/null +++ b/files/pt-br/web/svg/element/animatecolor/index.html @@ -0,0 +1,59 @@ +--- +title: animateColor +slug: Web/SVG/Element/animateColor +tags: + - Animação + - Elelemt + - Obsoleto + - SVG +translation_of: Web/SVG/Element/animateColor +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<div class="warning"> +<p>Este elemento ficou obsoleto na Segunda Edição do SVG 1.1 e deverá ser removida das futuras versões do SVG. Este elemento fornece recursos ainda não disponíveis utilizando o elemento {{ SVGElement("animate") }} e não está implementado no Firefox e no Internet Explorer. Os autores devem utilizar o elemento {{ SVGElement("animate") }} em seu lugar.</p> +</div> + +<p>O elemento <code>animateColor</code> especifica uma transformação de cor ao longo do tempo.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="/files/3264/animateColor.svg" title="/files/3264/animateColor.svg">animateColor.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Atributos de eventos da animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">Atributos de destino do atributo da animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Atributos de cronometragem da animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Atributos de valor de animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Atributos de animação adicionais</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGAnimateColorElement" title="en/DOM/SVGAnimateColorElement">SVGAnimateColorElement</a></code>.</p> + +<h2 id="Related">Related</h2> + +<ul> + <li>{{ SVGElement("animate") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/animatemotion/index.html b/files/pt-br/web/svg/element/animatemotion/index.html new file mode 100644 index 0000000000..b09127f599 --- /dev/null +++ b/files/pt-br/web/svg/element/animatemotion/index.html @@ -0,0 +1,56 @@ +--- +title: animateMotion +slug: Web/SVG/Element/animateMotion +tags: + - Animação + - Elemento + - Forma + - SVG +translation_of: Web/SVG/Element/animateMotion +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>animateMotion</code> interfere em uma elemento referenciado para se mover ao longo de uma trajetória de movimento.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="/files/3261/animateMotion.svg" title="/files/3261/animateMotion.svg">animateMotion.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Atributos de eventos da animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Atributos de cronometragem da animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationValue" title="en/SVG/Attribute#AnimationValue">Atributos de valor de animação</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#AnimationAddition" title="en/SVG/Attribute#AnimationAddition">Atributos de animação adicionais</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</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="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGAnimateMotionElement" title="en/DOM/SVGAnimateMotionElement">SVGAnimateMotionElement</a></code>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("mpath") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/animatetransform/index.html b/files/pt-br/web/svg/element/animatetransform/index.html new file mode 100644 index 0000000000..b6e5408e2a --- /dev/null +++ b/files/pt-br/web/svg/element/animatetransform/index.html @@ -0,0 +1,67 @@ +--- +title: animateTransform +slug: Web/SVG/Element/animateTransform +tags: + - Animação + - Elemento + - SVG +translation_of: Web/SVG/Element/animateTransform +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>animateTransform</code> anima a transformação de um atributo em um elemento alvo, permitindo assim as animações controlarem a movimentação, escala, rotação e/ou inclinação.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><?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" > + + <polygon points="60,30 90,90 30,90"> + <animateTransform attributeName="transform" + attributeType="XML" + type="rotate" + from="0 60 70" + to="360 60 70" + dur="10s" + repeatCount="indefinite"/> + </polygon> +</svg></pre> + +<p><strong>Resultado</strong></p> + +<p>{{ EmbedLiveSample('Exemplo','120','120') }}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos de processamento condicional" title="en-US/docs/Web/SVG/Attribute#Atributos de processamento condicional">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos principais" title="en-US/docs/Web/SVG/Attribute#Atributos principais">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos de eventos da animação" title="en-US/docs/Web/SVG/Attribute#Atributos de eventos da animação">Atributos de eventos da animação</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos XLink" title="en-US/docs/Web/SVG/Attribute#Atributos XLink">Atributos XLink</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos de destino do atributo da animação" title="en-US/docs/Web/SVG/Attribute#Atributos de destino do atributo da animação">Atributos de destino do atributo da animação</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos de cronometragem da animação" title="en-US/docs/Web/SVG/Attribute#Atributos de cronometragem da animação">Atributos de cronometragem da animação</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos de valor de animação" title="en-US/docs/Web/SVG/Attribute#Atributos de valor de animação">Atributos de valor de animação</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Atributos de animação adicionais" title="en-US/docs/Web/SVG/Attribute#Atributos de animação adicionais">Atributos de animação adicionais</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("by") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGAnimateTransformElement" title="en/DOM/SVGAnimateTransformElement">SVGAnimateTransformElement</a></code>.</p> diff --git a/files/pt-br/web/svg/element/circle/index.html b/files/pt-br/web/svg/element/circle/index.html new file mode 100644 index 0000000000..52fc0253d8 --- /dev/null +++ b/files/pt-br/web/svg/element/circle/index.html @@ -0,0 +1,118 @@ +--- +title: circle +slug: Web/SVG/Element/circle +tags: + - Circulo + - Elemento + - Forma + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>circle</code> é uma forma básica do SVG, utilizada para criar círculos baseado em um ponto central e um raio.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p> </p> + +<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> </p> + +<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg" title="https://developer.mozilla.org/files/3252/circle.svg">circle.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("r") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do {{ domxref("SVGCircleElement") }} interface.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/docs/Web/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/color-profile/index.html b/files/pt-br/web/svg/element/color-profile/index.html new file mode 100644 index 0000000000..be238bced6 --- /dev/null +++ b/files/pt-br/web/svg/element/color-profile/index.html @@ -0,0 +1,95 @@ +--- +title: color-profile +slug: Web/SVG/Element/color-profile +tags: + - Elemento + - Perfil de Cor + - Referencia + - SVG +translation_of: Web/SVG/Element/color-profile +--- +<div>{{SVGRef}}</div> + +<p>O elemento permite descrever o perfil de cor utilizado para a imagem.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("local") }}</li> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGColorProfileElement" title="en/DOM/SVGColorProfileElement">SVGColorProfileElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> diff --git a/files/pt-br/web/svg/element/defs/index.html b/files/pt-br/web/svg/element/defs/index.html new file mode 100644 index 0000000000..ed2d3031c1 --- /dev/null +++ b/files/pt-br/web/svg/element/defs/index.html @@ -0,0 +1,116 @@ +--- +title: defs +slug: Web/SVG/Element/defs +tags: + - Element + - Elemento + - SVG + - SVG Container + - tag +translation_of: Web/SVG/Element/defs +--- +<div>{{SVGRef}}</div> + +<p>A especificação do SVG permite que objetos gráficos sejam definidos para reuso posteriormente. Recomenda-se que, sempre que possível, os elementos referenciados sejam definidos dentro da tag <code>defs</code>. A definição destes elementos dentro de uma tag <code>defs</code> promove o entendimento do conteúdo do SVG e, consequentemente, promove a acessibilidade. Elementos gráficos definidos dentro da tag <code>defs</code> não serão diretamente renderizados. Você pode utilizar a tag {{ SVGElement("use") }} para renderizar tais elementos na janela de visualização.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</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="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos centrais</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>Não existem atributos específicos</em></p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>Este elemento implementa a interface <code><a href="/en/DOM/SVGDefsElement" title="en/DOM/SVGDefsElement">SVGDefsElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,sans-serif; font-size: 16px; line-height: 16px;">Recurso</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><span style="font-size: 12px; line-height: 18px;">Suporte básico</span></td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("use") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/desc/index.html b/files/pt-br/web/svg/element/desc/index.html new file mode 100644 index 0000000000..3807c057b9 --- /dev/null +++ b/files/pt-br/web/svg/element/desc/index.html @@ -0,0 +1,94 @@ +--- +title: desc +slug: Web/SVG/Element/desc +translation_of: Web/SVG/Element/desc +--- +<div>{{SVGRef}}</div> + +<p>Cada elemento container ou elementos gráficos em um desenho SVG podem fornecer uma <code>desc,</code> string de descrição onde esta é somente textual. Quando o fragmento do documento SVG é renderizado como um SVG em uma mídia visual, elementos <code>desc</code> não são renderizados como parte da visualização gráfica. Alterne as exibições quando possível, tanto visual e auditiva, escolha a exibição do elemento <code>desc</code> mas não a exibição dos elementos <code>path</code> ou outros elementos gráficos. O elemento <code>desc</code> geralmente melhora a acessibilidade do documentos SVG.</p> + +<h2 id="Contexto_de_utilização">Contexto de utilização</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos centrais</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>Não existe especificação de atributos</em></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface <code><a href="/en/DOM/SVGDescElement" title="en/DOM/SVGDescElement">SVGDescElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p><em>Observação:</em> Geralmente não existe interface para este elemento.</p> + +<p>A tabela é baseada <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nestas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("title") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/ellipse/index.html b/files/pt-br/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..a90bccedfd --- /dev/null +++ b/files/pt-br/web/svg/element/ellipse/index.html @@ -0,0 +1,110 @@ +--- +title: ellipse +slug: Web/SVG/Element/ellipse +tags: + - Elemento + - Forma + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/ellipse +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>ellipse</code> é uma forma básica do SVG, utilizado para criar elipses baseado em uma coordenada central, tanto no raio x quanto no y.</p> + +<p>As elipses são incapazes de especificar a orientação exatada dela mesma (se, por exemplo, você quiser desenha uma elipse inclinada a um ângulo de 45 graus), mas poderá ser rotacionada utilizando o atributo {{ SVGAttr("transform") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3253/ellipse.svg" title="https://developer.mozilla.org/files/3253/ellipse.svg">ellipse.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en-US/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en-US/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en-US/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en-US/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGEllipseElement" title="en-US/DOM/SVGEllipseElement">SVGEllipseElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en-US/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("circle") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/filter/index.html b/files/pt-br/web/svg/element/filter/index.html new file mode 100644 index 0000000000..e666fe126d --- /dev/null +++ b/files/pt-br/web/svg/element/filter/index.html @@ -0,0 +1,124 @@ +--- +title: filter +slug: Web/SVG/Element/filter +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/filter +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>filter</code> fornece um recipiente para operações de um filtro atômico . Isso nunca será renderizado diretamente. Um filtro é referenciado pela utilização do atributo {{ SVGAttr("filter") }} com destino de um elemento SVG.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGFilterElement" title="en/DOM/SVGFilterElement">SVGFilterElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('2.0') }}</td> + <td>{{ CompatIE('10.0') }}</td> + <td>9.0</td> + <td>{{ CompatSafari('3.0') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile('2.0') }}</td> + <td>{{ CompatNo() }}</td> + <td>9.5</td> + <td>{{ CompatSafari('3.0') }}[1]</td> + </tr> + </tbody> +</table> +</div> + +<p id="compatWebkit">[1] Existem <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=26389">alguns problemas pendentes</a> em navegadores Webkit.</p> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<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("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="/pt-BR/SVG/Tutorial/Filter_effects" title="en/SVG/Tutorial/Filter_effects">Tutorial SVG: Efeitos de filtros</a></li> +</ul> diff --git a/files/pt-br/web/svg/element/g/index.html b/files/pt-br/web/svg/element/g/index.html new file mode 100644 index 0000000000..e83eecf1bc --- /dev/null +++ b/files/pt-br/web/svg/element/g/index.html @@ -0,0 +1,61 @@ +--- +title: g +slug: Web/SVG/Element/g +tags: + - Elemento + - Referencia + - SVG + - SVG Recipiente +translation_of: Web/SVG/Element/g +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>g</code> é um recipiente utilizado para agrupar objetos. Transformações aplicadas no elemento <code>g</code> são repassadas para todos os seus elementos filhos. Atributos também são herdados por elementos filhos. Além disso, pode ser utilizado para definir objetos complexos que poderão ser referenciados mais tarde pelo elemento {{SVGElement("use")}}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html" style=""><svg width="100%" height="100%" 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("Exemplo",220,130)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>There is no specific attributes</em></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGGElement" title="DOM/SVGGElement">SVGGElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + + + +<p>{{Compat("svg.elements.g")}}</p> diff --git a/files/pt-br/web/svg/element/glyph/index.html b/files/pt-br/web/svg/element/glyph/index.html new file mode 100644 index 0000000000..7d53098e41 --- /dev/null +++ b/files/pt-br/web/svg/element/glyph/index.html @@ -0,0 +1,87 @@ +--- +title: glyph +slug: Web/SVG/Element/glyph +tags: + - Conteúdo de Texto SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/glyph +--- +<div>{{SVGRef}}</div> + +<p>O <code>glyph</code> determina um único glifo em uma fonte SVG.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: xml"><?xml version="1.0" standalone="yes"?> +<svg width="400px" height="300px" version="1.1" + xmlns = 'http://www.w3.org/2000/svg'> +<!-- Exemplo copiado de http://www.w3.org/TR/SVG/fonts.html#GlyphElement --> + <defs> + + <font id="Font1" horiz-adv-x="1000"> + <font-face font-family="Super Sans" font-weight="bold" font-style="normal" + units-per-em="1000" cap-height="600" x-height="400" + ascent="700" descent="300" + alphabetic="0" mathematical="350" ideographic="400" hanging="500"> + <font-face-src> + <font-face-name name="Super Sans Bold"/> + </font-face-src> + </font-face> + + <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph> + <glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph> + <glyph unicode="@" d="M0,50l100,300l400,100z"></glyph> + + </font> + </defs> + <text x="100" y="100" + style="font-family: 'Super Sans', Helvetica, sans-serif; + font-weight: bold; font-style: normal">Texto utilizando fonte embed@da!</text> +</svg> + + +</pre> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("lang") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGGlyphElement" title="en/DOM/SVGGlyphElement">SVGGlyphElement</a></code>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li><a href="/pt-BR/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">Tutorial SVG: SVG fonts</a></li> +</ul> diff --git a/files/pt-br/web/svg/element/glyphref/index.html b/files/pt-br/web/svg/element/glyphref/index.html new file mode 100644 index 0000000000..d316889b40 --- /dev/null +++ b/files/pt-br/web/svg/element/glyphref/index.html @@ -0,0 +1,103 @@ +--- +title: glyphRef +slug: Web/SVG/Element/glyphRef +tags: + - Conteúdo de Texto SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/glyphRef +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>glyphRef</code> fornece um único glifo possível referenciando a substituição do {{ SVGElement("altGlyph") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGGlyphRefElement">SVGGlyphRefElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera('9.80')}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("altGlyph") }}</li> +</ul>sv diff --git a/files/pt-br/web/svg/element/hkern/index.html b/files/pt-br/web/svg/element/hkern/index.html new file mode 100644 index 0000000000..57911f74ae --- /dev/null +++ b/files/pt-br/web/svg/element/hkern/index.html @@ -0,0 +1,48 @@ +--- +title: hkern +slug: Web/SVG/Element/hkern +tags: + - Elemento + - Fonte SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/hkern +--- +<div>{{SVGRef}}</div> + +<p>A distância horizontal entre dois glifos podem ser bem ajustados com um elemento <code>hkern</code>. Este processo é conhecido como <a class="external" href="http://en.wikipedia.org/wiki/Kerning">Kerning</a>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("k") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGHKernElement" title="en/DOM/SVGHKernElement">SVGHKernElement</a></code>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("vkern") }}</li> + <li><a href="/pt-BR/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">Tutorial SVG: SVG fonts</a></li> +</ul> diff --git a/files/pt-br/web/svg/element/image/index.html b/files/pt-br/web/svg/element/image/index.html new file mode 100644 index 0000000000..b14010b60c --- /dev/null +++ b/files/pt-br/web/svg/element/image/index.html @@ -0,0 +1,102 @@ +--- +title: image +slug: Web/SVG/Element/image +tags: + - Elemento + - Gráficos SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/image +--- +<div>{{SVGRef}}</div> + +<p>O elemento SVG <code><strong><image></strong></code> carrega imagens dentro de documentos SVG. Ele pode exibir arquivos {{glossary("raster image")}} ou outros arquivos SVG.</p> + +<p>The only image formats SVG software must support are <a href="/en-US/docs/Glossary/jpeg">JPEG</a>, <a href="/en-US/docs/Glossary/PNG">PNG</a>, and other SVG files. Animated <a href="/en-US/docs/Glossary/gif">GIF</a> behavior is undefined.</p> + +<p>SVG files displayed with <code><image></code> are <a href="/en-US/docs/Web/SVG/SVG_as_an_Image">treated as an image</a>: external resources aren't loaded, <a href="/en-US/docs/Web/CSS/:visited">:visited</a> styles <a href="/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector">aren't applied</a>, and they cannot be interactive. To include dynamic SVG elements, try <a href="/en-US/docs/Web/SVG/Element/use"><use></a> with an external URL. To include SVG files and run scripts inside them, try <a href="/en-US/docs/Web/HTML/Element/object"><object></a> inside of <a href="/en-US/docs/Web/SVG/Element/foreignObject"><foreignObject></a>.</p> + +<div class="note"> +<p><strong>Note:</strong> The HTML spec defines <code><image></code> as a synonym for <a href="/en-US/docs/Web/HTML/Element/img"><img></a> while parsing HTML. This specific element and its behavior only apply inside SVG documents or <a href="/en-US/docs/SVG_In_HTML_Introduction">inline SVG</a>.</p> +</div> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes">Attributes</h2> + +<h3 id="Global_attributes">Global attributes</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><a href="/en-US/docs/Web/SVG/Attribute#Xlink_attributes">Xlink attributes</a></li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Specific_attributes">Specific attributes</h3> + +<ul> + <li>{{SVGAttr("x")}}: Positions the image horizontally from the origin.</li> + <li>{{SVGAttr("y")}}: Positions the image vertically from the origin.</li> + <li>{{SVGAttr("width")}}: The width the image renders at. Unlike HTML's <code><img></code>, this attribute is required.</li> + <li>{{SVGAttr("height")}}: The height the image renders at. Unlike HTML's <code><img></code>, this attribute is required.</li> + <li>{{SVGAttr("href")}} and {{SVGAttr("xlink:href")}}: Points at a URL for the image file.</li> + <li>{{SVGAttr("preserveAspectRatio")}}: Controls how the image is scaled.</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p><code><image></code> implements the {{domxref("SVGImageElement")}} interface.</p> + +<h2 id="Example">Example</h2> + +<p>Basic rendering of a PNG image in SVG:</p> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="200" height="200" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> +</svg> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 250, 260)}}</p> + +<h2 id="Specifications">Specifications</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>Allows omitting <code>height</code> and <code>width</code></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> + + + +<p>{{Compat("svg.elements.image")}}</p> diff --git a/files/pt-br/web/svg/element/index.html b/files/pt-br/web/svg/element/index.html new file mode 100644 index 0000000000..bbd0f4f860 --- /dev/null +++ b/files/pt-br/web/svg/element/index.html @@ -0,0 +1,289 @@ +--- +title: Referência de elementos SVG +slug: Web/SVG/Element +tags: + - Desenho + - Design Responsivo + - Elementos + - Gráficos Vetoriais + - Referência SVG + - SVG + - 'l10n:prioridade' +translation_of: Web/SVG/Element +--- +<p>« <a href="https://developer.mozilla.org/pt-BR/docs/Web/SVG" title="SVG">SVG</a> / <a href="https://developer.mozilla.org/pt-BR/docs/Web/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p> + +<p>Os desenhos e imagens SVG são criados usando uma grande variedade de elementos dedicados a construção, desenho e leiaute de imagens e diagramas vetoriais. Aqui você encontrará documentação de referência para cada um dos elementos SVG.</p> + +<h2 id="Elementos_SVG_de_A_a_Z">Elementos SVG de A a Z</h2> + +<div class="index"> +<h3 id="A_2"><span id="A">A</span></h3> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> + +<h3 id="C_2"><span id="C">C</span></h3> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li> + <h3 id="D_2"><span id="D">D</span></h3> + </li> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> + <li>{{SVGElement("discard")}}</li> +</ul> + +<h3 id="E_2"><span id="E">E</span></h3> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> + +<h3 id="F_2"><span id="F">F</span></h3> + +<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("foreignObject")}}</li> +</ul> + +<h3 id="G_2"><span id="G">G</span></h3> + +<ul> + <li>{{SVGElement("g")}}</li> +</ul> + +<h3 id="H_2"><span id="H">H</span></h3> + +<ul> + <li>{{SVGElement("hatch")}}</li> + <li>{{SVGElement("hatchpath")}}</li> + <li> + <h3 id="I_2"><span id="I">I</span></h3> + </li> + <li>{{SVGElement("image")}}</li> +</ul> + +<h3 id="L_2"><span id="L">L</span></h3> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> + +<h3 id="M_2"><span id="M">M</span></h3> + +<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("mpath")}}</li> +</ul> + +<h3 id="P_2"> <span id="P">P</span></h3> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> + +<h3 id="R_2"> <span id="R">R</span></h3> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> + +<h3 id="S_2"><span id="S">S</span></h3> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> + +<h3 id="T_2"><span id="T">T</span></h3> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> + +<h3 id="U_2"><span id="U">U</span></h3> + +<ul> + <li>{{SVGElement("unknown")}}</li> + <li>{{SVGElement("use")}}</li> +</ul> + +<h3 id="Z"><span id="V">Z</span></h3> + +<ul> + <li>{{SVGElement("view")}}</li> +</ul> +</div> + +<h2 id="Elementos_SVG_por_Categoria">Elementos SVG por Categoria</h2> + +<h3 id="Elementos_de_animação">Elementos de animação</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}} , {{SVGElement("discard")}}, {{SVGElement("mpath")}} , {{SVGElement("set")}}</p> + +<h3 id="Formas_básicas">Formas básicas</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Elementos_container">Elementos "container"</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}, {{SVGElement("unknown")}}</p> + +<h3 id="Elementos_descritivos">Elementos descritivos</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="Elementos_de_filtro_simples">Elementos de filtro simples</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="Elementos_de_fonte">Elementos de fonte</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="Elementos_de_gradiente">Elementos de gradiente</h3> + +<p>{{SVGElement("linearGradient")}} , {{SVGElement("meshgradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="Elementos_gráficos">Elementos gráficos</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="Elementos_gráficos_de_referência">Elementos gráficos de referência</h3> + +<p>{{SVGElement("mesh")}}, {{SVGElement("use")}}</p> + +<h3 id="Elementos_de_iluminação">Elementos de iluminação</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Elementos_nunca_renderizados">Elementos nunca renderizados</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="Elementos_para_pintura">Elementos para pintura</h3> + +<p>{{SVGElement("hatch")}}, {{SVGElement("linearGradient")}}, {{SVGElement("meshgradient")}}, {{SVGElement("pattern")}}, {{SVGElement("radialGradient")}}, {{SVGElement("solidcolor")}}</p> + +<h3 id="Elementos_renderizáveis">Elementos renderizáveis</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="Elementos_de_forma">Elementos de forma</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("mesh")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="Elementos_estruturais">Elementos estruturais</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="Elementos_de_conteúdo_textual">Elementos de conteúdo textual</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Elementos_filho_de_conteúdo_textual">Elementos filho de conteúdo textual</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="Elementos_sem_categoria">Elementos sem categoria</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="Elementos_obsoletos_e_descontinuados">Elementos obsoletos e descontinuados</h2> + +<div class="blockIndicator warning"> +<p>Aviso: Esses são elementos SVG antigos que foram descontinuados e não devem ser usados. Você nunca deve usá-los em novos projetos e deve susbstituí-los em projetos antigos o mais rápido possível. Eles estão listados aqui apenas para fins informativos.</p> +</div> + +<h3 id="A_3">A</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("animateColor")}}</p> + +<h3 id="C_3">C</h3> + +<p>{{SVGElement("cursor")}}</p> + +<h3 id="F_3">F</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}</p> + +<h3 id="G_3">G</h3> + +<p>{{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}</p> + +<h3 id="H_3">H</h3> + +<p>{{SVGElement("hkern")}}</p> + +<h3 id="M_3">M</h3> + +<p>{{SVGElement("missing-glyph")}}</p> + +<h3 id="T_3">T</h3> + +<p>{{SVGElement("tref")}}</p> + +<h3 id="V_2">V</h3> + +<p>{{SVGElement("vkern")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/SVG/Attribute">Referência de atributos SVG</a></li> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/SVG/Tutorial">SVG Tutorial</a></li> + <li><a href="https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM#SVG_interfaces">SVG interface reference</a></li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/pt-br/web/svg/element/line/index.html b/files/pt-br/web/svg/element/line/index.html new file mode 100644 index 0000000000..e44efa9cd2 --- /dev/null +++ b/files/pt-br/web/svg/element/line/index.html @@ -0,0 +1,118 @@ +--- +title: line +slug: Web/SVG/Element/line +tags: + - Elemento + - Gráficos SVG + - Linha + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/line +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>line</code> é uma forma básica do SVG, utilizada para criar uma linha conectando dois pontos.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3254/line.svg" title="https://developer.mozilla.org/files/3254/line.svg">line.svg</a></p> + +<p>Você também pode aplicar transformações para obter o mesmo resultado. Começando com uma linha normal,</p> + +<p>» <a href="https://developer.mozilla.org/files/3345/line1.svg" title="https://developer.mozilla.org/files/3345/line1.svg">line1.svg</a></p> + +<p>adicionar as opções de transformação para mudar a direção da linha:</p> + +<p>» <a href="https://developer.mozilla.org/files/3346/line2.svg" title="https://developer.mozilla.org/files/3346/line2.svg">line2.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGLineElement" title="en/DOM/SVGLineElement">SVGLineElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("path") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/lineargradient/index.html b/files/pt-br/web/svg/element/lineargradient/index.html new file mode 100644 index 0000000000..5e1c014d13 --- /dev/null +++ b/files/pt-br/web/svg/element/lineargradient/index.html @@ -0,0 +1,113 @@ +--- +title: linearGradient +slug: Web/SVG/Element/linearGradient +tags: + - Elemento + - Gradiente + - SVG +translation_of: Web/SVG/Element/linearGradient +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>linearGradient</code> permite que os autores definam gradientes lineares para preenchimento (fill) ou contornos (stroke) de elementos gráficos.</p> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Example">Example</h2> + +<p>» <a href="https://developer.mozilla.org/files/3265/linearGradient.svg" title="https://developer.mozilla.org/files/3265/linearGradient.svg">linearGradient.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos centrais</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos Xlink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</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="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface <code><a href="/en/DOM/SVGLinearGradientElement" title="en/DOM/SVGLinearGradientElement">SVGLinearGradientElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Esta tabela é baseada <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nestas fontes</a>.</p> + +<h3 id="Notas_específicas_para_WebKit">Notas específicas para WebKit</h3> + +<p>Navegadores baseados no Webkit não suportam <code>spreadMethod</code> (<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=5968">bug 5968</a>) e interpolação de cores (<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=6034">bug 6034</a>).</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("stop") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/marker/index.html b/files/pt-br/web/svg/element/marker/index.html new file mode 100644 index 0000000000..2b6193ad7e --- /dev/null +++ b/files/pt-br/web/svg/element/marker/index.html @@ -0,0 +1,103 @@ +--- +title: marker +slug: Web/SVG/Element/marker +tags: + - Container SVG + - Elemento + - Referência(2) + - SVG +translation_of: Web/SVG/Element/marker +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>marker</code> define os gráficos quem devem ser usados para desenhar setas or polymarkers em um determinado elemento {{ SVGElement("path") }}, {{ SVGElement("line") }}, {{ SVGElement("polyline") }} ou {{ SVGElement("polygon") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3267/marker.svg" title="https://developer.mozilla.org/files/3267/marker.svg">marker.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("orient") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGMarkerElement" title="en/DOM/SVGMarkerElement">SVGMarkerElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> diff --git a/files/pt-br/web/svg/element/mask/index.html b/files/pt-br/web/svg/element/mask/index.html new file mode 100644 index 0000000000..ef56bbe797 --- /dev/null +++ b/files/pt-br/web/svg/element/mask/index.html @@ -0,0 +1,55 @@ +--- +title: mask +slug: Web/SVG/Element/mask +tags: + - Container SVG + - Elemento + - Referência(2) + - SVG +translation_of: Web/SVG/Element/mask +--- +<div>{{SVGRef}}</div> + +<p>No SVG, você pode especificar que quaisquer outros objetos gráficos ou elementos {{ SVGElement("g") }} podem ser utilizados com uma máscar de alfa para a composição do objeto atual para o fundo. A mask is defined with the <code>mask</code> element. A máscara é usada/referenciada usando a propriedade {{ SVGAttr("mask") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3269/mask.svg" title="https://developer.mozilla.org/files/3269/mask.svg">mask.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGMaskElement" title="en/DOM/SVGMaskElement">SVGMaskElement</a></code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("clipPath") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/metadata/index.html b/files/pt-br/web/svg/element/metadata/index.html new file mode 100644 index 0000000000..f91ee9fd9b --- /dev/null +++ b/files/pt-br/web/svg/element/metadata/index.html @@ -0,0 +1,87 @@ +--- +title: metadata +slug: Web/SVG/Element/metadata +tags: + - Elemento + - Referencia + - SVG + - SVG Descritivo +translation_of: Web/SVG/Element/metadata +--- +<div>{{SVGRef}}</div> + +<p>Metadados são dados estruturados sobre dados. Metadados que são incluídos com um conteúdo SVG devem ser especificados com um elemento <code>metadata</code>. O conteúdo do <code>metadata</code> devem ser elementos de outros namespaces XML tais como RDF, FOAF, etc.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core">Atributos principais</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>Não existem atributos específicos</em></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGMetadataElement">SVGMetadataElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources">nessas fontes</a>.</p> diff --git a/files/pt-br/web/svg/element/missing-glyph/index.html b/files/pt-br/web/svg/element/missing-glyph/index.html new file mode 100644 index 0000000000..216eaff176 --- /dev/null +++ b/files/pt-br/web/svg/element/missing-glyph/index.html @@ -0,0 +1,51 @@ +--- +title: missing-glyph +slug: Web/SVG/Element/missing-glyph +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/missing-glyph +--- +<div>{{SVGRef}}</div> + +<p>O conteúdo do <code>missing-glyph</code> é renderizado se, para um determinado caractere, não foi determinado um {{ SVGElement("glyph") }} apropriado.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGMissingGlyphElement" title="en/DOM/SVGMissingGlyphElement">SVGMissingGlyphElement</a></code>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li><a href="/pt-BR/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">SVG tutorial: SVG fonts</a></li> +</ul> diff --git a/files/pt-br/web/svg/element/mpath/index.html b/files/pt-br/web/svg/element/mpath/index.html new file mode 100644 index 0000000000..c79fc56e21 --- /dev/null +++ b/files/pt-br/web/svg/element/mpath/index.html @@ -0,0 +1,78 @@ +--- +title: mpath +slug: Web/SVG/Element/mpath +tags: + - Animação + - Caminho + - Contorno + - Elemento + - Movimento + - Referencia + - SVG +translation_of: Web/SVG/Element/mpath +--- +<div>{{SVGRef}}</div> + +<p>O sub elemento <code>mpath</code> do elemento {{ SVGElement("animateMotion") }} fornece a habilidade de referenciar um elemento externo {{ SVGElement("path") }} como uma definição de um caminho de movimento.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 500 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <rect x="1" y="1" width="498" height="298" + fill="none" stroke="blue" stroke-width="2" /> + + <!-- Desenha o contorno da trajetória de movimento em azul, ao longo, com três pequenos círculos: inicio, meio e fim. --> + <path id="path1" d="M100,250 C 100,50 400,50 400,250" + fill="none" stroke="blue" stroke-width="7.06" /> + <circle cx="100" cy="250" r="17.64" fill="blue" /> + <circle cx="250" cy="100" r="17.64" fill="blue" /> + <circle cx="400" cy="250" r="17.64" fill="blue" /> + + <!-- Aqui temos um triângulo que andará sobre o caminho do movimento. + Define-se com uma orientação vertical com base no triângulo horizontalmente centralizado logo acima da origem. --> + <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" + fill="yellow" stroke="red" stroke-width="7.06" > + <!-- Define o caminho de movimento da animação --> + <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" > + <mpath xlink:href="#path1"/> + </animateMotion> + </path> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Example",250,165)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGMPathElement" title="en/DOM/SVGMPathElement">SVGMPathElement</a></code>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("animateMotion") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/path/index.html b/files/pt-br/web/svg/element/path/index.html new file mode 100644 index 0000000000..6945faad81 --- /dev/null +++ b/files/pt-br/web/svg/element/path/index.html @@ -0,0 +1,129 @@ +--- +title: path +slug: Web/SVG/Element/path +tags: + - Caminho + - Elemento + - Forma + - Path + - Referencia + - SVG + - graficos +translation_of: Web/SVG/Element/path +--- +<div>{{SVGRef}}</div> + +<div class="callout-box"><strong><a href="/en-US/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">Primeiros passos</a></strong><br> +Este tutorial irá te ajudar a utilizar caminhos no SVG.</div> + +<h2 id="Summary" name="Summary">Resumo</h2> + +<p>O elemento <code>path</code> é um elemento genérico para definir uma forma. Todas as formas básicas poderão ser criadas com elemento de caminho.</p> + +<h2 id="Usage_context" name="Usage_context">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo" name="Exemplo">Exemplo</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 400 400" + xmlns="http://www.w3.org/2000/svg"> + + <path d="M 100 100 L 300 100 L 200 300 z" + fill="orange" stroke="black" stroke-width="3" /> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Exemplo",200,215)}}</p> + +<h2 id="Attributes" name="Attributes">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Core" title="SVG/Attribute#Core">Atributos centraiss</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="SVG/Attribute#GraphicalEvent">Atributos de evento gráfico</a> »</li> + <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">Interface DOM</h2> + +<p>Este elemento implementa a interace do <code><a href="/en-US/docs/DOM/SVGPathElement" title="DOM/SVGPathElement">SVGPathElement</a></code>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Esta tabela é baseada <a href="/en-US/docs/SVG/Compatibility_sources" title="SVG/Compatibility sources">nestas fontes</a>.</p> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li><a href="/en-US/docs/SVG/Tutorial/Paths" title="SVG/Tutorial/Paths">O tutorial sobre SVG "Primeiros passos" na MDN: Path</a></li> +</ul> diff --git a/files/pt-br/web/svg/element/pattern/index.html b/files/pt-br/web/svg/element/pattern/index.html new file mode 100644 index 0000000000..bb03db0c24 --- /dev/null +++ b/files/pt-br/web/svg/element/pattern/index.html @@ -0,0 +1,53 @@ +--- +title: pattern +slug: Web/SVG/Element/pattern +tags: + - Elemento + - Referência(2) + - SVG +translation_of: Web/SVG/Element/pattern +--- +<div>{{SVGRef}}</div> + +<p>Um padrão é utilizado para preenchimento ou traçado de um objeto utilizando um objeto gráfico pré-definido o qual pode ser replicado ("ladrilhado") com intervalos fixados em x e y para cobrir as áreas que serão pintadas. Padrões são definidos utilizando o elemento <code>pattern</code> e, em seguida, referenciado pelas propriedades <code>fill</code> e <code>stroke</code> em um determinado elemento gráfico para indicar que o elemento em questão deveria ser preenchido ou traçado com o padrão referenciado.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3268/pattern.svg" title="https://developer.mozilla.org/files/3268/pattern.svg">pattern.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <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="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGPatternElement" title="en/DOM/SVGPatternElement">SVGPatternElement</a></code>.</p> diff --git a/files/pt-br/web/svg/element/polygon/index.html b/files/pt-br/web/svg/element/polygon/index.html new file mode 100644 index 0000000000..1221b126f9 --- /dev/null +++ b/files/pt-br/web/svg/element/polygon/index.html @@ -0,0 +1,105 @@ +--- +title: polygon +slug: Web/SVG/Element/polygon +tags: + - Elemento + - Gráficos SVG + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/polygon +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>polygon</code> define uma forma fechada que consiste em um conjunto de segmentos de linha reta reta ligados.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3259/polygon.svg" title="https://developer.mozilla.org/files/3259/polygon.svg">polygon.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("points") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGPolygonElement" title="en/DOM/SVGPolygonElement">SVGPolygonElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("polyline") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/polyline/index.html b/files/pt-br/web/svg/element/polyline/index.html new file mode 100644 index 0000000000..ae32e3dc96 --- /dev/null +++ b/files/pt-br/web/svg/element/polyline/index.html @@ -0,0 +1,105 @@ +--- +title: polyline +slug: Web/SVG/Element/polyline +tags: + - Elemento + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/polyline +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>polyline</code> é uma forma básica do SVG, utilizado para criar uma séries de linhas retas conectando vários pontos. Tipicamente um <code>polyline</code> é usado para criar formas abertas.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3260/polyline.svg" title="https://developer.mozilla.org/files/3260/polyline.svg">polyline.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("points") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGPolylineElement" title="en/DOM/SVGPolylineElement">SVGPolylineElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('8.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("polygon") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/radialgradient/index.html b/files/pt-br/web/svg/element/radialgradient/index.html new file mode 100644 index 0000000000..19e42a227e --- /dev/null +++ b/files/pt-br/web/svg/element/radialgradient/index.html @@ -0,0 +1,114 @@ +--- +title: radialGradient +slug: Web/SVG/Element/radialGradient +tags: + - Elemento + - Gradiente SVG + - Referência(2) + - SVG +translation_of: Web/SVG/Element/radialGradient +--- +<div>{{SVGRef}}</div> + +<p><code>radialGradient</code> permite que autores definam gradientes radiais para preencher ou tracejar elementos gráficos</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>» <a href="https://developer.mozilla.org/files/3266/radialGradient.svg" title="https://developer.mozilla.org/files/3266/radialGradient.svg">radialGradient.svg</a></p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</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("spreadMethod") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGRadialGradientElement" title="en/DOM/SVGRadialGradientElement">SVGRadialGradientElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatChrome('1.0') }}</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h3 id="Notas_específicas_WebKit">Notas específicas WebKit</h3> + +<p>WebKit não suporta interpolação de cor (<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=6034">bug 6034</a>).</p> + +<h2 id="Relacionado">Relacionado</h2> + +<ul> + <li>{{ SVGElement("linearGradient") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/rect/index.html b/files/pt-br/web/svg/element/rect/index.html new file mode 100644 index 0000000000..ebcfd18574 --- /dev/null +++ b/files/pt-br/web/svg/element/rect/index.html @@ -0,0 +1,117 @@ +--- +title: rect +slug: Web/SVG/Element/rect +tags: + - Elemento + - Gráficos SVG + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code><strong><rect></strong></code> é uma <a href="/pt-BR/docs/Web/SVG/Tutorial/Basic_Shapes">forma SVG básica</a> que desenha retângulos, definidos por sua posição, largura e altura. Os retângulos podem ter seus cantos arredondados.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Simple rectangle --> + <rect width="100" height="100" /> + + <!-- Rounded corner rectangle --> + <rect x="120" width="100" height="100" rx="15" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, '100%')}}</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt>{{SVGAttr("x")}}</dt> + <dd>The x coordinate of the rect.<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>The y coordinate of the rect.<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("width")}}</dt> + <dd>The width of the rect.<br> + <small><em>Value type</em>: <code>auto</code>|<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("height")}}</dt> + <dd>The height of the rect.<br> + <small><em>Value type</em>: <code>auto</code>|<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("rx")}}</dt> + <dd>The horizontal corner radius of the rect. Defaults to <code>ry</code> if it is specified.<br> + <small><em>Value type</em>: <code>auto</code>|<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("ry")}}</dt> + <dd>The vertical corner radius of the rect. Defaults to <code>rx</code> if it is specified.<br> + <small><em>Value type</em>: <code>auto</code>|<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("pathLength")}}</dt> + <dd>The total length of the rectangle's perimeter, in user units.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Default value</em>: <em>none</em>; <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>, <code>height</code>, <code>rx</code> and <code>ry</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p> +</div> + +<h3 id="Global_attributes">Global attributes</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></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="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</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#RectElement', '<rect>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#RectElement', '<rect>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.rect")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other basic SVG shapes: {{SVGElement('circle')}}, {{ SVGElement('ellipse') }}, {{ SVGElement('line') }}, <strong>{{ SVGElement('polygon') }}</strong>, {{ SVGElement('polyline') }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/script/index.html b/files/pt-br/web/svg/element/script/index.html new file mode 100644 index 0000000000..7468e98706 --- /dev/null +++ b/files/pt-br/web/svg/element/script/index.html @@ -0,0 +1,129 @@ +--- +title: script +slug: Web/SVG/Element/script +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/script +--- +<p>Um elemento <code>script</code> é equivalente a um elemento <a href="/pt-BR/HTML/Element/Script"><code>script</code></a> em HTML e, portanto, é o lugar para os scripts (por exemplo, ECMAScript).</p> + +<p>Quaisquer funções definidas dentro de qualquer elemento <code>script</code> tem um escopo global em todo o documento atual.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O seguinte trecho de código demonstra o uso da tag <code>script</code> do SVG. Neste código, nós usamos o JavaScript para alterar o raio do elemento SVG {{SVGElement("circle")}}.</p> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> + <script type="text/javascript"> + // <![CDATA[ + function change(evt) { + var target = evt.target; + var radius = target.getAttribute("r"); + + if (radius == 15) { + radius = 45; + } else { + radius = 15; + } + + target.setAttribute("r",radius); + } + // ]]> + </script> + + <circle cx="50" cy="50" r="45" fill="green" + onclick="change(evt)" /> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Exemplo",150,165)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{SVGAttr("type")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_interface">DOM interface</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGScriptElement">SVGScriptElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/HTML/Element/Script">Elemento <code>script</code> em HTML</a></li> +</ul> + +<p>{{SVGRef}}</p> diff --git a/files/pt-br/web/svg/element/set/index.html b/files/pt-br/web/svg/element/set/index.html new file mode 100644 index 0000000000..d09faa0049 --- /dev/null +++ b/files/pt-br/web/svg/element/set/index.html @@ -0,0 +1,48 @@ +--- +title: set +slug: Web/SVG/Element/set +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/set +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>set</code> fornece um meio simples para apenas definir o valor de um atributo para uma duração específica. Todos os tipos de atributos são suportados, incluindo aqueles que não podem ser razoavelmente interpolado, como uma string ou valores booleanos. O elemento <code>set</code> não é aditivo. Atributos aditivos e acumulados não são permitidos e serão ignorados se especificado.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#AnimationEvent" title="en/SVG/Attribute#AnimationEvent">Atributos de eventos da animação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#AnimationAttributeTarget" title="en/SVG/Attribute#AnimationAttributeTarget">Atributos de destino do atributo da animação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">Atributos de cronometragem da animação</a> »</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("to") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGSetElement" title="en/DOM/SVGSetElement">SVGSetElement</a></code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("animate") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/stop/index.html b/files/pt-br/web/svg/element/stop/index.html new file mode 100644 index 0000000000..ab2819bf3e --- /dev/null +++ b/files/pt-br/web/svg/element/stop/index.html @@ -0,0 +1,124 @@ +--- +title: stop +slug: Web/SVG/Element/stop +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/stop +--- +<div>{{SVGRef}}</div> + +<p>A rampa de cores para utilizar em um gradiente é definido pelo elemento <code>stop</code> que é elemento filho do elemento {{SVGElement("linearGradient")}} ou do elemento {{SVGElement("radialGradient")}}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 80 40" + xmlns="http://www.w3.org/2000/svg"> + + <defs> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="#F60" /> + <stop offset="95%" stop-color="#FF6" /> + </linearGradient> + </defs> + + <!-- Outline the drawing area in black --> + <rect fill="none" stroke="black" + x="0.5" y="0.5" width="79" height="39"/> + + <!-- The rectangle is filled using a linear gradient --> + <rect fill="url(#MyGradient)" stroke="black" stroke-width="1" + x="10" y="10" width="60" height="20"/> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Exemplo",160,95)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{SVGAttr("offset")}}</li> + <li>{{SVGAttr("stop-color")}}</li> + <li>{{SVGAttr("stop-opacity")}}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/Web/API/SVGStopElement">SVGStopElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatIE('1.0')}}</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('9.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/docs/Web/SVG/Compatibility_sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{SVGElement("linearGradient")}}</li> + <li>{{SVGElement("radialGradient")}}</li> +</ul> diff --git a/files/pt-br/web/svg/element/style/index.html b/files/pt-br/web/svg/element/style/index.html new file mode 100644 index 0000000000..c68e13cfde --- /dev/null +++ b/files/pt-br/web/svg/element/style/index.html @@ -0,0 +1,117 @@ +--- +title: style +slug: Web/SVG/Element/style +tags: + - Elemento + - Estilo + - Referencia + - SVG +translation_of: Web/SVG/Element/style +--- +<div>{{SVGRef}}</div> + +<p>O elemento de estilo possibilita que folhas de estilos sejam incorporadas diretamente ao conteúdo do SVG. O elemento <code>style</code> do SVG possui os mesmos atributos que o elemento correspondente no HTML (veja o elemento no HTML {{ HTMLElement("style") }}).</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> + <style> + /* <![CDATA[ */ + circle { + fill: orange; + stroke: black; + stroke-width: 10px; // Note que este valor depende do valor do pixel definido no viewBox + } + /* ]]> */ + </style> + + <circle cx="50" cy="50" r="40" /> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Exemplo",150,165)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos centrais</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("type") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("title") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>O elemento implementa a interface do <code><a href="/en/DOM/SVGStyleElement" title="en/DOM/SVGStyleElement">SVGStyleElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nestas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/en/HTML/Element/style" title="en/HTML/Element/style">Elemento <style> no HTML</a></li> +</ul> diff --git a/files/pt-br/web/svg/element/svg/index.html b/files/pt-br/web/svg/element/svg/index.html new file mode 100644 index 0000000000..5a460fab5b --- /dev/null +++ b/files/pt-br/web/svg/element/svg/index.html @@ -0,0 +1,125 @@ +--- +title: svg +slug: Web/SVG/Element/svg +tags: + - Elemento + - Fragmento + - Referencia + - SVG + - SVG Container +translation_of: Web/SVG/Element/svg +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>svg</code> é um contêiner que define um novo sistema de coordenadas e <a href="/pt-BR/docs/Web/SVG/Attribute/viewBox">janela de visualização</a>. É usado como o elemento mais externo dos documentos SVG, mas também pode ser usado para incorporar um fragmento SVG dentro de um documento SVG ou HTML.</p> + +<div class="note"> +<p><strong>Note:</strong> The <code>xmlns</code> attribute is only required on the outermost <code>svg</code> element of <em>SVG documents</em>. It is unnecessary for inner <code>svg</code> elements or inside HTML documents.</p> +</div> + +<div id="Exeemple"> +<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 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="Attributes">Attributes</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>The default scripting language used by the SVG fragment.<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>The default style sheet language used by the SVG fragment.<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>The displayed height of the rectangular viewport. (Not the height of its coordinate system.)<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>Which version of SVG is used for the inner content of the element.<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>The SVG viewport coordinates for the current SVG fragment.<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>The displayed width of the rectangular viewport. (Not the width of its coordinate system.)<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><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 these attributes can also be used as CSS properties.</p> +</div> + +<h3 id="Global_attributes">Global attributes</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 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="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.svg")}}</p> diff --git a/files/pt-br/web/svg/element/switch/index.html b/files/pt-br/web/svg/element/switch/index.html new file mode 100644 index 0000000000..8bae2a9130 --- /dev/null +++ b/files/pt-br/web/svg/element/switch/index.html @@ -0,0 +1,99 @@ +--- +title: switch +slug: Web/SVG/Element/switch +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/switch +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>switch</code> avalia os atributos {{SVGAttr("requiredFeatures")}}, {{SVGAttr("requiredExtensions")}} e o {{SVGAttr("systemLanguage")}} diretamente nos seus elementos filhos em ordem e, em seguida, processa e renderiza o primeiro filho que possua este atributo definido como verdadeiro. Todos os outros serão ignorados e, portanto, não renderizados. Se o elemento filho é um elemento recipiente como o {{SVGElement("g")}}, então toda a subárvore será ou processada/renderizada ou ignorada/não renderizada.</p> + +<p>Observe que os valores das propriedades <code>display</code> e <code>visibility</code> não possuem efeitos sob o processamento do elemento <code>switch</code>. Em particular, definindo <code>display</code> como <code>none</code> em um filho de um elemento <code>switch</code> não possuirá efeito sob o teste de verdadeiro/falso associado com o processamento de um elemento <code>switch</code>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/docs/Web/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> + <li>{{SVGAttr("transform")}}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{SVGAttr("allowReorder")}}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/Web/DOM/SVGSwitchElement">SVGSwitchElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>1.8</td> + <td>9.0</td> + <td>8.0</td> + <td>3.0.4</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>3.0</td> + <td>{{CompatUnknown}}</td> + <td>1.8</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>3.0.4</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/docs/Web/SVG/Compatibility_sources">nessas fontes</a>.</p> diff --git a/files/pt-br/web/svg/element/symbol/index.html b/files/pt-br/web/svg/element/symbol/index.html new file mode 100644 index 0000000000..0505aa623c --- /dev/null +++ b/files/pt-br/web/svg/element/symbol/index.html @@ -0,0 +1,121 @@ +--- +title: symbol +slug: Web/SVG/Element/symbol +tags: + - Container SVG + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/symbol +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>symbol</code> é usado para definir um template que pode ser inicializado por um elemento {{ SVGElement("use") }}. A utilização de elementos <code>symbol</code> para gráficos que são usados várias vezes no mesmo documento acrescenta estrutura e semântica. Documentos que são ricos em estrutura podem ser renderizados graficamente, através da fala, ou do braille, e assim promover a acessibilidade. Note que o elemento <code>symbol</code> em si não é renderizado. Somente instâncias de um elemento <code>symbol</code> (por exemplo, uma referência à um elemento <code>symbol</code> feita por um elemento {{ SVGElement("use") }}) são renderizadas.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><svg> +<!-- definição de symbol NUNCA é renderizada --> +<symbol id="sym01" viewBox="0 0 150 110"> + <circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/> + <circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/> +</symbol> + +<!-- renderização por elementos "use" --> +<use xlink:href="#sym01" + x="0" y="0" width="100" height="50"/> +<use xlink:href="#sym01" + x="0" y="50" width="75" height="38"/> +<use xlink:href="#sym01" + x="0" y="100" width="50" height="25"/> +</svg> +</pre> + +<p>{{EmbedLiveSample("Exemplo",150,110)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="pt-BR/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="pt-BR/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="pt-BR/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Esse elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGSymbolElement" title="pt-BR/DOM/SVGSymbolElement">SVGSymbolElement</a></code>.</p> + +<h2 id="Compatibilidade">Compatibilidade</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{ CompatGeckoDesktop('1.8') }}</td> + <td>{{ CompatIE('9.0') }}</td> + <td>{{ CompatOpera('9.0') }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatAndroid('3.0') }}</td> + <td>{{ CompatGeckoMobile('1.8') }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatSafari('3.0.4') }}</td> + </tr> + </tbody> +</table> +</div> + +<p>Essa tabela é baseada <a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/text/index.html b/files/pt-br/web/svg/element/text/index.html new file mode 100644 index 0000000000..072c383cba --- /dev/null +++ b/files/pt-br/web/svg/element/text/index.html @@ -0,0 +1,122 @@ +--- +title: text +slug: Web/SVG/Element/text +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/text +--- +<div>{{SVGRef}}</div> + +<p>O elemento SVG <code><strong><text></strong></code> desenha um elemento gráfico que consiste em texto. É possível aplicar um gradiente, pattern, clipping path, máscara ou filtro ao <code><text></code>, como qualquer outro elemento gráfico SVG.</p> + +<p>If text is included in SVG not inside of a <code><text></code> element, it is not rendered. This is different than being hidden by default, as setting the {{SVGAttr('display')}} property won't show the text.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[8]"><svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> + <style> + .small { font: italic 13px sans-serif; } + .heavy { font: bold 30px sans-serif; } + + /* Note that the color of the text is set with the * + * fill property, the color property is for HTML only */ + .Rrrrr { font: italic 40px serif; fill: red; } + </style> + + <text x="20" y="35" class="small">My</text> + <text x="40" y="35" class="heavy">cat</text> + <text x="55" y="55" class="small">is</text> + <text x="65" y="55" class="Rrrrr">Grumpy!</text> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, '100%')}}</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt>{{SVGAttr("x")}}</dt> + <dd>The x coordinate of the starting point of the text baseline.<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>The y coordinate of the starting point of the text baseline.<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("dx")}}</dt> + <dd>Shifts the text position horizontally from a previous text element.<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>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("dy")}}</dt> + <dd>Shifts the text position vertically from a previous text element.<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>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("rotate")}}</dt> + <dd>Rotates orientation of each individual glyph. Can rotate glyphs individually.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#List-of-Ts"><strong><list-of-number></strong></a> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("lengthAdjust")}}</dt> + <dd>How the text is stretched or compressed to fit the width defined by the <code>textLength</code> attribute.<br> + <small><em>Value type</em>: <code>spacing</code>|<code>spacingAndGlyphs</code>; <em>Default value</em>: <code>spacing</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("textLength")}}</dt> + <dd>A width that the text should be scaled to fit.<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>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</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></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('dominant-baseline')}}, {{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('text-anchor')}}, {{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="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</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', '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>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.text")}}</p> + +<h2 id="Related">Related</h2> + +<ul> + <li>Other SVG text related elements: <strong>{{SVGElement("tspan")}}</strong>, {{SVGElement("tref")}}, {{SVGElement("altGlyph")}}</li> +</ul> diff --git a/files/pt-br/web/svg/element/textpath/index.html b/files/pt-br/web/svg/element/textpath/index.html new file mode 100644 index 0000000000..aad3f76132 --- /dev/null +++ b/files/pt-br/web/svg/element/textpath/index.html @@ -0,0 +1,76 @@ +--- +title: textPath +slug: Web/SVG/Element/textPath +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/textPath +--- +<div>{{SVGRef}}</div> + +<p>Assim como o texto escrito em uma linha reta, o SVG também inclui a capacidade de colocar um texto ao longo de uma forma de um elemento {{ SVGElement("path") }}. Para especificar que um bloco de texto é renderizado ao longo da forma de um {{ SVGElement("path") }}, inclua o texto em um elemento <code>textPath</code> o qual inclui um atributo <code>xlink:href</code> com uma referência a um elemento {{ SVGElement("path") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <path id="MyPath" + d="M 100 200 + C 200 100 300 0 400 100 + C 500 200 600 300 700 200 + C 800 100 900 100 900 100" /> + </defs> + + <use xlink:href="#MyPath" fill="none" stroke="red" /> + + <text font-family="Verdana" font-size="42.5"> + <textPath xlink:href="#MyPath"> + Nós vamos para cima, para baixo, para cima + </textPath> + </text> + + <!-- Show outline of the viewport using 'rect' element --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke="black" stroke-width="2" /> +</svg> +</pre> + +<p>Resultado:</p> + +<p>{{EmbedLiveSample("Exemplo",500,175)}}</p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGTextPathElement" title="en/DOM/SVGTextPathElement">SVGTextPathElement</a></code>.</p> diff --git a/files/pt-br/web/svg/element/title/index.html b/files/pt-br/web/svg/element/title/index.html new file mode 100644 index 0000000000..2e549fe2c6 --- /dev/null +++ b/files/pt-br/web/svg/element/title/index.html @@ -0,0 +1,123 @@ +--- +title: title +slug: Web/SVG/Element/title +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/title +--- +<div>{{SVGRef}}</div> + +<p>Cada elemento recipiente ou elemento gráfico em um desenho SVG pode fornecer uma descrição de <code>title</code>, onde esta descrição é de apenas texto. Quando o atual fragmento do documento SVG é renderizado em aparelhos audiovisuais, o elemento <code>title</code> não é renderizado como parte do gráfico. Entretanto, alguns agentes de usuários poderão, por exemplo, exibir o elemento <code>title</code> como uma dica. Apresentações alternativas são possíveis, tanto visual quanto auditiva, que exibem o elemento <code>title</code> mas não mostram o elemento <code>path</code> ou outros elementos gráficos. O elemento <code>title</code> geralmente aumenta a acessibilidade de documentos SVG.</p> + +<p>Geralmente o elemento <code>title</code> deve ser o primeiro elemento filho de seu pai. Observe que estas implementações que utilizam o <code>title</code> para exibir uma dica, muitas vezes só o farão se o <code>title</code> for o primeiro elemento filho de seu pai.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O seguinte trecho de código demonstra a utilização da tag SVG <code><title></code>.</p> + +<pre class="brush: xml"><svg width="500" height="300" xmlns="http://www.w3.org/2000/svg"> + <g> + <title>Exemplo Demonstrativo de Título SVG</title> + <rect x="10" y="10" width="200" height="50" + style="fill:none; stroke:blue; stroke-width:1px"/> + </g> +</svg> +</pre> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core">Atributos principais</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<p><em>Não existem atributos específicos</em></p> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGTitleElement">SVGTitleElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop('1.8')}}</td> + <td>{{CompatIE('9.0')}}</td> + <td>{{CompatOpera('8.0')}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + <tr> + <td>Tooltip display</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop('2.0')}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatAndroid('3.0')}}</td> + <td>{{CompatGeckoMobile('1.8')}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatSafari('3.0.4')}}</td> + </tr> + <tr> + <td>Tooltip display</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop('2.0')}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>A tabela é baseada <a href="/pt-BR/SVG/Compatibility_sources">nessas fontes</a>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("desc") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/tref/index.html b/files/pt-br/web/svg/element/tref/index.html new file mode 100644 index 0000000000..3bb3de6878 --- /dev/null +++ b/files/pt-br/web/svg/element/tref/index.html @@ -0,0 +1,123 @@ +--- +title: tref +slug: Web/SVG/Element/tref +tags: + - Conteúdo Textual + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/tref +--- +<div>{{SVGRef}}</div> + +<p>O conteúdo textual para o {{ SVGElement("text") }} podem ser dados de caracteres diretamente embedados com o elemento {{ SVGElement("text") }} ou o conteúdo de dados de caracteres de um elemento referenciado, onde a referência é especificada com um elemento <code>tref</code>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: xml"><svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <text id="ReferencedText"> + Referenced character data + </text> + </defs> + + <text x="100" y="100" font-size="45" > + Inline character data + </text> + + <text x="100" y="200" font-size="45" fill="red" > + <tref xlink:href="#ReferencedText"/> + </text> + + <!-- Show outline of canvas using 'rect' element --> + <rect x="1" y="1" width="998" height="298" + fill="none" stroke-width="2" /> +</svg> +</pre> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGTRefElement" title="en/DOM/SVGTRefElement">SVGTRefElement</a></code>.</p> + +<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th scope="col">Recurso</th> + <th scope="col">Chrome</th> + <th scope="col">Firefox (Gecko)</th> + <th scope="col">Internet Explorer</th> + <th scope="col">Opera</th> + <th scope="col">Safari</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("text") }}</li> +</ul> diff --git a/files/pt-br/web/svg/element/tspan/index.html b/files/pt-br/web/svg/element/tspan/index.html new file mode 100644 index 0000000000..ae744d6174 --- /dev/null +++ b/files/pt-br/web/svg/element/tspan/index.html @@ -0,0 +1,112 @@ +--- +title: tspan +slug: Web/SVG/Element/tspan +tags: + - Conteúdo Textual + - Elemento + - Referencia + - Referência(2) + - SVG +translation_of: Web/SVG/Element/tspan +--- +<div>{{SVGRef}}</div> + +<p>O elemento SVG <code><strong><tspan></strong></code> define um subtexto dentro de um elemento {{SVGElement ('text')}} ou outro elemento <code><tspan></code>. Permite o ajuste do estilo e / ou posição desse subtexto, conforme necessário.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[9]"><svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> + <style> + text { font: italic 12px serif; } + tspan { font: bold 10px sans-serif; fill: red; } + </style> + + <text x="10" y="30" class="small"> + You are + <tspan>not</tspan> + a banana! + </text> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, '100%')}}</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt>{{SVGAttr("x")}}</dt> + <dd>The x coordinate of the starting point of the text baseline.<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: none; Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("y")}}</dt> + <dd>The y coordinate of the starting point of the text baseline.<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: none; Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("dx")}}</dt> + <dd>Shifts the text position horizontally from a previous text element.<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>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("dy")}}</dt> + <dd>Shifts the text position vertically from a previous text element.<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: none; Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("rotate")}}</dt> + <dd>Rotates orientation of each individual glyph. Can rotate glyphs individually.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#List-of-Ts"><strong><list-of-number></strong></a> ; <em>Default value</em>: none; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("lengthAdjust")}}</dt> + <dd>How the text is stretched or compressed to fit the width defined by the <code>textLength</code> attribute.<br> + <small><em>Value type</em>: <code>spacing</code>|<code>spacingAndGlyphs</code>; <em>Default value</em>: <code>spacing</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("textLength")}}</dt> + <dd>A width that the text should be scaled to fit.<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>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</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></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('dominant-baseline')}}, {{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('text-anchor')}}, {{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="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</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', 'text.html#TextElement', '<tspan>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.tspan")}}</p> diff --git a/files/pt-br/web/svg/element/use/index.html b/files/pt-br/web/svg/element/use/index.html new file mode 100644 index 0000000000..7502e54a6e --- /dev/null +++ b/files/pt-br/web/svg/element/use/index.html @@ -0,0 +1,156 @@ +--- +title: use +slug: Web/SVG/Element/use +tags: + - Elemento + - Gráficos(2) + - Referencia + - Referência(2) + - SVG + - graficos +translation_of: Web/SVG/Element/use +--- +<div>{{SVGRef}}</div> + +<p>O elemento <code>use</code> cria instâncias dentro de um documento SVG e os duplica em outro local. O efeito é o mesmo se as instâncias forem profundamente clonadas em um DOM não exposto, e então coladas onde o elemento <code>use</code> está (muito parecido com <a href="/pt-BR/docs/Web/HTML/Element/template">elementos de template</a> clonados no HTML5). Como as instâncias clonadas não são expostas, é preciso ter cuidado ao utilizar <a href="/pt-BR/CSS" title="en/CSS">CSS</a> para estilizar o elemento <code>use</code> e seus descendentes ocultos. Não há garantia de que atributos CSS sejam herdados pelo DOM oculto e clonado, a menos que você os solicite explicitamente usando <a href="/pt-BR/CSS/inheritance" title="en/CSS/inheritance">herança CSS</a>.</p> + +<p>Por motivos de segurança alguns navegadores poderão aplicar uma política de "mesma origem" com elementos <code>use</code>, bem como poderão recusar o carregamento de uma URI de múltiplas origens no atributo <code>xlink:href</code>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: xml" id="Attributes"><svg width="100%" height="100%" xmlns="<a href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" xmlns:xlink="<a href="http://www.w3.org/1999/xlink">http://www.w3.org/1999/xlink</a>"> + <style> + .classA { fill:red } + </style> + <defs> + <g id="Port"> + <circle style="fill:inherit" r="10"/> + </g> + </defs> + + <text y="15">black</text> + <use x="50" y="10" xlink:href="#Port" /> + <text y="35">red</text> + <use x="50" y="30" xlink:href="#Port" class="classA"/> + <text y="55">blue</text> + <use x="50" y="50" xlink:href="#Port" style="fill:blue"/> + </svg> +</pre> + +<p> </p> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Atributos de processamento condicional</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Atributos de eventos gráficos</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Atributos de apresentação</a> »</li> + <li><a href="/pt-BR/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGUseElement" title="en/DOM/SVGUseElement">SVGUseElement</a></code>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from external URI</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatNo()}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from data: URI</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("10.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Recurso</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from external URI</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>Load from data: URI</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/pt-br/web/svg/element/view/index.html b/files/pt-br/web/svg/element/view/index.html new file mode 100644 index 0000000000..7081544b10 --- /dev/null +++ b/files/pt-br/web/svg/element/view/index.html @@ -0,0 +1,107 @@ +--- +title: view +slug: Web/SVG/Element/view +tags: + - Elemento + - Referencia + - SVG +translation_of: Web/SVG/Element/view +--- +<div>{{SVGRef}}</div> + +<p>Uma <code><strong>view</strong></code> é uma maneira definida de visualizar a imagem, como um nível de zoom ou uma visualização de detalhes.</p> + +<h2 id="Usage_context">Usage context</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes">Attributes</h2> + +<h3 id="Global_attributes">Global attributes</h3> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Attribute#Aria_attributes" title="en/SVG/Attribute#Core">Aria attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Core_attributes" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Global_event_attributes" title="en/SVG/Attribute#Core">Global event attributes</a> »</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="Specific_attributes">Specific attributes</h3> + +<ul> + <li>{{SVGAttr("viewBox")}}</li> + <li>{{SVGAttr("preserveAspectRatio")}}</li> + <li>{{SVGAttr("zoomAndPan")}}</li> + <li>{{SVGAttr("viewTarget")}}</li> +</ul> + +<h2 id="Example">Example</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html"><svg width="600" height="200" viewBox="0 0 600 200" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <radialGradient id="gradient"> + <stop offset="0%" stop-color="#8cffa0" /> + <stop offset="100%" stop-color="#8ca0ff" /> + </radialGradient> + </defs> + + <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> + + <view id="halfSizeView" viewBox="0 0 1200 400"/> + <view id="normalSizeView" viewBox="0 0 600 200"/> + <view id="doubleSizeView" viewBox="0 0 300 100"/> + + <a xlink:href="#halfSizeView"> + <text x="5" y="20" font-size="20">half size</text> + </a> + <a xlink:href="#normalSizeView"> + <text x="5" y="40" font-size="20">normal size</text> + </a> + <a xlink:href="#doubleSizeView"> + <text x="5" y="60" font-size="20">double size</text> + </a> +</svg></pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 600, 200)}}</p> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the {{domxref("SVGViewElement")}} interface.</p> + +<h2 id="Specifications">Specifications</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', 'linking.html#ViewElement', '<view>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'linking.html#ViewElement', '<view>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + + + +<p>{{Compat("svg.elements.view")}}</p> diff --git a/files/pt-br/web/svg/element/vkern/index.html b/files/pt-br/web/svg/element/vkern/index.html new file mode 100644 index 0000000000..162e193643 --- /dev/null +++ b/files/pt-br/web/svg/element/vkern/index.html @@ -0,0 +1,50 @@ +--- +title: vkern +slug: Web/SVG/Element/vkern +tags: + - Elemento + - Fonte SVG + - Referencia + - SVG +translation_of: Web/SVG/Element/vkern +--- +<div>{{SVGRef}}</div> + +<p>A distância vertical entre dois glifos de fontes cima-para-baixo podem ser bem otimizadas com um elemento <code>vkern</code>. Esse processo é conhecido como <a class="external" href="http://en.wikipedia.org/wiki/Kerning">Kerning</a>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<p>{{svginfo}}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<h2 id="Atributos">Atributos</h2> + +<h3 id="Atributos_globais">Atributos globais</h3> + +<ul> + <li><a href="/pt-BR/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> +</ul> + +<h3 id="Atributos_específicos">Atributos específicos</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("k") }}</li> +</ul> + +<h2 id="Interface_DOM">Interface DOM</h2> + +<p>Este elemento implementa a interface do <code><a href="/pt-BR/DOM/SVGVKernElement" title="en/DOM/SVGVKernElement">SVGVKernElement</a></code>.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("hkern") }}</li> + <li><a href="/pt-BR/SVG/Tutorial/SVG_fonts" title="en/SVG/Tutorial/SVG_Fonts">Tutorial SVG: SVG fonts</a></li> +</ul> |