aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/svg/tutorial
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/ca/web/svg/tutorial
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/ca/web/svg/tutorial')
-rw-r--r--files/ca/web/svg/tutorial/svg_and_css/index.html224
1 files changed, 0 insertions, 224 deletions
diff --git a/files/ca/web/svg/tutorial/svg_and_css/index.html b/files/ca/web/svg/tutorial/svg_and_css/index.html
deleted file mode 100644
index 6d729fdfe1..0000000000
--- a/files/ca/web/svg/tutorial/svg_and_css/index.html
+++ /dev/null
@@ -1,224 +0,0 @@
----
-title: SVG i CSS
-slug: Web/SVG/Tutorial/SVG_and_CSS
-tags:
- - CSS
- - CSS:Getting_Started
- - Example
- - Guide
- - Intermediate
- - NeedsLiveSample
- - NeedsUpdate
- - SVG
- - Web
-translation_of: Web/SVG/Tutorial/SVG_and_CSS
-original_slug: Web/Guide/CSS/Inici_en_CSS/SVG_i_CSS
----
-<div>{{CSSTutorialTOC}}</div>
-
-<p>Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: <a href="/en-US/docs/SVG">SVG</a>.</p>
-
-<p>Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.</p>
-
-<p>Aquesta és la 2nd secció de la Part II del <a href="/en-US/docs/Web/Guide/CSS/Getting_started">tutorial CSS</a>.<br>
- Secció anterior: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br>
- Secció següent: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p>
-
-<h3 id="Information:_SVG" name="Information:_SVG"><span id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>SVG</span></span></h3>
-
-<p><span id="result_box" lang="ca"><em><span>SVG</span></em> <span>(</span><span>Scalable</span> <span>Vector</span> <span>Graphics</span><span>)</span> <span>és</span> <span>un llenguatge</span> <span>basat</span> <span>en XML</span> <span>per a la</span> <span>creació</span> <span>de gràfics</span><span>.</span></span></p>
-
-<p><span id="result_box" lang="ca"><span>Es</span> <span>pot</span> <span>utilitzar</span> <span>per a imatges</span> <span>estàtiques,</span> <span>i</span> <span>també</span> <span>per a animacions</span> <span>i interfícies</span> <span>d'usuari.</span></span></p>
-
-<p>Igual que altres llenguatges basats en XML, SVG suporta fulles d'estil CSS perquè pugui separar l'estil d'un gràfic del seu contingut.</p>
-
-<p>A més, les fulles d'estil que s'utilitzen amb altres llenguatges de marcat de documents poden especificar l'adreça URL d'un gràfic SVG on es requereix una imatge. Per exemple, una fulla d'estil que s'utilitza amb un document HTML pot especificar l'adreça URL d'un gràfic SVG en el valor d'una propietat <code>background</code>.</p>
-
-<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;">
- <caption>Més detalls</caption>
- <tbody>
- <tr>
- <td>
- <p>En el moment d'escriure (mitjans 2011), la majoria dels navegadors moderns tenen suport bàsic per a SVG, incloent Internet Explorer 9 o superior. Algunes de les característiques de SVG són compatibles parcialment o no en alguns navegadors. Consulteu les <a href="http://caniuse.com/#search=SVG">taulae SVG en caniuse.com</a> per a una visió general de suport per SVG, o les taules de compatibilitat <a href="/en-US/docs/SVG/Element">referència de l'element SVG</a> per al suport de determinats elements.</p>
-
- <p>Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p>
-
- <p>Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de <a href="/en-US/docs/SVG">SVG</a> al wiki.</p>
- </td>
- </tr>
- </tbody>
-</table>
-
-<h3 id="Action:_An_SVG_demonstration" name="Action:_An_SVG_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>SVG</span></span></h3>
-
-<p><span id="result_box" lang="ca"><span>Feu</span> <span>un nou</span> <span>document</span> <span>SVG</span> <span>com</span> <span>un arxiu de</span> <span>text</span> <span>pla,</span> <code><span>doc8.svg</span></code><span>.</span> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>;</span></span></p>
-
-<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
-
-&lt;?xml-stylesheet type="text/css" href="style8.css"?&gt;
-
-&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
- "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
-
-&lt;svg width="600px" height="600px" viewBox="-300 -300 600 600"
- xmlns="http://www.w3.org/2000/svg" version="1.1"
- xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
-
-&lt;title&gt;SVG demonstration&lt;/title&gt;
-&lt;desc&gt;Mozilla CSS Getting Started - SVG demonstration&lt;/desc&gt;
-
-&lt;defs&gt;
- &lt;g id="segment" class="segment"&gt;
- &lt;path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/&gt;
- &lt;path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/&gt;
- &lt;/g&gt;
- &lt;g id="quadrant"&gt;
- &lt;use xlink:href="#segment"/&gt;
- &lt;use xlink:href="#segment" transform="rotate(18)"/&gt;
- &lt;use xlink:href="#segment" transform="rotate(36)"/&gt;
- &lt;use xlink:href="#segment" transform="rotate(54)"/&gt;
- &lt;use xlink:href="#segment" transform="rotate(72)"/&gt;
- &lt;/g&gt;
- &lt;g id="petals"&gt;
- &lt;use xlink:href="#quadrant"/&gt;
- &lt;use xlink:href="#quadrant" transform="rotate(90)"/&gt;
- &lt;use xlink:href="#quadrant" transform="rotate(180)"/&gt;
- &lt;use xlink:href="#quadrant" transform="rotate(270)"/&gt;
- &lt;/g&gt;
- &lt;radialGradient id="fade" cx="0" cy="0" r="200"
- gradientUnits="userSpaceOnUse"&gt;
- &lt;stop id="fade-stop-1" offset="33%"/&gt;
- &lt;stop id="fade-stop-2" offset="95%"/&gt;
- &lt;/radialGradient&gt;
- &lt;/defs&gt;
-
-&lt;text id="heading" x="-280" y="-270"&gt;
- SVG demonstration&lt;/text&gt;
-&lt;text id="caption" x="-280" y="-250"&gt;
- Move your mouse pointer over the flower.&lt;/text&gt;
-
-&lt;g id="flower"&gt;
- &lt;circle id="overlay" cx="0" cy="0" r="200"
- stroke="none" fill="url(#fade)"/&gt;
- &lt;use id="outer-petals" xlink:href="#petals"/&gt;
- &lt;use id="inner-petals" xlink:href="#petals"
- transform="rotate(9) scale(0.33)"/&gt;
- &lt;/g&gt;
-
-&lt;/svg&gt;
-</pre>
-
-<p>Feu una nou arxiu CSS, <code>style8.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>;</span></span></p>
-
-<pre class="brush: css">/*** SVG demonstration ***/
-
-/* page */
-svg {
- background-color: beige;
- }
-
-#heading {
- font-size: 24px;
- font-weight: bold;
- }
-
-#caption {
- font-size: 12px;
- }
-
-/* flower */
-#flower:hover {
- cursor: crosshair;
- }
-
-/* gradient */
-#fade-stop-1 {
- stop-color: blue;
- }
-
-#fade-stop-2 {
- stop-color: white;
- }
-
-/* outer petals */
-#outer-petals {
- opacity: .75;
- }
-
-#outer-petals .segment-fill {
- fill: azure;
- stroke: lightsteelblue;
- stroke-width: 1;
- }
-
-#outer-petals .segment-edge {
- fill: none;
- stroke: deepskyblue;
- stroke-width: 3;
- }
-
-#outer-petals .segment:hover &gt; .segment-fill {
- fill: plum;
- stroke: none;
- }
-
-#outer-petals .segment:hover &gt; .segment-edge {
- stroke: slateblue;
- }
-
-/* inner petals */
-#inner-petals .segment-fill {
- fill: yellow;
- stroke: yellowgreen;
- stroke-width: 1;
- }
-
-#inner-petals .segment-edge {
- fill: none;
- stroke: yellowgreen;
- stroke-width: 9;
- }
-
-#inner-petals .segment:hover &gt; .segment-fill {
- fill: darkseagreen;
- stroke: none;
- }
-
-#inner-petals .segment:hover &gt; .segment-edge {
- stroke: green;
- }
-</pre>
-
-<p>Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.</p>
-
-<p>Aquest wiki no suporta SVG en les pàgines, de manera que no es pot mostrar la demostració aquí. El gràfic es veu així:</p>
-
-<table style="border: 2px outset #3366bb;">
- <tbody>
- <tr>
- <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td>
- </tr>
- </tbody>
-</table>
-
-<p>Notes sobre aquesta demostració:</p>
-
-<ul>
- <li><span id="result_box" lang="ca"><span>El document</span> <span>SVG</span> <span>vincula</span> la<span> fulla</span> <span>d'estil de</span> <span>la forma</span> <span>habitual.</span></span></li>
- <li>SVG té les seves pròpies propietats i valors CSS. Algunes d'elles són similars a les propietats CSS per a HTML.</li>
-</ul>
-
-<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;">
- <caption>Repte</caption>
- <tbody>
- <tr>
- <td>Canvieu la fulla d'estil perquè els pètals interns es tornin tots de color rosa quan el punter del ratolí està sobre qualsevol d'ells, sense canviar la forma en què els pètals externs funcionen.</td>
- </tr>
- </tbody>
-</table>
-
-<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Veure la solució per el repte.</a></p>
-
-<h4 id="What_next.3F" name="What_next.3F">I ara què?</h4>
-
-<p>En aquesta demostració, el vostre navegador habilitat per SVG  ja sap com mostrar els elements SVG. La fulla d'estil només modifica la visualització de certes maneres. Això també és cert per als documents HTML i XUL. Però es pot utilitzar CSS per a documents XML d'ús general, on no hi ha un camí predefinit per mostrar els elements. La pàgina següent mostra això: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">dades XML</a></p>