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 ++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 files/it/web/svg/applying_svg_effects_to_html_content/index.html (limited to 'files/it/web/svg/applying_svg_effects_to_html_content') 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.

-- cgit v1.2.3-54-g00ecf