From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- .../index.html | 50 ++++++++++ files/it/web/svg/index.html | 102 +++++++++++++++++++++ 2 files changed, 152 insertions(+) create mode 100644 files/it/web/svg/applying_svg_effects_to_html_content/index.html create mode 100644 files/it/web/svg/index.html (limited to 'files/it/web/svg') diff --git a/files/it/web/svg/applying_svg_effects_to_html_content/index.html b/files/it/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..b277a2fc86 --- /dev/null +++ b/files/it/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,50 @@ +--- +title: Introduzione a SVG dentro XHTML +slug: Introduzione_a_SVG_dentro_XHTML +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +

 

+

Panoramica

+

Questo articolo e l'esempio allegato mostrano come utilizzare SVG per inserire un'immagine di sfondo in un form. Mostra come JavaScript e i CSS possano essere utilizzati per manipolare l'immagine allo stesso modo in cui manipolano un normale elemento XHTML. Si noti che l'esempio funziona sui browser che supportano XHTML (non solo HTML) e l'integrazione di SVG.

+

Ecco il codice dell' esempio:

+
<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>XTech SVG Demo</title>
+  <style>
+    stop.begin { stop-color:yellow; }
+    stop.end { stop-color:green; }
+    body.invalid stop.end { stop-color:red; }
+    #err { display:none; }
+    body.invalid #err { display:inline; }
+  </style>
+  <script>
+    function signalError() {
+      document.getElementById('body').setAttribute("class", "invalid");
+    }
+  </script>
+</head>
+<body id="body"
+   style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+  <form>
+     <fieldset>
+       <legend>HTML Form</legend>
+       <p><label>Enter something:</label>
+          <input type="text"/>
+          <span id="err">Incorrect value!</span></p>
+       <p><button onclick="signalError();">Activate!</button></p>
+     </fieldset>
+  </form>
+  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+    viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+    <linearGradient id="gradient">
+      <stop class="begin" offset="0%"/>
+      <stop class="end" offset="100%"/>
+    </linearGradient>
+    <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+    <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+  </svg>
+</body>
+</html>
+

Spiegazione

+

Questa pagina è principalmente normale XHTML, CSS e JavaScript. L'unica parte interessante è l'elemento <svg>. Questo elemento e i suoi figli sono dichiarati nel namespace di SVG.

diff --git a/files/it/web/svg/index.html b/files/it/web/svg/index.html new file mode 100644 index 0000000000..4fcdc7a78d --- /dev/null +++ b/files/it/web/svg/index.html @@ -0,0 +1,102 @@ +--- +title: SVG +slug: SVG +tags: + - SVG + - Tutte_le_categorie +translation_of: Web/SVG +--- +
Iniziare ad usare SVG
+Questa esercitazione ti aiuterà ad iniziare ad usare SVG.
+ +
Scalable Vector Graphics (SVG) è un linguaggio XML di markup per la descrizione di grafica vettoriale a due dimensioni. Essenzialmente SVG sta alla grafica come XHTML sta al testo. + +

SVG è simile negli scopi alla tecnologia proprietaria Macromedia Flash di Adobe, ma quello che distingue SVG da Flash l'essere una raccomandazione W3C (vale a dire, uno standard a tutti gli effetti) e che è basato su XML anzichè essere un formato binario proprietario. E' esplicitamente progettato per lavorare con altri standard W3C quali CSS, DOM e SMIL.

+ +
+
+

Documentazione

+ +
+
Riferimento degli elementi SVG
+
Ottieni i dettagli di ogni elemento SVG.
+
Riferimento degli attributi SVG
+
Ottieni i dettagli di ogni attributo SVG.
+
Riferimento alle API nel DOM di SVG
+
Ottieni i dettagli sull'intra API nel DOM di SVG.
+
Migliora il contenuto HTML
+
SVG opera insieme ad HTML, CSS e JavaScript. Utilizza SVG per una comune pagna HTML o un'apllicazione web.
+
SVG in Mozilla
+
Note e informazioni su come SVG è implementato in Mozilla. + +
+
+ +

Vedi Tutto...

+ +

Comunità

+ +
    +
  • Vedi i forum di Mozilla... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}
    • +
+ +

Strumenti

+ + +
+ +
+ + + + +

Animazione e interazione

+ +

Come HTML, SVG ha un modello di documento a oggetti (DOM) ed events accessibili via JavaScript. Ciò permette agli sviluppatori di creare ricche immagini animate ed interattive.

+ + + +

Mappe, grafici, giochi ed sperimentazioni  3D

+ +

Se un piccolo SVG può fare tanta strada per migliorare il contenuto del web, ecco qualche esempio di uso intensivo di SVG.

+ + +
+
+ +
{{HTML5ArticleTOC}}SMIL.
+
+ +

-- cgit v1.2.3-54-g00ecf