SVG i CSS

This translation is incomplete. Please help translate this article from English.

Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: SVG.

Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.

Aquesta és la 2nd secció de la Part II del tutorial CSS.
Secció anterior: JavaScript
Secció següent: XML data

Informació: SVG

SVG (Scalable Vector Graphics) és un llenguatge basat en XML per a la creació de gràfics.

Es pot utilitzar per a imatges estàtiques, i també per a animacions i interfícies d'usuari.

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.

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 background.

Més detalls

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 taulae SVG en caniuse.com per a una visió general de suport per SVG, o les taules de compatibilitat referència de l'element SVG per al suport de determinats elements.

Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per Adobe.

Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de SVG al wiki.

Acció: Una demostració SVG

Feu un nou document SVG com un arxiu de text pla, doc8.svg. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet type="text/css" href="style8.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<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">

<title>SVG demonstration</title>
<desc>Mozilla CSS Getting Started - SVG demonstration</desc>

<defs>
  <g id="segment" class="segment">
    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
    </g>
  <g id="quadrant">
    <use xlink:href="#segment"/>
    <use xlink:href="#segment" transform="rotate(18)"/>
    <use xlink:href="#segment" transform="rotate(36)"/>
    <use xlink:href="#segment" transform="rotate(54)"/>
    <use xlink:href="#segment" transform="rotate(72)"/>
    </g>
  <g id="petals">
    <use xlink:href="#quadrant"/>
    <use xlink:href="#quadrant" transform="rotate(90)"/>
    <use xlink:href="#quadrant" transform="rotate(180)"/>
    <use xlink:href="#quadrant" transform="rotate(270)"/>
    </g>
  <radialGradient id="fade" cx="0" cy="0" r="200"
      gradientUnits="userSpaceOnUse">
    <stop id="fade-stop-1" offset="33%"/>
    <stop id="fade-stop-2" offset="95%"/>
    </radialGradient>
  </defs>

<text id="heading" x="-280" y="-270">
  SVG demonstration</text>
<text  id="caption" x="-280" y="-250">
  Move your mouse pointer over the flower.</text>

<g id="flower">
  <circle id="overlay" cx="0" cy="0" r="200"
    stroke="none" fill="url(#fade)"/>
  <use id="outer-petals" xlink:href="#petals"/>
  <use id="inner-petals" xlink:href="#petals"
    transform="rotate(9) scale(0.33)"/>
  </g>

</svg>

Feu una nou arxiu CSS, style8.css. Copieu i enganxeu el contingut d'aquí, assegurant-se que us desplaceu per obtenir tota ella;

/*** 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 > .segment-fill {
  fill: plum;
  stroke: none;
  }

#outer-petals .segment:hover > .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 > .segment-fill {
  fill: darkseagreen;
  stroke: none;
  }

#inner-petals .segment:hover > .segment-edge {
  stroke: green;
  }

Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.

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í:

SVG demonstration

Notes sobre aquesta demostració:

  • El document SVG vincula la fulla d'estil de la forma habitual.
  • SVG té les seves pròpies propietats i valors CSS. Algunes d'elles són similars a les propietats CSS per a HTML.
Repte
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.

Veure la solució per el repte.

I ara què?

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ò: dades XML

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,