diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/web/svg | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pt-br/web/svg')
67 files changed, 8055 insertions, 0 deletions
diff --git a/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html b/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..69d74d91db --- /dev/null +++ b/files/pt-br/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,213 @@ +--- +title: Applying SVG effects to HTML content +slug: Web/SVG/Applying_SVG_effects_to_HTML_content +tags: + - CSS + - Guía + - SVG + - XHTML +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +<div>{{gecko_minversion_header("1.9.1")}}</div> + +<p>Firefox 3.5 introduziu suporte para uso do <a href="/en-US/docs/SVG" title="SVG">SVG</a> como um componente do <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> em ordem para introduzir efeitos SVG no conteúdo HTML.</p> + +<p>Você pode embutir o SVG nos estilos dentro do mesmo documento, ou com um <em>stylesheet</em> externo.</p> + +<div class="note"> +<p> Referencias para SVG em arquivos externos podem ter mesma origem como as do documento originário.</p> +</div> + +<h2 id="Usando_SVG_embutido">Usando SVG embutido</h2> + +<p>Para aplicar um efeito SVG usando o estilo CSS, você precisa primeiro criar um estilo CSS que faz referência ao SVG que deseja aplicar.</p> + +<pre class="brush: html"><style>.stylename { mask: url(#localstyle); }</style> +</pre> + +<p>Dentro do exemplo acima, o novo estilo, identificado como "stylename", é uma máscara SVG referenciada pelo ID "localstyle". Quando isso é estabelecido, a máscara pode ser aplicada a qualquer elemento usando o estilo CSS.</p> + +<p>Isso soa mais complicado do que realmente é; Olharemos mais de perto os exemplos para termos uma boa ideia como isso funciona.</p> + +<p>Então você pode aplicar três estilos: O uso do <code>mask</code>, <code>clip-path</code>, ou <code>filter</code>.</p> + +<h3 id="Exemplo_Masking">Exemplo: Masking</h3> + +<p>Por exemplo, você pod estabelecer um estilo CSS que provêm uma máscara gradiente para um documento HTML usando código SVG similar ao seguinte:</p> + +<div class="warning"> +<p><strong><code>Namespacing</code> não é válido no HTML5</strong>, deixe de lado as tags "svg:" para documentos HTML.</p> +</div> + +<pre class="brush: html"><svg height="0"> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-color="white" stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/> + </mask> +</svg> +</pre> + +<pre class="brush: css">.target { + mask: url(#m1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; + margin: 1em; +}</pre> + +<p>Preste atenção na linha 1, a máscara é especificada usando um URL para o ID "#m1", que é um ID para a máscara SVG específicada abaixo. Todo o que foi especificado detalha mais sobre a máscara de gradiente.</p> + +<p>Na realidade aplicar o efeito SVG para XHTML ou HTML é simplesmente feito atribuindo um estilo <code>target </code>definido abaixo do elemento, como esse:</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +<p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p></pre> + +<p>O exemplo acima pode rodar com uma máscara aplicadaa ele.</p> + +<p>{{ EmbedLiveSample('Exemplo_Masking', 360, 270) }}</p> + +<h3 id="Exemplo_Clipping">Exemplo: Clipping</h3> + +<p>Esse exemplo demonstra como usar SVG to recortar conteúdo HTML. Esse exemplo demonstra como usar SVG para recortar conteúdo HTML. Quando você ver a <a href="/@api/deki/files/3214/=clipdemo.xhtml">demonstração</a>, não irá notar que as áreas quentes para links são recortes.</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +<p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +<button onclick="toggleRadius()">Toggle radius</button> +<svg height="0"> + <clipPath id="c1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg> +</pre> + +<pre class="brush: css">.target { + clip-path: url(#c1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; + margin: 1em; +}</pre> + +<p>Isso estabelece uma área recortada composta por um círculo e um retângulo, e atribui para ela ID "#c1". Isso é então referenciado por um estilo. Quando o estilo <code>target</code> é estabelecido desse modo, <code>clip-path</code> pode ser atribuido para qualquer outro elemento.</p> + +<div class="note"> +<p>Também você pode fazer mudanças no SVG em tempo real e ver suas alterações imediatamente afetar a renderização do HTML. Por exemplo, você pode redimensionar o círculo dentro do caminho do recorte estabelecendo o seguinte:</p> +</div> + +<pre class="brush: js">function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +</pre> + +<p>{{ EmbedLiveSample('Exemplo_Clipping', 360,290) }}</p> + +<p>O exemplo inclui um botão que você pode clicar para alterar o caminho do recorte <em>(clip-path) </em>e ver as alterações tomando efeito.</p> + +<h3 id="Exemplo_Filtering">Exemplo: Filtering</h3> + +<p>Esse exemplo demonstra como você pode aplicar o filtro HTML ao conteúdo usado no SVG. Isso estabelece vários filtros, que podem ser aplicados para uso de estilos que cada um dos três elementos dentro dos estados normal e <em>mouse hover</em>.</p> + +<p>Qualquer filtro SVG pode ser aplicado desse modo. Pode exemplo, para aplicar desfoque Gaussiano, você pode usar:</p> + +<pre class="brush: xml"><svg:filter id="f1"> + <svg:feGaussianBlur stdDeviation="3"/> +</svg:filter> +</pre> + +<p>Você pode também aplicar cor a matriz, como este:</p> + +<pre class="brush: xml"><svg:filter id="f2"> + <svg:feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> +</svg:filter> +</pre> + +<p>Esses são só dois dos cinco filtros demonstrados nessa seção. Certifique-se de olhar o conteúdo do código ao final da seção se você quiser ver mais.</p> + +<p>Os cinco filtros são aplicados usando o seguinte CSS:</p> + +<pre class="brush: html"><style> + p.target { filter:url(#f3); } + p.target:hover { filter:url(#f5); } + b.target { filter:url(#f1); } + b.target:hover { filter:url(#f4); } + iframe.target { filter:url(#f2); } + iframe.target:hover { filter:url(#f3); } +</style> +</pre> + +<p><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> + +<h3 id="Exemplo_Texto_Borrado">Exemplo: Texto Borrado</h3> + +<p>Para borrar um texto há um webkit baseado dos navegadores com o (prefixo) filtro CSS chamado blur. Você pode arquivar o mesmo efeito usando filtros SVG.</p> + +<pre class="brush: html"> <p class="blur">Time to clean my glasses</p> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1" /> + </filter> + </defs> +</svg> +</pre> + +<p>Você pode aplicar o SVG e o filtro CSS na mesma classe:</p> + +<pre class="brush: css">.blur { + filter:url(#wherearemyglasses); + /* ^ for Firefox */ + -webkit-filter: blur(1px); + /* ^ Webkit browsers */ + filter: blur(1px); +}</pre> + +<p>{{ EmbedLiveSample('Exemplo_Texto_Burrado', '', '', '') }}</p> + +<p>Borrar é um efeito pesado, então assegure-se de usá-lo com moderação, especialmente quando há uma rolagem ou animação.</p> + +<h2 id="Usando_referências_externas">Usando referências externas</h2> + +<p>O elemento SVG vem sendo usado para clipping, masking, e mais pode ser carregado de um arquivo externo, contanto que seu documento venha da mesma origem da qual seu HTML está para fazer efeito.</p> + +<p>Por exemplo, se seu CSS está em um arquivo com nome <code>default.css</code>, esse pode parecer com isso:</p> + +<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> + +<p>O SVG é importado do arquivo com nome <code>resources.svg</code>, usando o clip-path com o ID c1.</p> + +<p><span style="font-size: 30.002px; letter-spacing: -1px; line-height: 30.002px;"><strong>Veja também</strong></span></p> + +<ul> + <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li> + <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li> + <li>(<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li> +</ul> diff --git a/files/pt-br/web/svg/attribute/class/index.html b/files/pt-br/web/svg/attribute/class/index.html new file mode 100644 index 0000000000..55fd46c6a0 --- /dev/null +++ b/files/pt-br/web/svg/attribute/class/index.html @@ -0,0 +1,195 @@ +--- +title: class +slug: Web/SVG/Attribute/class +tags: + - Atributos SVG + - Classe + - Referencia + - SVG +translation_of: Web/SVG/Attribute/class +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial da referência de atributos do SVG</a></p> + +<p>Atribui um nome de classe ou um conjunto de nomes de classe a um elemento. Você pode atribuir o mesmo nome ou nomes de classe para qualquer número de elementos. Se você especificar vários nomes de classe, estes devem ser separados por caracteres de espaço em branco.</p> + +<p>O nome de classe de um elemento tem duas funções principais:</p> + +<ul> + <li>Como um seletor de folha de estilo, para a utilização quando um autor quiser atribuir informações de estilo a um conjunto de elementos.</li> + <li>Para utilizações gerais do navegador.</li> +</ul> + +<p>A classe pode ser utilizada pra estilizar o conteúdo do SVG com CSS.</p> + +<h2 id="Utilização">Utilização</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categorias</th> + <td>Nenhuma</td> + </tr> + <tr> + <th scope="row">Valor</th> + <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts"><list-of-class-names></a></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + <tr> + <th scope="row">Documento normativo</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2ª Edição): O atributo class</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/pt-BR/SVG/Content_type","List-of-Ts") }}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<pre class="brush: html"><html> + <body> + <svg width="120" height="220" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + <![CDATA[ + + rect.rectClass { + stroke: #000066; + fill: #00cc00; + } + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + + ]]> + </style> + + <rect class="rectClass" x="10" y="10" width="100" height="100"/> + <circle class="circleClass" cx="40" cy="50" r="26"/> +</svg> +</body></html></pre> + +<h2 id="Elementos">Elementos</h2> + +<p>Os seguintes elementos podem utilizar o atributo <code>class</code>:</p> + +<div class="threecolumns"> +<ul> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("desc") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <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>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("linearGradient") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("path") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("textPath") }}</li> + <li>{{ SVGElement("title") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("use") }}</li> +</ul> +</div> + +<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>(yes)</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Suporte à animação</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("5") }}</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>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/pt-br/web/svg/attribute/contentstyletype/index.html b/files/pt-br/web/svg/attribute/contentstyletype/index.html new file mode 100644 index 0000000000..2de26d899b --- /dev/null +++ b/files/pt-br/web/svg/attribute/contentstyletype/index.html @@ -0,0 +1,46 @@ +--- +title: contentStyleType +slug: Web/SVG/Attribute/contentStyleType +tags: + - Atributo SVG + - Obsoleto + - SVG +translation_of: Web/SVG/Attribute/contentStyleType +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial de referência do atributo SVG</a></p> + +<p>Este atributo especifica a linguagem da folha de estilo do fragmento do documento especificado. O contentStyleType é definido no elemento {{ SVGElement("svg") }}. Caso não seja definido, o valor padrão assumido será <code>text/css</code>.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categorias</th> + <td><em>Nenhuma</em></td> + </tr> + <tr> + <th scope="row">Valor</th> + <td><content-type></td> + </tr> + <tr> + <th scope="row">Animável?</th> + <td>Não</td> + </tr> + <tr> + <th scope="row">Documento normativo</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ContentStyleTypeAttribute" title="http://www.w3.org/TR/SVG/styling.html#ContentStyleTypeAttribute">SVG 1.1 (2ª Edição)</a></td> + </tr> + </tbody> +</table> + +<p>Uma vez que o CSS é a única linguagem de folha de estilos amplamente implementada para estilização online, bem como já está definida como valor padrão se o <code>contentStyleType</code> não estiver definido, o atributo não é bem suportado em motores de renderização. Se outra linguagem de folha de estilos se tornar mais popular, ela não poderá utilizar o atributo {{ SVGAttr("style") }}, ao invés disso, poderá ser facilmente declarada qual a linguagem de estilo está sendo utilizada através do atributo type da <code>tag</code> {{ SVGElement("style") }}.</p> + +<p>Portanto, a utilização de <code>contentStyleType</code> está obsoleto.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("style") }}</li> + <li>{{ SVGAttr("style") }}</li> +</ul> diff --git a/files/pt-br/web/svg/attribute/fill/index.html b/files/pt-br/web/svg/attribute/fill/index.html new file mode 100644 index 0000000000..55e63023a9 --- /dev/null +++ b/files/pt-br/web/svg/attribute/fill/index.html @@ -0,0 +1,461 @@ +--- +title: fill +slug: Web/SVG/Attribute/fill +tags: + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/fill +--- +<div>{{SVGRef}}</div> + +<div>O atributo <strong><code>fill</code></strong> pode ter duas diferentes interpretações. Para formas e textos, é definido como um atributo de apresentação que define a cor (ou qualquer modelo de pintura SVG como gradientes ou padrões) utilizada para colorir um elemento; para animações ele é quem define o estado final de uma animação.</div> + +<div></div> + +<p>Como um atributo de apresentação, ele pode ser aplicado a qualquer elemento, mas só tem efeito nestes onze elementos seguintes: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, e {{SVGElement('tspan')}}.</p> + +<p>Para animação, apenas cinco elementos utilizam este atributo, sendo elas: {{SVGElement('animate')}}, {{SVGElement('animateColor')}}, {{SVGElement('animateMotion')}}, {{SVGElement('animateTransform')}}, e {{SVGElement('set')}}.</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css notranslate">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html notranslate"><svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Preenchimento simples com apenas uma cor --> + <circle cx="50" cy="50" r="40" fill="pink" /> + + + <!-- Preenchimento do circulo com gradiente --> + <defs> + <radialGradient id="myGradient"> + <stop offset="0%" stop-color="pink" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + </defs> + + <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> + + + <!-- + Mantendo o estado final de um círculo animado + sendo um círculo com o raio de 40px. + --> + <circle cx="250" cy="50" r="20"> + <animate attributeType="XML" + attributeName="r" + from="0" to="40" dur="5s" + fill="freeze" /> + </circle> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="altGlyph">altGlyph</h2> + +<p class="warning"><strong>Aviso</strong>: a partir da versão SVG2, a tag {{SVGElement('altGlyph')}} está obsoleta e não deve ser utilizada.</p> + +<p>Para {{SVGElement('altGlyph')}}, <code>fill</code> é a apresentação do atributo que define a coloração de um glifo (figura, ícone, simbolo).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota</strong>: Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="animate">animate</h2> + +<p>Para {{SVGElement('animate')}}, o atributo <code>fill</code> define o estado final de uma animação.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Não</td> + </tr> + </tbody> +</table> + +<h2 id="animateColor">animateColor</h2> + +<p class="warning"><strong>Aviso: </strong>A partir da versão de animação para modelos SVG2 {{SVGElement('animateColor')}} está obsoleto e não deve ser utilizado. Ao invés disso utilize {{SVGElement('animate')}}.</p> + +<p>Para {{SVGElement('animateColor')}}, o atributo <code>fill</code> define o estado final de uma animação.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Não</td> + </tr> + </tbody> +</table> + +<h2 id="animateMotion">animateMotion</h2> + +<p>Para {{SVGElement('animateMotion')}}, o atributo <code>fill</code> define o estado final de uma animação.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Não</td> + </tr> + </tbody> +</table> + +<h2 id="animateTransform">animateTransform</h2> + +<p>Para {{SVGElement('animateTransform')}}, o atributo <code>fill</code> define o estado final de uma animação.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Não</td> + </tr> + </tbody> +</table> + +<h2 id="circle">circle</h2> + +<p>Para {{SVGElement('circle')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a coloração de um círculo.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="ellipse">ellipse</h2> + +<p>Para {{SVGElement('ellipse')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de uma elipse.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="path">path</h2> + +<p>Para {{SVGElement('path')}}, <code>fill</code> é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo <em>{{SVGAttr('fill-rule')}}</em>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="polygon">polygon</h2> + +<p>Para {{SVGElement('polygon')}}, <code>fill</code> é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo <em>{{SVGAttr('fill-rule')}}</em>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="polyline">polyline</h2> + +<p>For {{SVGElement('polyline')}}, <code>fill</code> é um atributo de apresentação que define a coloração do interior de uma forma. (O interior é definido pelo atributo <em>{{SVGAttr('fill-rule')}}</em>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="rect">rect</h2> + +<p>Para {{SVGElement('rect')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um retângulo.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="set">set</h2> + +<p>Para {{SVGElement('set')}}, o atributo <code>fill</code> define o estado final de uma animação.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><code>freeze</code> (<em>Mantém o estado do último quadro de animação</em>) | <code>remove</code> (<em>Mantém o estado do primeiro quadro de animação</em>)</td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>remove</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Não</td> + </tr> + </tbody> +</table> + +<h2 id="text">text</h2> + +<p>Para {{SVGElement('text')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="textPath">textPath</h2> + +<p>For {{SVGElement('textPath')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="tref">tref</h2> + +<p class="warning"><strong>Aviso</strong>: a partir da versão SVG2, a tag {{SVGElement('tref')}} está obsoleta e não deve ser utilizada.</p> + +<p>Para {{SVGElement('tref')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="tspan">tspan</h2> + +<p>Para {{SVGElement('tspan')}}, <code>fill</code> é o atributo de apresentação utilizado para definir a cor de um texto</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Valor</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Valor Padrão</th> + <td><code>black</code></td> + </tr> + <tr> + <th scope="row">Animável</th> + <td>Sim</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Nota:</strong> Por ser um atributo de apresentação, <code>fill</code> pode ser usado como uma propriedade CSS.</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Status</th> + <th scope="col">Nota</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG Animations 2", "#FillAttribute", "transform")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>Definição para animações</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "painting.html#FillProperty", "fill")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definição para formas e textos.<br> + Adiciona <code style="white-space: nowrap;">context-fill</code> e <code style="white-space: nowrap;">context-stroke</code>.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#FillAttribute", "fill")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Definição inicial para animações</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#FillProperty", "fill")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Definição inicial para formas e textos.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade dos Browsers</h2> + +<div class="hidden">A tabela de compatibilidade nesta página é gerada a partir de dados estruturados. Se você gostaria de contribuir com os dados, confira <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> e envie-nos uma solicitação de pull.</div> + +<p>{{Compat("svg.attributes.presentation.fill")}}</p> + +<p class="note">Nota: Para obter informações do uso do <code style="white-space: nowrap;">context-fill</code> (e do <code style="white-space: nowrap;">context-stroke</code>) de documentos HTML, consulte a documentação da propriedade não-padrão <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span> .</p> diff --git a/files/pt-br/web/svg/attribute/index.html b/files/pt-br/web/svg/attribute/index.html new file mode 100644 index 0000000000..2d55d41922 --- /dev/null +++ b/files/pt-br/web/svg/attribute/index.html @@ -0,0 +1,462 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - NeedsTranslation + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p> + +<h2 id="SVG_Attributes">SVG Attributes</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("autoReverse") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("decelerate") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("path") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("speed") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_event_attributes">Animation event attributes</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Animation_timing_attributes">Animation timing attributes</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Animation_value_attributes">Animation value attributes</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p> + +<h3 id="Animation_addition_attributes">Animation addition attributes</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Core_attributes">Core attributes</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p> + +<h3 id="Document_event_attributes">Document event attributes</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> + +<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Graphical_event_attributes">Graphical event attributes</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Presentation_attributes">Presentation attributes</h3> + +<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div> + +<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ 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("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> + +<h3 id="Transfer_function_attributes">Transfer function attributes</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_attributes">XLink attributes</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> diff --git a/files/pt-br/web/svg/attribute/keytimes/index.html b/files/pt-br/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..5d2e3a2e46 --- /dev/null +++ b/files/pt-br/web/svg/attribute/keytimes/index.html @@ -0,0 +1,95 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +<div>{{SVGRef}}</div> + +<p>O atributo <code><strong>keyTimes</strong></code> representa uma lista de valores de tempo usados para controlar o ritmo da animação. Cada valor corresponde a um valor na lista de atributos {{SVGAttr("values")}} e define quando o valor é usado na animação. Cada valor de tempo na lista <code>keyTimes</code> é especificado como um valor de ponto flutuante entre 0 e 1 (inclusive), representando um deslocamento proporcional na duração do elemento de animação.</p> + +<p>Four elements are using this attribute: {{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, and {{SVGElement("animateTransform")}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html, body, svg { + height: 100%; +}</pre> +</div> + +<pre class="brush: html; highlight[4,6]"><svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="10" r="10"> + <animate attributeName="cx" dur="4s" repeatCount="indefinite" + values="60 ; 110 ; 60 ; 10 ; 60" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> + <animate attributeName="cy" dur="4s" repeatCount="indefinite" + values="10 ; 60 ; 110 ; 60 ; 10" keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> + </circle> +</svg></pre> + +<p>{{EmbedLiveSample("topExample", "200", "200")}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td>{{cssxref("number")}} [ <code>;</code> {{cssxref("number")}} ]* <code>;</code>?</td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<p>The value of the <code>keyTimes</code> attribute is a semicolon-separated list of values.</p> + +<p>There must be exactly as many values in the <code>keyTimes</code> list as in the <code>values</code> list.</p> + +<p>Each successive time value must be greater than or equal to the preceding time value.</p> + +<p>The <code>keyTimes</code> list semantics depends upon the interpolation mode:</p> + +<ul> + <li>For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be <code>1</code>. The key time associated with each value defines when the value is set; values are interpolated between the key times.</li> + <li>For discrete animation, the first time value in the list must be <code>0</code>. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in the list.</li> +</ul> + +<p>If the {{SVGAttr("calcMode")}} attribute is set to <code>paced</code>, the <code>keyTimes</code> attribute is ignored.</p> + +<p>If the duration of the animation is indefinite, any <code>keyTimes</code> specification will be ignored.</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("SVG Animations 2", "#KeyTimesAttribute", "keyTimes")}}</td> + <td>{{Spec2("SVG Animations 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "animate.html#KeyTimesAttribute", "keyTimes")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.animate.keyTimes")}}</p> diff --git a/files/pt-br/web/svg/attribute/preserveaspectratio/index.html b/files/pt-br/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..ee9351ad58 --- /dev/null +++ b/files/pt-br/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,420 @@ +--- +title: preserveAspectRatio +slug: Web/SVG/Attribute/preserveAspectRatio +translation_of: Web/SVG/Attribute/preserveAspectRatio +--- +<div>{{SVGRef}}</div> + +<p>O atributo <code><strong>preserveAspectRatio</strong></code> indica como um elemento com uma viewBox, fornecendo uma determinada proporção deve se ajustar a uma viewport com uma proporção diferente.</p> + +<p>Because the aspect ratio of an SVG image is defined by the {{SVGAttr('viewBox')}} attribute, if this attribute isn't set, the <code>preserveAspectRatio</code> attribute has no effect (<em>with one exception, the {{SVGElement('image')}} element, as described below</em>).</p> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> + </defs> + + <!-- (width>height) meet --> + <svg preserveAspectRatio="xMidYMid meet" x="0" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMinYMid meet" x="25" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMaxYMid meet" x="50" y="0" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + + <!-- (width>height) slice --> + <svg preserveAspectRatio="xMidYMin slice" x="0" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMid slice" x="25" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMax slice" x="50" y="15" viewBox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> + + <!-- (width<height) meet --> + <svg preserveAspectRatio="xMidYMin meet" x="75" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMid meet" x="90" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMax meet" x="105" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + + <!-- (width<height) slice --> + <svg preserveAspectRatio="xMinYMid slice" x="120" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMidYMid slice" x="135" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + <svg preserveAspectRatio="xMaxYMid slice" x="150" y="0" viewBox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> + + <!-- none --> + <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> +</svg></pre> + +<div class="hidden"> +<h6 id="topExample">topExample</h6> + +<pre class="brush: css">html,body,svg { height:100% } +</pre> + +<pre class="brush: html"><svg viewBox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" /> + </defs> + + <!-- (width>height) meet --> + <rect x="0" y="0" width="20" height="10"> + <title>xMidYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMid meet" x="0" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="25" y="0" width="20" height="10"> + <title>xMinYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMinYMid meet" x="25" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="50" y="0" width="20" height="10"> + <title>xMaxYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMaxYMid meet" x="50" y="0"> + <use href="#smiley" /> + </svg> + + <!-- (width>height) slice --> + <rect x="0" y="15" width="20" height="10"> + <title>xMidYMin slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMin slice" x="0" y="15"> + <use href="#smiley" /> + </svg> + + <rect x="25" y="15" width="20" height="10"> + <title>xMidYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMid slice" x="25" y="15"> + <use href="#smiley" /> + </svg> + + <rect x="50" y="15" width="20" height="10"> + <title>xMidYMax slice</title> + </rect> + <svg viewBox="0 0 100 100" width="20" height="10" + preserveAspectRatio="xMidYMax slice" x="50" y="15"> + <use href="#smiley" /> + </svg> + + <!-- (width<height) meet --> + <rect x="75" y="0" width="10" height="25"> + <title>xMidYMin meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMin meet" x="75" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="90" y="0" width="10" height="25"> + <title>xMidYMid meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMid meet" x="90" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="105" y="0" width="10" height="25"> + <title>xMidYMax meet</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMax meet" x="105" y="0"> + <use href="#smiley" /> + </svg> + + <!-- (width<height) slice --> + <rect x="120" y="0" width="10" height="25"> + <title>xMinYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMinYMid slice" x="120" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="135" y="0" width="10" height="25"> + <title>xMidYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMidYMid slice" x="135" y="0"> + <use href="#smiley" /> + </svg> + + <rect x="150" y="0" width="10" height="25"> + <title>xMaxYMid slice</title> + </rect> + <svg viewBox="0 0 100 100" width="10" height="25" + preserveAspectRatio="xMaxYMid slice" x="150" y="0"> + <use href="#smiley" /> + </svg> + + <!-- none --> + <rect x="0" y="30" width="160" height="60"> + <title>none</title> + </rect> + <svg viewBox="0 0 100 100" width="160" height="60" + preserveAspectRatio="none" x="0" y="30"> + <use href="#smiley" /> + </svg> +</svg></pre> + +<pre class="brush: css">path { + fill: yellow; + stroke: black; + stroke-width: 8px; + stroke-linecap: round; + stroke-linejoin: round; + pointer-events: none; +} + +rect:hover, rect:active { + outline: 1px solid red; +}</pre> +</div> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">preserveAspectRatio="<align> [<meetOrSlice>]"</pre> + +<p>Its value is made of one or two keywords: A required alignment value and an optional "meet or slice" reference as described below:</p> + +<dl> + <dt>Alignment value</dt> + <dd>The alignment value indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the {{ SVGAttr("viewBox") }} doesn't match the aspect ratio of the viewport. The alignment value must be one of the following keywords: + <ul> + <li><strong>none</strong><br> + Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the viewport rectangle. <em>Note that if </em><code><align></code><em> is </em><code>none</code><em>, then the optional </em><code><meetOrSlice></code><em> value is ignored</em>.</li> + <li><strong>xMinYMin</strong> - Force uniform scaling.<br> + Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br> + Align the <code><min-y></code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li> + <li><strong>xMidYMin</strong> - Force uniform scaling.<br> + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br> + Align the <code><min-y></code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li> + <li><strong>xMaxYMin</strong> - Force uniform scaling.<br> + Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br> + Align the <code><min-y></code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li> + <li><strong>xMinYMid</strong> - Force uniform scaling.<br> + Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br> + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li> + <li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br> + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br> + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li> + <li><strong>xMaxYMid</strong> - Force uniform scaling.<br> + Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br> + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li> + <li><strong>xMinYMax</strong> - Force uniform scaling.<br> + Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br> + Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li> + <li><strong>xMidYMax</strong> - Force uniform scaling.<br> + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br> + Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li> + <li><strong>xMaxYMax</strong> - Force uniform scaling.<br> + Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br> + Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li> + </ul> + </dd> + <dt>Meet or slice reference</dt> + <dd>The meet or slice reference is optional and, if provided, must be one of the following keywords: + <ul> + <li><strong>meet</strong> (<em>the default</em>) - Scale the graphic such that: + <ul> + <li>aspect ratio is preserved</li> + <li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li> + <li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li> + </ul> + In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li> + <li><strong>slice</strong> - Scale the graphic such that: + <ul> + <li>aspect ratio is preserved</li> + <li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li> + <li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li> + </ul> + In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li> + </ul> + </dd> +</dl> + +<h2 id="Elements">Elements</h2> + +<p>Seven elements are using this attribute: {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("image")}}, {{SVGElement("feImage")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, and {{SVGElement("view")}}.</p> + +<h3 id="feImage">feImage</h3> + +<p>For {{SVGElement('feImage')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code><feImage></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="image">image</h3> + +<p>For {{SVGElement('image')}}, <code>preserveAspectRatio</code> defines how the referenced image should fit in the rectangle define by the <code><image></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="marker">marker</h3> + +<p>For {{SVGElement('marker')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="pattern">pattern</h3> + +<p>For {{SVGElement('pattern')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="svg">svg</h3> + +<p>For {{SVGElement('svg')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="symbol">symbol</h3> + +<p>For {{SVGElement('symbol')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h3 id="view">view</h3> + +<p>For {{SVGElement('view')}}, <code>preserveAspectRatio</code> indicates if a uniform scaling must be performed to fit the element viewport.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><align> <meetOrSlice>?</strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>xMidYMid</code> <code>meet</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Specification">Specification</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("Filters 1.0", "#element-attrdef-feimage-preserveaspectratio", "preserveAspectRatio")}}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG2", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#PreserveAspectRatioAttribute", "preserveAspectRatio")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html b/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html new file mode 100644 index 0000000000..cbc2224c56 --- /dev/null +++ b/files/pt-br/web/svg/attribute/stroke-dashoffset/index.html @@ -0,0 +1,52 @@ +--- +title: stroke-dashoffset +slug: Web/SVG/Attribute/stroke-dashoffset +tags: + - Animação SVG + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/stroke-dashoffset +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>O atributo <code>stroke-dashoffset</code> especifica a distância entre o inicio traço e o fim.</p> + +<p>Se a <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> for usada, o valor representará a porcentagem do viewport atual.</p> + +<p>O valor pode ser negativo.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categorias</th> + <td>Atributo de Apresentação</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage"><percentage></a> | <a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span><length></span></a> | inherit</td> + </tr> + <tr> + <th scope="row">Valor inicial</th> + <td>0</td> + </tr> + <tr> + <th scope="row">Animação</th> + <td>Sim</td> + </tr> + <tr> + <th scope="row">Documento Normativo</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty" title="http://www.w3.org/TR/SVG11/painting.html#StrokeDashoffsetProperty">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Elementos">Elementos</h2> + +<p>Os seguintes elementos podem utilizar o atributo <code>stroke-dashoffset</code></p> + +<ul> + <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li> +</ul> diff --git a/files/pt-br/web/svg/attribute/stroke/index.html b/files/pt-br/web/svg/attribute/stroke/index.html new file mode 100644 index 0000000000..a930fb5f9e --- /dev/null +++ b/files/pt-br/web/svg/attribute/stroke/index.html @@ -0,0 +1,93 @@ +--- +title: stroke +slug: Web/SVG/Attribute/stroke +tags: + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/stroke +--- +<div>{{SVGRef}}</div> + +<p>O atributo <code><strong>stroke</strong></code> é um atributo de apresentação que define a cor <em>(ou qualquer SVG</em> <em>paint servers, como gradientes ou </em> <em>patterns</em><em>)</em> usado para pintar o contorno da forma;</p> + +<p class="note"><strong>Note:</strong> As a presentation attribute <code>stroke</code> can be used as a CSS property.</p> + +<p>As a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('line')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}}</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> + <!-- Simple color stroke --> + <circle cx="5" cy="5" r="4" fill="none" + stroke="green" /> + + <!-- Stroke a circle with a gradient --> + <defs> + <linearGradient id="myGradient"> + <stop offset="0%" stop-color="green" /> + <stop offset="100%" stop-color="white" /> + </linearGradient> + </defs> + + <circle cx="15" cy="5" r="4" fill="none" + stroke="url(#myGradient)" /> +</svg> +</pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Paint"><paint></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><code>none</code></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<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", "painting.html#StrokeProperty", "stroke")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for shapes and texts.<br> + Adds <code style="white-space: nowrap;">context-fill</code> and <code style="white-space: nowrap;">context-stroke</code>.</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "painting.html#StrokeProperty", "stroke")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for shapes and texts</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.attributes.presentation.stroke")}}</p> + +<p class="note"><strong>Note:</strong> For information on using the <code style="white-space: nowrap;">context-stroke</code> (and <code style="white-space: nowrap;">context-fill</code>) values from HTML documents, see the documentation for the non-standard <span style="white-space: nowrap;">{{cssxref("-moz-context-properties")}}</span> property.</p> diff --git a/files/pt-br/web/svg/attribute/style/index.html b/files/pt-br/web/svg/attribute/style/index.html new file mode 100644 index 0000000000..f52028b64e --- /dev/null +++ b/files/pt-br/web/svg/attribute/style/index.html @@ -0,0 +1,75 @@ +--- +title: style +slug: Web/SVG/Attribute/style +tags: + - Atributo SVG + - SVG +translation_of: Web/SVG/Attribute/style +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">Página inicial de referência do atributo SVG</a></p> + +<p>Este atributo especifica informação de estilo para o elemento atual. O atributo "style" especifica informação de estilo para um único elemento. As linguagem da folha de estilos para as regras de estilos em linhas é dada pelo valor do atributo {{ SVGAttr("contentStyleType") }} no elemento the {{ SVGElement("SVG") }}.</p> + +<h2 id="Contexto_de_uso">Contexto de uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categorias</th> + <td>Atributo de apresentação</td> + </tr> + <tr> + <th scope="row">Valor</th> + <td><style></td> + </tr> + <tr> + <th scope="row">Animável?</th> + <td>Não</td> + </tr> + <tr> + <th scope="row">Documento Normativo</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" title="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2ª Edição)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt><style></dt> + <dd>A sintaxe do estilo depende de uma linguagem de folha de estilos. Por padrão, se {{ SVGAttr("contentStyleType") }} não for definido, a linguagem da folha de estilo utilizada será a CSS.</dd> +</dl> + +<h2 id="Exemplo">Exemplo</h2> + +<p>O exemplo a seguir mostra a estilização de um retângulo com um atributo de estilo utilizando a linguagem de folha de estilos do CSS.</p> + +<pre class="brush: html"><svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"> + <rect height="300" width="600" x="200" y="100" + style="fill: red; stroke: blue; stroke-width: 3"/> +</svg> +</pre> + +<h2 id="Elementos">Elementos</h2> + +<p>Os seguintes elementos podem utilizar o atributo <code>style</code></p> + +<ul> + <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">Elementos "container"</a> »</li> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Elementos de filtro primitivo</a> »</li> + <li><a href="/en/SVG/Element#Gradient" title="en/SVG/Element#Gradient">Elementos de gradiente</a> »</li> + <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Elementos gráficos</a> »</li> + <li><a href="/en/SVG/Element#Structural" title="en/SVG/Element#Structural">Elementos estruturais</a> »</li> + <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Elementos de texto</a> »</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("glyph") }}</li> +</ul> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{ SVGElement("style") }}</li> +</ul> diff --git a/files/pt-br/web/svg/attribute/version/index.html b/files/pt-br/web/svg/attribute/version/index.html new file mode 100644 index 0000000000..f1ff5c1b8c --- /dev/null +++ b/files/pt-br/web/svg/attribute/version/index.html @@ -0,0 +1,58 @@ +--- +title: version +slug: Web/SVG/Attribute/version +translation_of: Web/SVG/Attribute/version +--- +<div>{{SVGRef}}{{deprecated_header("SVG 2")}}</div> + +<p>The <strong><code>version</code></strong> attribute is used to indicate what specification a SVG document conforms to. It is only allowed on the root {{SVGElement("svg")}} element. It is purely advisory and has no influence on rendering or processing.</p> + +<p>While it is specified to accept any number, the only two valid choices are currently <code>1.0</code> and <code>1.1</code>.</p> + +<pre class="brush: html; highlight[1]"><svg version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="80" height="80"/> +</svg></pre> + +<h2 id="Usage_notes">Usage notes</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><code><a href="/en-US/docs/Web/SVG/Content_type#Number"><number></a></code></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + </tbody> +</table> + +<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("SVG1.1", "struct.html#SVGElementVersionAttribute", "version")}}</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.version")}}</p> diff --git a/files/pt-br/web/svg/attribute/viewbox/index.html b/files/pt-br/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..ae6afe273f --- /dev/null +++ b/files/pt-br/web/svg/attribute/viewbox/index.html @@ -0,0 +1,200 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +translation_of: Web/SVG/Attribute/viewBox +--- +<div>{{SVGRef}}</div> + +<p>O atributo <code><strong>viewBox</strong></code> define a posição e a dimensão, no espaço do usuário, de uma viewport SVG.</p> + +<p>The value of the <code>viewBox</code> attribute is a list of four numbers: <code><var>min-x</var></code>, <code><var>min-y</var></code>, <code><var>width</var></code> and <code><var>height</var></code>. The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the <a href="/en-US/docs/Glossary/viewport">browser viewport</a>).</p> + +<div id="topExample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% } +svg:not(:root) { display: inline-block; }</pre> +</div> + +<pre class="brush: xml"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a large viewBox the circle looks small + as it is using user units for the r attribute: + 4 resolved against 100 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + with relative unit such as percentage, the visual size + of the square looks unchanged regardless of the viewBox` + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + with a small viewBox the circle looks large + as it is using user units for the r attribute: + 4 resolved against 10 as set in the viewBox + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg> + +<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> + <!-- + The point of coordinate 0,0 is now in the center of the viewport, + and 100% is still resolve to a width or height of 10 user units so + the rectangle looks shifted to the bottom/right corner of the viewport + --> + <rect x="0" y="0" width="100%" height="100%"/> + + <!-- + With the point of coordinate 0,0 in the center of the viewport the + value 50% is resolve to 5 which means the center of the circle is + in the bottom/right corner of the viewport. + --> + <circle cx="50%" cy="50%" r="4" fill="white"/> +</svg></pre> + +<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p> +</div> + +<p>The exact effect of this attribute is influenced by the {{ SVGAttr("preserveAspectRatio") }} attribute.</p> + +<p class="note"><strong>Note:</strong> Values for <code><var>width</var></code> or <code><var>height</var></code> lower or equal to <code>0</code> disable rendering of the element.</p> + +<p>Five elements are using this attribute: {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{ SVGElement("svg") }}, {{ SVGElement("symbol") }}, and {{ SVGElement("view") }}.</p> + +<h2 id="marker">marker</h2> + +<p>For {{SVGElement('marker')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><marker></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="pattern">pattern</h2> + +<p>For {{SVGElement('pattern')}}, <code>viewBox</code> defines the position and dimension for the content of the pattern tile.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="svg">svg</h2> + +<p>For {{SVGElement('svg')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><svg></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="symbol">symbol</h2> + +<p>For {{SVGElement('symbol')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><symbol></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="view">view</h2> + +<p>For {{SVGElement('view')}}, <code>viewBox</code> defines the position and dimension for the content of the <code><view></code> element.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong>?, <strong><a href="/docs/Web/SVG/Content_type#Number"><number></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Specification">Specification</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", "coords.html#ViewBoxAttribute", "viewBox")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "coords.html#ViewBoxAttribute", "viewBox")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/svg/attribute/width/index.html b/files/pt-br/web/svg/attribute/width/index.html new file mode 100644 index 0000000000..8ad4954e83 --- /dev/null +++ b/files/pt-br/web/svg/attribute/width/index.html @@ -0,0 +1,68 @@ +--- +title: Width +slug: Web/SVG/Attribute/width +translation_of: Web/SVG/Attribute/width +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>Esse atributo indica um compromimento horizontal no sistema de coordenadas do usuário. O efeito exato dessa coordenada, depende de cada elemento. Na maioria das vezes, representa a largura da região retangular do elemento de referência.</p> + +<p>Esse atributo precisa ser especificado, exceto para o elemento {{ SVGElement("svg") }} onde o valor padrão é <strong>100% </strong>(com exceção do elemento root {{ SVGElement("svg") }} que contém pais HTML). e o {{ SVGElement("filter") }} e {{ SVGElement("mask") }}, elementos que o valor padrão é <strong>120%.</strong></p> + +<h2 id="Contexto_de_Uso">Contexto de Uso</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length"><length></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute" title="http://www.w3.org/TR/SVG/extend.html#ForeignObjectElementWidthAttribute">SVG 1.1 (2nd Edition): foreignObject element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#ImageElementWidthAttribute">SVG 1.1 (2nd Edition): image element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute" title="http://www.w3.org/TR/SVG/pservers.html#PatternElementWidthAttribute">SVG 1.1 (2nd Edition): pattern element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute" title="http://www.w3.org/TR/SVG/shapes.html#RectElementWidthAttribute">SVG 1.1 (2nd Edition): rect element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#SVGElementWidthAttribute">SVG 1.1 (2nd Edition): svg element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute" title="http://www.w3.org/TR/SVG/struct.html#UseElementWidthAttribute">SVG 1.1 (2nd Edition): use element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute" title="http://www.w3.org/TR/SVG/filters.html#FilterPrimitiveWidthAttribute">SVG 1.1 (2nd Edition): Filter primitive</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute" title="http://www.w3.org/TR/SVG/masking.html#MaskElementWidthAttribute">SVG 1.1 (2nd Edition): mask element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Length") }}</p> + +<h2 id="Exemplo">Exemplo</h2> + +<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">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>120<span class="punctuation token">"</span></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">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>rect</span> <span class="attr-name token">x</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">y</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">width</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<span class="punctuation token">"</span></span> <span class="attr-name token">height</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>100<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> + +<h2 id="Elementos">Elementos</h2> + +<p>Os seguintes elementos podem user o atributo witdh</p> + +<ul> + <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("use") }}</li> + <li>{{ SVGElement("mask") }}</li> +</ul> diff --git a/files/pt-br/web/svg/compatibility_sources/index.html b/files/pt-br/web/svg/compatibility_sources/index.html new file mode 100644 index 0000000000..a9e5cc169e --- /dev/null +++ b/files/pt-br/web/svg/compatibility_sources/index.html @@ -0,0 +1,19 @@ +--- +title: Compatibility sources +slug: Web/SVG/Compatibility_sources +tags: + - Links + - SVG +translation_of: Web/SVG/Compatibility_sources +--- +<p>As seguintes fontes são usada para as tabelas de compatibilidade no elemento SVG e atributos:</p> + +<ul> + <li><a href="/En/SVG_in_Firefox">Aqui</a> juntos podemos revisar o histórico para Firefox.</li> + <li><a class="external" href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> together with its <a class="external" href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">recorded archive</a> for WebKit, Safari and Chrome</li> + <li><a class="external" href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> e acompanha páginas para Opera >= 9, <a class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a> for Opera 8</li> + <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> para ajuda com o estado suporte IE9.</li> + <li><a href="http://blogs.windows.com/msedgedev/">Aqui</a> para suporte com o Windows Edge.</li> + <li><a class="external" href="http://www.codedread.com/svg-support.php">The SVG support charts at Codedread.com</a> para testes básicos com o test suite W3C.</li> + <li><a class="external" href="http://en.wikipedia.org/wiki/SVG">Wikipedia</a> para ideias básicas, não normativas.</li> +</ul> diff --git a/files/pt-br/web/svg/content_type/index.html b/files/pt-br/web/svg/content_type/index.html new file mode 100644 index 0000000000..fb1adcbf5b --- /dev/null +++ b/files/pt-br/web/svg/content_type/index.html @@ -0,0 +1,378 @@ +--- +title: Content type +slug: Web/SVG/Content_type +tags: + - Referencia + - SVG +translation_of: Web/SVG/Content_type +--- +<h2 id="Angle">Angle</h2> + +<dl> + <dt><angle></dt> + <dd> + <p>Angles are specified in one of two ways. When used in the value of a property in a stylesheet, an <angle> is defined as follows:</p> + + <pre>angle ::= number (~"deg" | ~"grad" | ~"rad")?</pre> + + <p>where deg indicates degrees, grad indicates grads and rad indicates radians.</p> + + <p>For properties defined in CSS2, an angle unit identifier must be provided. For angle values in SVG-specific properties and their corresponding presentation attributes, the angle unit identifier is optional. If not provided, the angle value is assumed to be in degrees. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the angle identifier, if specified, must be in lower case.</p> + + <p>When angles are used in an SVG attribute, <angle> is instead defined as follows:</p> + + <pre>angle ::= number ("deg" | "grad" | "rad")?</pre> + + <p>The unit identifiers in such <angle> values must be in lower case.</p> + + <p>In the SVG DOM, <angle> values are represented using {{domxref("SVGAngle")}} or {{domxref("SVGAnimatedAngle objects")}}.</p> + </dd> +</dl> + +<h2 id="Anything">Anything</h2> + +<dl> + <dt><anything></dt> + <dd> + <p>O tipo básico <anything> é uma sequência de zero ou mais caracteres. Especificamente:</p> + + <pre>anything ::= Char*</pre> + + <p>onde <a href="http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char" title="http://www.w3.org/TR/2008/REC-xml-20081126/#NT-Char">Char</a> é a produção de um caractere, como definido no XML 1.0 , seção 2.2).</p> + </dd> +</dl> + +<h2 id="Clock-value">Clock-value</h2> + +<dl> + <dt><clock-value></dt> + <dd> + <p>Clock values have the same syntax as in <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/" title="http://www.w3.org/TR/2001/REC-smil-animation-20010904/">SMIL Animation</a> specification. The grammar for clock values is repeated here:</p> + + <pre>Clock-val ::= Full-clock-val | Partial-clock-val + | Timecount-val +Full-clock-val ::= Hours ":" Minutes ":" Seconds ("." Fraction)? +Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)? +Timecount-val ::= Timecount ("." Fraction)? (Metric)? +Metric ::= "h" | "min" | "s" | "ms" +Hours ::= DIGIT+; any positive number +Minutes ::= 2DIGIT; range from 00 to 59 +Seconds ::= 2DIGIT; range from 00 to 59 +Fraction ::= DIGIT+ +Timecount ::= DIGIT+ +2DIGIT ::= DIGIT DIGIT +DIGIT ::= [0-9] +</pre> + + <p>For <code>Timecount</code> values, the default metric suffix is "s" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.</p> + + <p>The following are examples of legal clock values:</p> + + <ul> + <li>Full clock values:<br> + <code>02:30:03 </code> = 2 hours, 30 minutes and 3 seconds<br> + <code>50:00:10.25</code> = 50 hours, 10 seconds and 250 milliseconds</li> + <li>Partial clock value:<br> + <code>02:33 </code> = 2 minutes and 33 seconds<br> + <code>00:10.5</code> = 10.5 seconds = 10 seconds and 500 milliseconds</li> + <li>Timecount values:<br> + <code>3.2h </code> = 3.2 hours = 3 hours and 12 minutes<br> + <code>45min </code> = 45 minutes<br> + <code>30s </code> = 30 seconds<br> + <code>5ms </code> = 5 milliseconds<br> + <code>12.467 </code> = 12 seconds and 467 milliseconds</li> + </ul> + + <p>Fractional values are just (base 10) floating point definitions of seconds. Thus:</p> + + <p><code>00.5s = 500 milliseconds<br> + 00:00.005 = 5 milliseconds</code></p> + </dd> +</dl> + +<h2 id="Color">Color</h2> + +<dl> + <dt><color></dt> + <dd> + <p>The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space. <color> applies to SVG's use of the {{SVGAttr("color")}} attribute and is a component of the definitions of attributes {{SVGAttr("fill")}}, {{SVGAttr("stroke")}}, {{SVGAttr("stop-color")}}, {{SVGAttr("flood-color")}} and {{SVGAttr("lighting-color")}}, which also offer optional ICC-based color specifications.</p> + + <p>SVG supports all of the syntax alternatives for <color> defined in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#value-def-color">CSS2 syntax and basic data types</a>, and (depend on the implementation) in the future <a href="http://www.w3.org/TR/css3-color/" title="http://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a>.</p> + + <p>A <color> is either a keyword or a numerical RGB specification.</p> + + <p>In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">User preferences for colors</a> (CSS2, section 18.2).</p> + + <p>The format of an RGB value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, <code>#fb0</code> expands to <code>#ffbb00</code>. This ensures that white (<code>#ffffff</code>) can be specified with the short notation (<code>#fff</code>) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")". An RGB start-function is the case-insensitive string "rgb(", for example "RGB(" or "rGb(". For compatibility, the all-lowercase form "rgb(" is preferred. The integer value 255 corresponds to 100%, and to F or FF in the hexadecimal notation: <code>rgb(255,255,255)</code> = <code>rgb(100%,100%,100%)</code> = <code>#FFF</code>. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards.</p> + + <pre>color ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)? + | "rgb("integer, integer, integer")" + | "rgb("integer "%", integer "%", integer "%)" + | color-keyword +hexdigit ::= [0-9A-Fa-f] +</pre> + + <p>where <code>color-keyword</code> matches (case insensitively) one of the color keywords listed in <a href="http://www.w3.org/TR/css3-color/" title="http://www.w3.org/TR/css3-color/">CSS Color Module Level 3</a>, or one of the system color keywords listed in <a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/ui.html#system-colors">User preferences for colors</a> (CSS2, section 18.2).</p> + + <p>The corresponding SVG DOM interface definitions for <color> are defined the one defined by CSS. SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface {{domxref("SVGColor")}}.</p> + </dd> +</dl> + +<h2 id="Coordinate">Coordinate</h2> + +<dl> + <dt><coordinate></dt> + <dd> + <p>A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <a href="/en-US/docs/SVG/Content_type#length" title="https://developer.mozilla.org/en/SVG/Content_type#length"><length></a>.</p> + + <p>Within the SVG DOM, a <coordinate> is represented as an {{domxref("SVGLength")}} or an {{domxref("SVGAnimatedLength")}}.</p> + </dd> +</dl> + +<h2 id="Frequency">Frequency</h2> + +<dl class="definitions"> + <dt><frequency></dt> + <dd> + <p>Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <a href="/en-US/docs/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a> immediately followed by a frequency unit identifier. The frequency unit identifiers are:</p> + + <ul> + <li><code>Hz</code>: Hertz</li> + <li><code>kHz</code>: kilo Hertz</li> + </ul> + + <p>Frequency values may not be negative.</p> + </dd> +</dl> + +<h2 id="FuncIRI">FuncIRI</h2> + +<dl> + <dt><FuncIRI></dt> + <dd>Notação funcional para uma referência, a sintaxe para esta referência é a mesma que {{cssxref("uri", "CSS URI")}}</dd> +</dl> + +<h2 id="ICCColor">ICCColor</h2> + +<dl> + <dt><icccolor></dt> + <dd> + <p>An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a {{SVGElement("color-profile")}} element, and one or more color component values. The grammar is as follows:</p> + + <pre>icccolor ::= "icc-color(" name (, number)+ ")" +</pre> + + <p>The corresponding SVG DOM interface for <icccolor> is {{domxref("SVGICCColor")}}.</p> + </dd> +</dl> + +<h2 id="Integer">Integer</h2> + +<dl> + <dt><integer></dt> + <dd> + <p>An <integer> is specified as an optional sign character ("+" or "-") followed by one or more digits "0" to "9":</p> + + <pre>integer ::= [+-]? [0-9]+</pre> + + <p>If the sign character is not present, the number is non-negative.</p> + + <p>Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) -2147483648 to 2147483647.</p> + + <p>Within the SVG DOM, an <integer> is represented as a <code>number</code> or an {{domxref("SVGAnimatedInteger")}}.</p> + </dd> +</dl> + +<h2 id="IRI">IRI</h2> + +<dl> + <dt><IRI></dt> + <dd> + <p>An Internationalized Resource Identifier.</p> + + <p>On the Internet, resources are identified using <em>IRI</em>s (Internationalized Resource Identifiers). For example, an SVG file called someDrawing.svg located at <a href="http://example.com" rel="freelink">http://example.com</a> might have the following <em>IRI</em>:</p> + + <pre>http://example.com/someDrawing.svg +</pre> + + <p>An <em>IRI</em> can also address a particular element within an XML document by including an <em>IRI</em> fragment identifier as part of the <em>IRI</em>. An <em>IRI</em> which includes an <em>IRI</em> fragment identifier consists of an optional base <em>IRI</em>, followed by a "#" character, followed by the <em>IRI</em> fragment identifier. For example, the following <em>IRI</em> can be used to specify the element whose ID is "Lamppost" within file someDrawing.svg:</p> + + <pre>http://example.com/someDrawing.svg#Lamppost +</pre> + + <p><em>IRI</em>s are used in the {{SVGAttr("xlink:href")}} attribute. Some attributes allow both <em>IRI</em>s and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is simply an <em>IRI</em> delimited with a functional notation. Note: For historical reasons, the delimiters are "url(" and ")", for compatibility with the CSS specifications. The <em>FuncIRI</em> form is used in presentation attributes .</p> + + <p>SVG makes extensive use of <em>IRI</em> references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a {{SVGElement("linearGradient")}} element and give it an ID, as in:</p> + + <pre><linearGradient xml:id="MyGradient">...</linearGradient> +</pre> + + <p>You then reference the linear gradient as the value of the {{SVGAttr("fill")}} attribute for the rectangle, as in the following example:</p> + + <pre><rect fill="url(#MyGradient)"/> +</pre> + + <p>SVG supports two types of <em>IRI</em> references:</p> + + <ul> + <li>local <em>IRI</em> references, where the IRI reference does not contain an <code><absoluteIRI></code> or <code><relativeIRI></code> and thus only contains a fragment identifier (i.e., <code>#<elementID></code> or <code>#xpointer(id<elementID>)</code>)</li> + <li>non-local <em>IRI</em> references, where the <em>IRI</em> reference does contain an <code><absoluteIRI></code> or <code><relativeIRI></code></li> + </ul> + + <p>For the full specification of IRI references in SVG, see <a href="http://www.w3.org/TR/SVG/linking.html#IRIReference" title="http://www.w3.org/TR/SVG/linking.html#IRIReference">SVG 1.1 (2nd Edition): IRI references</a>.</p> + </dd> +</dl> + +<h2 id="Length">Length</h2> + +<dl> + <dt><length></dt> + <dd> + <p>A length is a distance measurement, given as a number along with a unit. Lengths are specified in one of two ways. When used in a stylesheet, a <length> is defined as follows:</p> + + <pre>length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?</pre> + + <p><a href="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units" title="http://www.w3.org/TR/2008/REC-CSS2-20080411/syndata.html#length-units">See the CSS2 specification</a> for the meanings of the unit identifiers.</p> + + <p>For properties defined in CSS2, a length unit identifier must be provided. For length values in SVG-specific properties and their corresponding presentation attributes, the length unit identifier is optional. If not provided, the length value represents a distance in the current user coordinate system. In presentation attributes for all properties, whether defined in SVG1.1 or in CSS2, the length identifier, if specified, must be in lower case.</p> + + <p>When lengths are used in an SVG attribute, a <length> is instead defined as follows:</p> + + <pre>length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?</pre> + + <p>The unit identifiers in such <length> values must be in lower case.</p> + + <p>Note that the non-property <length> definition also allows a percentage unit identifier. The meaning of a percentage length value depends on the attribute for which the percentage length value has been specified. Two common cases are:</p> + + <ul> + <li>when a percentage length value represents a percentage of the viewport width or height</li> + <li>when a percentage length value represents a percentage of the bounding box width or height on a given object.</li> + </ul> + + <p>In the SVG DOM, <length> values are represented using {{domxref("SVGLength")}} or {{domxref("SVGAnimatedLength")}} objects.</p> + </dd> +</dl> + +<h2 id="List-of-Ts">List-of-<var>T</var>s</h2> + +<dl> + <dt><list-of-<var>T</var>s></dt> + <dd> + <p>(Quando <var>T</var> é algum tipo.) Uma lista constituida por uma sequência de valores separados. A não ser que esteja descrito explicitamente de maneira diferente, as listas de atributos XML dentro do SVG podem ser separados por vírgula ou por espaços em branco.</p> + + <p>O espaço em branco nas listas é definido como um ou mais dos seguintes caracteres consecutivos: "espaço" (U + 0020), "tab" (U + 0009), "line feed" (U + 000A), "retorno" (U + 000D) e "form-feed" (U + 000C).</p> + + <p>Abaixo tem um modelo para uma gramática EBNF descrevendo a sintaxe da <list-of-<var>T</var>s>:</p> + + <pre>list-of-<var>T</var>s ::= <var>T</var> + | <var>T</var>, list-of-<var>T</var>s</pre> + + <p>Dentro do DOM do SVG, os tipo de valores da <list-of-<var>T</var>s> são representados por uma interface específica para o tipo particular T. Por exemplo, uma <list-of-lengths> é representada no DOM do SVG utilizando um objeto {{domxref ("SVGLengthList")}} ou {{domxref ("SVGAnimatedLengthList")}}.</p> + </dd> +</dl> + +<h2 id="Name">Name</h2> + +<dl> + <dt><name></dt> + <dd> + <p>Um nome, que é uma string, onde alguns personagens de importância sintática não são suportados.</p> + + <pre>name ::= [^,()#x20#x9#xD#xA] /* qualquer caractere exceto ",", "(", ")" ou espaço em branco */</pre> + </dd> +</dl> + +<h2 id="Number">Number</h2> + +<dl> + <dt><number></dt> + <dd> + <p>Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:</p> + + <pre>number ::= integer + | [+-]? [0-9]* "." [0-9]+</pre> + + <p>This syntax is the same as the definition in CSS (CSS2, section 4.3.1).</p> + + <p>When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:</p> + + <pre>number ::= integer ([Ee] integer)? + | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?</pre> + + <p>Within the SVG DOM, a <number> is represented as a float, {{domxref("SVGNumber")}} or a {{domxref("SVGAnimatedNumber")}}.</p> + </dd> +</dl> + +<h2 id="Number-optional-number">Number-optional-number</h2> + +<dl> + <dt><number-optional-number></dt> + <dd> + <p>A pair of <number>s, where the second <number> is optional.</p> + + <pre>number-optional-number ::= number + | number, number</pre> + + <p>In the SVG DOM, a <number-optional-number> is represented using a pair of {{domxref("SVGAnimatedInteger")}} or {{domxref("SVGAnimatedNumber")}} objects.</p> + </dd> +</dl> + +<h2 id="Opacity_value">Opacity value</h2> + +<dl> + <dt><opacity-value></dt> + <dd>A opacidade da cor ou do conteúdo do objeto atual é preenchida através de um <a href="/en-US/docs/SVG/Content_type#Number" title="SVG/Content_type#Number"><number></a>. Quaisquer valores fora da faixa de 0.0 (totalmente transparente) a 1.0 (totalmente opaco) será ajustada para este intervalo.</dd> +</dl> + +<h2 id="Paint">Paint</h2> + +<dl> + <dt><paint></dt> + <dd> + <p>Os valores das propriedades {{SVGAttr("fill")}} e {{SVGAttr("stroke")}} são especificações do tipo de pintura a ser utilizada quando o preenchimento ou acariciando um determinado elemento gráfico. As opções disponíveis e sintaxe para <paint> estão descritos na <a href="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint" title="http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint">especificação de pintura</a>.</p> + + <p>Dentro do DOM do SVG, os valores do <paint> são representados usando objetos {{domxref("SVGPaint")}}.</p> + </dd> +</dl> + +<h2 id="Percentage">Percentage</h2> + +<dl> + <dt id="DataTypePercentage"><percentage></dt> + <dd> + <p>Percentages are specified as a number followed by a "%" character:</p> + + <pre>percentage ::= number "%"</pre> + + <p>Note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute.</p> + + <p>Percentage values are always relative to another value, for example a length. Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.</p> + + <p>Within the SVG DOM, a <percentage> is represented using an {{domxref("SVGNumber")}} or {{domxref("SVGAnimatedNumber")}} object.</p> + </dd> +</dl> + +<h2 id="Time">Time</h2> + +<dl> + <dt><time></dt> + <dd> + <p>O valor de tempo é um <number> imediatamente seguida por um indentificador de unidade de tempo. Os indicadores de unidade de tempo são:</p> + + <ul> + <li><span class="attr-value">ms: </span>milisegundos</li> + <li><span class="attr-value">s: segundos</span></li> + </ul> + </dd> +</dl> + +<h2 id="Transform-list">Transform-list</h2> + +<dl> + <dt><transform-list></dt> + <dd> + <p>A <transform-list> é utilizado para especificar uma lista de transformações das coordenadas do sistema. A descrição detalhada dos valores possíveis para a <transform-list> é dada no {{SVGAttr("transform")}} atribuir definição.</p> + + <p>Dentro do DOM do SVG, o valor <transform-list> é representado usando um objeto {{domxref("SVGTransformList")}} ou {{domxref("SVGAnimatedTransformList")}}.</p> + </dd> +</dl> 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> diff --git a/files/pt-br/web/svg/index.html b/files/pt-br/web/svg/index.html new file mode 100644 index 0000000000..92561c4adc --- /dev/null +++ b/files/pt-br/web/svg/index.html @@ -0,0 +1,111 @@ +--- +title: 'SVG: Gráficos Vetoriais Escaláveis' +slug: Web/SVG +tags: + - Design Responsivo + - Gráficos 2D + - Gráficos Escaláveis + - Gráficos Vetoriais + - Imagens + - Referencia + - SVG + - Web + - graficos + - 'l10n:prioridade' + - Ícones +translation_of: Web/SVG +--- +<div class="callout-box"><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/SVG/Tutorial" title="SVG/Tutorial">Iniciando</a></strong><br> +Este tutorial irá ajudá-lo a começar a trabalhar com SVG.</div> + +<p>{{SVGRef}}</p> + +<p><strong>Gráficos Vetoriais Escaláveis (SVG)</strong> é uma linguagem de marcação <a href="/en-US/docs/XML" title="XML">XML</a> para descrever gráficos vetoriais bidimensionais. Essencialmente, SVG é para gráficos o que o XHTML é para texto.</p> + +<p>SVG é similar em escopo à tecnologia Flash, propriedade da Adobe, mas se distingue por ser uma <a href="http://www.w3.org/Graphics/SVG/">recomendação da W3C</a>, ou seja, um padrão, e por ser baseado em XML e não em um formato binário fechado. O SVG foi criado para funcionar com outros padrões da <a href="http://www.w3.org/">W3C</a>, tais como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a> e <a href="http://www.w3.org/AudioVideo/">SMIL</a>.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentação">Documentação</h2> + +<dl> + <dt><a href="/en-US/docs/SVG/Element" title="SVG/Element">Referência de elementos SVG</a></dt> + <dd>Veja detalhes sobre cada elemento SVG.</dd> + <dt><a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">Referência de atributos SVG</a></dt> + <dd>Veja detalhes sobre cada atributo SVG.</dd> + <dt><a href="/en-US/docs/Gecko_DOM_Reference#SVG_interfaces" title="Gecko_DOM_Reference#SVG_interfaces">Referência da API de DOM do SVG</a></dt> + <dd>Veja detalhes sobre toda a API de DOM do SVG.</dd> + <dt>Melhorando o conteúdo HTML</dt> + <dd>O SVG funciona juntamente com HTML, CSS e JavaScript. Use o SVG para melhorar uma página comum HTML ou uma aplicação web.</dd> + <dt>SVG na Mozilla</dt> + <dd>Notas e informações sobre como o SVG é implementado na Mozilla. + <ul> + <li><a href="/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Como o SVG e implementado no Firefox</a></li> + <li><a href="/en-US/docs/SVG_in_Firefox" title="SVG_in_Firefox">Tutorial sobre como usá-lo</a></li> + <li><a href="/en-US/docs/SVG_In_HTML_Introduction" title="SVG_In_HTML_Introduction">SVG em XHTML</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/SVG" title="tag/SVG">Ver tudo...</a></span></p> + +<h2 class="Community" id="Comunidade">Comunidade</h2> + +<ul> + <li>Ver os fóruns da Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="Ferramentas">Ferramentas</h2> + +<ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">Suíte de Teste SVG</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">Validador SVG</a> (Descontinuado)</li> + <li><a href="/en-US/docs/tag/SVG:Tools" title="tag/SVG:Tools">Mais Ferramentas...</a></li> + <li>Outros recursos: <a href="/en-US/docs/XML" title="XML">XML</a>, <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/DOM" title="DOM">DOM</a>, <a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="Exemplos">Exemplos</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (route overlay) & <a href="http://docs.google.com">Docs</a> (spreadsheet charting)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">Menus bubble SVG</a></li> + <li><a href="http://jwatt.org/svg/authoring/">Orientações para autoria SVG</a></li> + <li>Uma visão geral do <a href="/en-US/docs/Mozilla_SVG_Project" title="Mozilla_SVG_Project">Projeto SVG da Mozilla</a></li> + <li><a href="/en-US/docs/SVG/FAQ" title="SVG/FAQ">Perguntas frequentes</a> sobre SVG e Mozilla</li> + <li>Slides e demos da palestra <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml" title="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG and Mozilla</a> no SVG Open 2009</li> + <li><a href="/en-US/docs/SVG/SVG_as_an_Image" title="SVG/SVG as an Image">SVG como uma imagem</a></li> + <li><a href="/en-US/docs/SVG/SVG_animation_with_SMIL" title="SVG/SVG animation with SMIL">Animação SVG com SMIL</a></li> + <li><a href="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/lion/lion.svg">Leão</a>, <a href="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/butterfly/butterfly.svg">Borboleta</a> & <a href="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg" title="http://croczilla.com/bits_and_pieces/svg/samples/tiger/tiger.svg">Tigre</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">Galeria de arte SVG</a></li> + <li>Mais exemplos (<a href="http://croczilla.com/bits_and_pieces/svg/samples" title="http://croczilla.com/bits_and_pieces/svg/samples">SVG Samples croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> +</ul> + +<h3 id="Animação_e_interações">Animação e interações</h3> + +<p>Assim como o HTML, o SVG tem um modelo de documento (DOM), eventos e é acessível por JavaScript. Isto permite aos desenvolvedores criar animações e imagens interativas.</p> + +<ul> + <li>Algumas imagens SVG impressionantes em <a href="http://svg-wow.org/" title="http://svg-wow.org/">svg-wow.org</a></li> + <li>Extensão do Firefox (<a href="http://schepers.cc/grafox/">Grafox</a>) para adicionar suporte a um subconjunto de animação SMIL</li> + <li>Manipulação interativa de <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">fotos</a></li> + <li><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">Transformações HTML</a> usando <code>foreignObject</code> do SVG</li> + <li><a href="http://lab.vodafone.com/vienna/">Arte</a> animada</li> +</ul> + +<h3 id="Mapeamentos_gráficos_jogos_experimentos_3D">Mapeamentos, gráficos, jogos & experimentos 3D</h3> + +<p>Embora o SVG ainda tenha de percorrer um longo caminho para prover conteúdo web avançado, aqui estão alguns exemplos de uso intensivo de SVG.</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">Um Tetris SVG</a> & <a href="http://www.treebuilder.de/svg/connect4.svg">Connect 4</a></li> + <li><a href="http://files.myopera.com/orinoco/svg/USStates.svg" title="">Find the State</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">Mapa da população dos EUA</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D box</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D boxes</a></li> + <li><a href="http://jvectormap.com/" title="http://jvectormap.com/">jVectorMap</a> (mapas interativos para visualização de dados)</li> +</ul> +</div> +</div> + +<div>{{HTML5ArticleTOC}}</div> diff --git a/files/pt-br/web/svg/intensivo_de_namespaces/index.html b/files/pt-br/web/svg/intensivo_de_namespaces/index.html new file mode 100644 index 0000000000..35f50be610 --- /dev/null +++ b/files/pt-br/web/svg/intensivo_de_namespaces/index.html @@ -0,0 +1,186 @@ +--- +title: Intensivo de Namespaces +slug: Web/SVG/Intensivo_de_Namespaces +tags: + - SVG + - XML +translation_of: Web/SVG/Namespaces_Crash_Course +--- +<p>Como um dialeto <a href="/pt-BR/docs/Glossario/XML" title="en-US/docs/Glossary/XML">XML</a>, o <a href="/pt-BR/docs/Web/SVG" title="en-US/docs/Web/SVG">SVG</a> tem <em>namespace</em>. É importante entender o conceito de <em><a href="/pt-BR/docs/Web/SVG/Intensivo_de_Namespaces">namespaces</a></em> e como eles são usados se você planeja criar seu próprio conteúdo em SVG. Versões de visualizadores SVG prévias ao lançamento do Firefox 1.5 infelizmente deu pouca atenção aos <em>namespaces </em>mas eles são essenciais para dialetos multi-XML suportando agentes de usuários como navegadores baseados em <a href="/en-US/docs/Mozilla/Gecko" title="en-US/docs/Mozilla/Gecko">Gecko</a> que devem ser muito rigorosos. Tome um tempo para entender <em>namespaces </em>agora e irá te privar de muita dor de cabeça no futuro.</p> + +<h3 id="Experiência">Experiência</h3> + +<p>Tem sido uma longa meta do W3C para fazer possível para diferentes tipos de conteúdo baseado em XML ser misturado no mesmo arquivo XML. Por exemplo, SVG e <a href="/en-US/docs/Web/MathML" title="en-US/docs/Web/MathML">MathML</a> podem ser incorporados diretamente em um documento cientificamente baseado em XHTML. Ser apto de misturar tipos de conteúdo como este tem muitas vantagens, mas também requeriu problemas reais para serem resolvidos.</p> + +<p>Naturalmente, cada dialeto XML define o significado de um nome de tag de marcação descrito em sua especificação. O problema em misturar conteúdo de diferentes dialetos XML em um único documento XML é que as tags definidas por um dialeto podem ter o mesmo nome que as tags definidas por outro. Por exemplo, ambos XHTML e SVG tem uma tag <code><title></code>. Como o software deveria distinguir entre os dois? Na verdade, como o software conta quando o conteúdo XML é algo que ele conhece sobre, e não somente um arquivo XML sem significado contendo nomes de tags arbitrárias desconhecidas para ele?</p> + +<p>Contrário à opinição popular, a resposta para esta pergunta não é "ele pode dizer pela declaração <code>DOCTYPE</code>". DTD's não foram feitos com conteúdo misto levado em consideração, e tentativas passadas de criar DTD's de conteúdo misto são hoje consideradas de terem falhado. O XML, e alguns dialetos XML (incluindo SVG), não requerem uma declaração <code>DOCTYPE</code>, e SVG 1.2 nem terá um. O fato que declarações <code>DOCTYPE</code> (usualmente) combinam o conteúdo em arquivos de tipo de conteúdo únicos é uma mera coincidência. Os DTDs são somente para validação, não para identificação de conteúdo. Softwared que enganam e identificam conteúdo XML usando sua declaração <code>DOCTYPE</code> causam dano.</p> + +<p>A resposta real para a pergunta é que um conteúdo XML conta para o software qual dialeto os nomes de tag pertencem ao dar "declarações de <em>namespaces</em>" para as tags. </p> + +<h3 id="Declaring_namespaces" name="Declaring_namespaces">Declarando <em>namespaces</em></h3> + +<p>O que estas declarações de <em>namespace </em>parecem, e onde elas vão? Aqui vai um exemplo curto.</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg"> + <!-- mais tags aqui --> +</svg> +</pre> + +<p>A declaração de <em>namespace </em>é fornecida por um atributo <code>xmlns</code>. Este atributo diz que a tag <code><svg></code> e suas tags filhas pertencem a qualquer dialeto XML que tem o nome de <em>namespace </em><span class="nowiki">'http://www.w3.org/2000/svg'</span> que é, com certeza, SVG. Note a declaração de <em>namespace </em>somente precisa ser ser fornecida de uma vez em uma tag raiz. A declaração define o <em>namespace padrão</em>, então o software sabe que todas as tags descendentes de tags <code><svg></code> também pertencem ao mesmo <em>namespace</em>. Softwares conferem para ver se eles reconhecem o nome de <em>namespace </em>para determinar se eles sabem como lidar com a marcação. </p> + +<p>Note que nomes de <em>namespace </em>são somente strings, então o fato que o nome de <em>namespace </em>SVG também parece com um URI não é importante. URI's são comumente usadas porque eles são únicos, a intenção não é para "linkar" em algum lugar. (Na verdade URI's são usadas tão frequentemente que o termo "URI de <em>namespace</em>" é comumente usado ao invés de "nome de namespace".)</p> + +<h4 id="Redeclaring_the_default_namespace" name="Redeclaring_the_default_namespace">Redeclarando o <em>namespace </em>padrão</h4> + +<p>Se todos os descendentes da tag raiz também são definidos para estarem presentes no <em>namespace </em>padrão, como você mistura conteúdo de outro <em>namespace</em>? Fácil. Você apenas redefine o <em>namespace </em>padrão. Aqui vai um exemplo simples.</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <!-- algumas tags XHTML aqui --> + <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> + <!-- algumas tags SVG aqui --> + </svg> + <!-- algumas tags XHTML aqui --> + </body> +</html> +</pre> + +<p>Neste exemplo o atributo <code>xmlns</code> na tag raíz <code><html></code> declara o <em>namespace </em>padrão para ser XHTML. Como um resultado, ela e todas as tags filhas são interpretadas pelo software como pertencente ao XHTML, exceto para a tag <code><svg></code>. A tag <code><svg></code> tem seu próprio atributo <code>xmlns</code>, e ao redeclarar o <em>namespace </em>padrão, isto conta para o software que a tag <code><svg></code> e suas descendentes (a menos que elas também redeclarem o <em>namespace </em>padrão) pertencem ao SVG.</p> + +<p>Viu? <em>Namespaces </em>não são tão difíceis.</p> + +<h4 id="Declaring_namespace_prefixes" name="Declaring_namespace_prefixes">Declarando prefixos de <em>namespaces</em></h4> + +<p>Dialetos XML não somente definem suas próprias tags, mas também seus próprios atributos. Por padrão, atributos não tem um <em>namespace</em>, e são conhecidos somente por ser únicos porque aparecem em um elemento que por si só tem um nome único. No entanto, algumas vezes é necessário definir atributos para que eles possam ser reusados em diferentes elementos e ainda sim serem considerados como sendo do mesmo atributo, independente do elemento com o qual eles são usados. Um exemplo muito bom disto é o atributo <code>href</code> definido pela especificação XLink. Este atributo é usado comumente por outros dialetos XML como um meio de conectar a recursos externos. Mas como você conta para o software qual dialeto o atributo pertence, neste caso XLink? Considere o exemplo seguinte.</p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="o-script-mais-legal.js" type="text/ecmascript"/> +</svg> +</pre> + +<p>Este exemplo tem o atributo de aparência bastante incomum <code>xmlns:xlink</code>. Como você pode ter adivinhado da primeira parte 'xmlns', esta é outra declaração de <em>namespace</em>. Contudo, ao invés de definir o <em>namespace </em>padrão, esta declaração de <em>namespace </em>define o namespace para alguma coisa chamada como "prefixo <em>namespace</em>". Neste caso, nós escolhemos usar o prefixo <code>xlink</code> (a segunda parte) uma vez que o prefixo será usado para contar ao software sobre os atributos que pertencem ao XLink.</p> + +<p>Como seus nomes sugerem, prefixos de <em>namespace </em>são usados para prefixar nomes de atributos e nomes de tags. Isto é feito colocando o prefixo de <em>namespace </em>e dois pontos antes do nomes de atributo como mostrado na tag <code><script></code> no exemplo acima. Isto conta para o software que aquele atributo particular pertence ao <em>namespace </em>atribuído ao prefixo de <em>namespace </em>(XLink), e é um atribuído que pode ser usado com o mesmo significado em outras tags.</p> + +<p>Note que é um erro de XML usar um prefixo que não foi ligado au um nome de <em>namespace</em>. A ligação criada pelo atributo <code>xmlns:xlink</code> no exemplo acima é absolutamente essencial se o atributo <code>xlink:href</code> não é para para causar um erro. Este atributo XLink é também frequentemente usado no SVG nas tags <code><a></code>, <code><use></code> e <code><image></code>, dentre outros, então é uma boa idéia sempre incluir a declaração XLink em seus documentos.</p> + +<p>Aparte, é útil saber que prefixos podem também ser usados para names de tags. Isto conta para o software que aquela tag em particular (não a tag filha) pertence ao <em>namespace </em>ligado ao prefixo. Saber disso irá te poupar de confusão se você se deparar com uma marcação como a do exemplo seguinte:</p> + +<pre><html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> + <body> + <h1>SVG incorporado inline no XHTML</h1> + <svg:svg width="300px" height="200px"> + <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/> + </svg:svg> + </body> +</html> +</pre> + +<p>Note que pelo prefixo de <em>namespace </em>ser usado para a tag <code><svg:svg></code> e seu filho <code><svg:circle></code>, não foi necessário redeclarar o <em>namespace </em>padrão. Em geral, é melhor redeclarar o <em>namespace </em>padrão ao invés de prefixar muitas tags desta forma. </p> + +<h3 id="Scripting_in_namespaced_XML" name="Scripting_in_namespaced_XML"><em>Scripting </em>em XML com <em>namespaces</em></h3> + +<p><em>Namespaces </em>não afetam somente a marcação, mas também o <em>scripting</em>. Se você escreve scripts para XML com <em>namespace</em>, como SVG, continue lendo.</p> + +<p>A recomendação <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/">DOM Level 1</a> foi criado antes da recomendação <em><a class="external" href="http://www.w3.org/TR/REC-xml-names/">original Namespaces in XML</a></em> ser lançada; assim sendo, DOM1 não está ciente de <em>namespaces</em>. Isto causa problemas para XML com namespaces, como SVG. Para resolver estes problemas, a recomendação <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Level 2 Core</a> adicionou equivalentes cientes do <em>namespace </em>de todos os métodos aplicáveis do DOM Nível 1. Quando estiver <em>scripting</em> em SVG, é <em><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Namespaces-Considerations">importante usar os métodos cientes de namespace</a></em>. A tabela abaixo lista os métodos DOM1 que não devem ser usados em SVG, junto com seus equivalentes em DOM2 que devem ser usados ao invés.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>DOM1 (não use)</th> + <th>DOM2 (use estes!)</th> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createAttribute">createAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrAttrNS">createAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createElement">createElement</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-DocCrElNS">createElementNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttributeNode">getAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">getAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">getAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">getAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getElementsByTagName">getElementsByTagName</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">getElementsByTagNameNS</a> (também <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">added to Element</a>)</td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getNamedItem">getNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getNamedItemNS">getNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#">hasAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">hasAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">removeAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">removeAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeNamedItem">removeNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-removeNamedItemNS">removeNamedItemNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">setAttribute</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">setAttributeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">setAttributeNode</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">setAttributeNodeNS</a></td> + </tr> + <tr> + <td><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setNamedItem">setNamedItem</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-setNamedItemNS">setNamedItemNS</a></td> + </tr> + </tbody> +</table> + +<p>O primeiro argumento para todos os métodos cientes de <em>namespace </em>em DOM2 devem ser nomes de <em>namespace </em>(também conhecidos como <em>namespace </em>URI) do elemento ou atributo em questão. Para <strong>elementos</strong> SVG isto é <span class="nowiki">'http://www.w3.org/2000/svg'</span>. Contudo, note cuidadosamente: as recomendações <em><a class="external" href="http://www.w3.org/TR/xml-names11/#defaulting">Namespaces in XML 1.1</a></em> declara que o nome de <em>namespace </em>para atributos sem um prefixo não tem um valor. Em outras palavras, states that the <em>namespace </em>name for attributes without a prefix does not have a value. In other words, embora os atributos pertencem ao namespace da tag, você não usa o nome de namespace da tag. Em vez disso, <strong>você deve usar nulo como nome de <em>namespace </em>para atributos não qualificados(sem prefixos)</strong>. Então, para criar um <em>elemento</em> SVG <code>rect</code> usando <code>document.createElementNS()</code>, você deve escrever:</p> + +<pre><code class="language-javascript">document.createElementNS('http://www.w3.org/2000/svg', 'rect');</code></pre> + +<p>Mas para recuperar o valor de atributo <code>x</code> em um elemento SVG <code>rect</code>, você deve escrever:</p> + +<pre class="eval"><code class="language-javascript">rect.getAttributeNS(<strong>null</strong>, 'x');</code></pre> + +<p>Note que isto não é o caso para atributos <em>com</em> um prefixo de <em>namespace </em>(atributos que não pertencem ao mesmo dialeto XML como a tag). Atributos como o <code>xlink:href</code> requerem o nome de <em>namespace </em>que foi designado para aquele prefixo (<span class="nowiki">http://www.w3.org/1999/xlink</span> para XLink). Consequentemente para pegar o valor do atributo <code>xlink:href</code> de um elemento <code><a></code> em SVG você deveria escrever:</p> + +<pre><code class="language-javascript">elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');</code></pre> + +<p>Para definir atributos que tem um <em>namespace</em>, é recomendado (mas não requerido) que você também inclua seus prefixos no segundo argumento para que o DOM possa, depois, ser facilmente convertido depois para XML (se, por exemplo você quer enviá-los de volta para o servidor). Por exemplo: </p> + +<pre><code class="language-javascript">elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');</code></pre> + +<p>Como um exemplo final, aqui está a demonstração de como você deveria criar um elemento <code><image></code> dinamicamente usando script: </p> + +<pre><code class="language-javascript">var SVG_NS = 'http://www.w3.org/2000/svg'; +var XLink_NS = 'http://www.w3.org/1999/xlink'; +var image = document.createElementNS(SVG_NS, 'image'); +image.setAttributeNS(null, 'width', '100'); +image.setAttributeNS(null, 'height', '100'); +image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png'); +</code></pre> + +<h3 id="Conclusion" name="Conclusion">Conclusão</h3> + +<p>Tenha certeza que você sempre declara os <em>namespaces </em>que você usa em seus arquivos XML. Se você não usar, softwares como Firefox não reconhecerão seus conteúdos e irão simplesmente mostrar a marcação XML ou informar o usuário que há um erro no XML. É uma boa idéia usar um template que inclui todas as declarações de <em>namespace </em>comumente usadas ao criar novos arquivos SVG. Se você não tem um ainda, faça um começando com o seguinte código: </p> + +<pre><svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +</svg> +</pre> + +<p>Mesmo que você não use todos aqueles <em>namespaces</em> em um documento, não há dano ao incluir declarações de <em>namespace</em>. Isto pode te privar de alguns erros irritantes se você acabar adicionando conteúdo de um dos <em>namespaces </em>não usados em datas posteriores. </p> + +<h3 id="A_full_example" name="A_full_example">Um exemplo completo</h3> + +<p>Para um exemplo completo, veja <em><a href="/en-US/docs/Web/SVG/Namespaces_Crash_Course/Example">SVG: Namespaces Crash Course: Example</a></em>.</p> diff --git a/files/pt-br/web/svg/tutorial/index.html b/files/pt-br/web/svg/tutorial/index.html new file mode 100644 index 0000000000..80ca35deb9 --- /dev/null +++ b/files/pt-br/web/svg/tutorial/index.html @@ -0,0 +1,49 @@ +--- +title: Tutorial SVG +slug: Web/SVG/Tutorial +translation_of: Web/SVG/Tutorial +--- +<p>Scalable Vector Graphics (Gráficos vetoriais escaláveis), <a href="/en-US/Web/SVG" title="en-US/Web/SVG">SVG</a>, é uma linguagem W3C XML para marcação de gráficos. Ela é parcialmente implementada no Firefox, Opera, Navegadores com WebKit , Internet Explorer e outros navegadores.</p> + +<p>Este tutorial tem como objetivo explicar as partes internas de SVG acompanhada de detalhes técnicos. Se você quiser usá-la apenas para desenhar belas imagens, você pode encontrar informações mais uteis na <a class="external" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Página de documentação do Inkscape</a>. Outra boa introdução ao SVG é fornecida pelo W3C' <a class="external" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>.</p> + +<div class="note">O tutorial está em um estágio inicial de desenvolvimento.Se puder, por favor ajude escrevendo um parágrafo ou dois. Pontos extras para quem escrever uma página inteira!</div> + +<h5 id="Apresentando_SVG_com_Scratch">Apresentando SVG com Scratch</h5> + +<ul> + <li><a href="/en-US/Web/SVG/Tutorial/Introduction" title="en-US/Web/SVG/Tutorial/Introduction">Introdução</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Getting_Started" title="en-US/Web/SVG/Tutorial/Getting_Started">Começando</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Positions" title="en-US/Web/SVG/Tutorial/Positions">Posições</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Shapes" title="en-US/Web/SVG/Tutorial/Basic_Shapes">Formas Básicas</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Caminhos</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Fills_and_Strokes" title="en-US/Web/SVG/Tutorial/Fills_and_Strokes">Preenchimentos e traços</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Gradients" title="en-US/Web/SVG/Tutorial/Gradients">Gradientes</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Patterns" title="en-US/Web/SVG/Tutorial/Patterns">Padrões</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Texts" title="en-US/Web/SVG/Tutorial/Texts">Textos</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Basic_Transformations" title="en-US/Web/SVG/Tutorial/Basic_Transformations">Transformações básicas</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Clipping_and_masking" title="en-US/Web/SVG/Tutorial/Clipping_and_masking">Recortes e mascaras</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Other_content_in_SVG" title="en-US/Web/SVG/Tutorial/Other content in SVG">Outros conteúdos em SVG</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Filter_effects" title="en-US/Web/SVG/Tutorial/Filter effects">Efeitos de filtro</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_fonts" title="en-US/Web/SVG/Tutorial/SVG fonts">Fontes SVG</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/SVG_Image_Tag" title="en-US/Web/SVG/Tutorial/SVG Image Tag">SVG e a tag Imagem</a></li> + <li><a href="/en-US/Web/SVG/Tutorial/Tools_for_SVG" title="en-US/Web/SVG/Tutorial/Tools_for_SVG">Ferramentas para SVG</a></li> +</ul> + +<p>Os seguintes tópicos são mais avançados e portanto precisam de tutoriais próprios.</p> + +<h5 id="Scripting_SVG_with_JavaScript">Scripting SVG with JavaScript</h5> + +<p>TBD</p> + +<h5 id="SVG_filters_tutorial">SVG filters tutorial</h5> + +<p>TBD</p> + +<h5 id="Animations_with_SMIL_in_SVG">Animations with SMIL in SVG</h5> + +<p>TBD</p> + +<h5 id="Creating_fonts_in_SVG">Creating fonts in SVG</h5> + +<p>TBD</p> diff --git a/files/pt-br/web/svg/tutorial/introduction/index.html b/files/pt-br/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..8c38a939d3 --- /dev/null +++ b/files/pt-br/web/svg/tutorial/introduction/index.html @@ -0,0 +1,39 @@ +--- +title: Introdução +slug: Web/SVG/Tutorial/Introduction +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/en-US/SVG" title="en-US/SVG">SVG</a> é uma linguagem <a href="/en-US/XML" title="en-US/XML">XML</a>, similar ao <a href="/en-US/XHTML" title="en-US/XHTML">XHTML</a>, na qual pode ser usada para desenhar vetores gráficos (imagens), como os mostrados à direita. Ela pode ser usada para criar uma imagem qualquer especificando todas as linhas e formas necessárias, para modificar uma imagem raster já existente ou fazer ambas as opções. A imagem e seus componentes também podem ser transformados, compostas em conjunto, ou filtradas para mudar completamente sua aparência.</p> + +<p>SVG surgiu em 1999 após vários outros formatos terem sido submetidos à <a class="external" href="http://www.w3.org" title="en-US/W3C">W3C</a> e não terem sido totalmente ratificados. Enquanto a especificação tem levado um bom tempo, a aceitação pelos navegadores têm sido lenta, e não há tanto conteúdo sobre SVG sendo utilizado na internet neste momento (2009). Even the implementations that are available often are not as fast as competing technologies like <a href="/en-US/HTML/Canvas" title="en-US/HTML/Canvas">HTML5 Canvas</a> or Adobe Flash as a full application interface. SVG does offer benefits over both implementations, some of which include having a <a href="/en-US/docs/Web/API">DOM interface</a> available for it, and not requiring third-party extensions. Whether or not to use it often depends on your specific use case.</p> + +<h3 id="Ingredientes_Básicos">Ingredientes Básicos</h3> + +<p>O <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">HTML</a> fornece elementos para definir cabeçalhos, parágrafos, tabelas e assim por diante. Da mesma forma, o SVG fornnece elementos para circulos,retangulos e curvas simples e complexas. Um documentos simples de SVG consiste de nada mais do que um elemento-raiz {{SVGElement('svg')}} e várias formas básicas que juntas constroem um gráfico. Há também o elemento {{SVGElement('g')}}, que é utilizado para agrupar várias formas básicas.</p> + +<p>Começando daqui, o SVG em imagem pode se tornar arbitrariamente complexo. SVG suporta gradientes, rotação, filtros, efeitos, animações, interatividade com JavaScript e assim por diante. Mas todas essas ferramentas extras da linguagem dependem desse conjunto relativamente pequeno de elementos para definir a área gráfica.</p> + +<h3 id="Before_you_start" name="Before_you_start">Antes de você começar</h3> + +<p>Há muitos softwares disponíveis como o <a class="external" href="http://www.inkscape.org/">Inkscape</a> os quais são gratuitos e usam SVG como seus formatos de arquivos padrão. Entretanto, este tutorial dependerá apenas do XML ou do editor de texto da sua escolha. A ideia é ensinar o funcionamento interno do SVG para aqueles que desejam entendê-lo, e a melhor forma é "pondo a mão na masssa", escrevendo algumas marcações. Contudo você deve anotar o seu objetivo. Nenhum dos visualizadores SVG são iguais, então, há uma boa chance de você desenvolver para um aplicativo não será exibido exatamente da mesma forma que em outros, simplesmente porque eles suportam diferentes níveis da especificação SVG ou outra especificação que você está usando junto com o SVG (isto é, JavaScript ou CSS).</p> + +<p>SVG é suportado em todos os browsers modernos em cobre algumas versões anteriores em alguns casos. Uma tabela completa de compatibilidade com browser pode ser encontrada em <a href="http://caniuse.com/svg">Can I use</a>. O Firefox suporta alguns conteúdos SVG desde a versão 1.5, e este suporte vem crescendo a cada lançamento desde então. Espero, que com essa tradução aqui, o MDN possa ajudar os desenvolvedores a acompanhar as diferenças entre o Gecko e algumas das outras importantes implementações.</p> + +<ul> + <li>O XML é case-sensitive (diferencia maiúsculas e minúsculas, diferentemente do HTML), ou seja, todos os exemplos devem ser escritos exatamente como mostrado aqui.</li> + <li>Valores de atributos, mesmo que estes sejam números, devem ser colocados dentro de aspas.</li> +</ul> + +<p>SVG é uma especificação imensa. Este tutorial combre apenas o conteúdo básico. Uma vez que você se familiarizar você estará habilitado a usar o <a href="/en-US/SVG/Element" title="en-US/SVG/Element">Element Reference</a> e o <a href="/en-US/docs/DOM/DOM_Reference#SVG_interfaces" title="en-US/SVG/Interface">Interface Reference</a> para encontrar qualquer outra coisa que precisa saber.</p> + +<h3 id="Sabores_do_SVG">Sabores do SVG</h3> + +<p>Desde que se tornou uma recomendação em 2003, a mais recente Versão SVG completa é 1.1. Ele se baseia SVG 1.0, mas adiciona mais modularização para facilitar a implementação. <a href="http://www.w3.org/TR/SVG/">The second edition of SVG 1.1</a> tournouse uma recomendação em 2011. O SVG 1.2 completo deveria se tornar o próximo grande lançamento. Ele foi descartado para o próximo lançamento <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>, o qual está sob forte desenvolvimento agora e segue uma abordagem semelhante ao CSS 3, que divide <span class="tlid-translation translation"><span title="">pois divide componentes em várias especificações fracamente acopladas.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Além das recomendações completas do SVG, o grupo de trabalho do W3C introduziu o SVG Tiny e o SVG Basic em 2003. Esses dois perfis são voltados principalmente para dispositivos móveis.</span> <span title="">O primeiro, SVG Tiny, deve render primitivos gráficos para pequenos dispositivos com baixa capacidade.</span> <span title="">O SVG Basic oferece muitos recursos de SVG completo, mas não inclui aqueles que são difíceis de implementar ou pesados para renderizar (como animações).</span> <span title="">Em 2008, o SVG Tiny 1.2 tornou-se uma recomendação do W3C.</span><br> + <br> + <span title="">Havia planos para uma especificação de impressão SVG, que adicionaria suporte a várias páginas e gerenciamento de cores aprimorado.</span> <span title="">Este trabalho foi descontinuado.</span></span></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> |