From 3601b7bb982e958927e069715cfe07430bce7196 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 12:59:34 -0400 Subject: delete pages that were never translated from en-US (es, part 1) (#1547) --- .../tutorial/svg_in_html_introduction/index.html | 95 ---------------------- 1 file changed, 95 deletions(-) delete mode 100644 files/es/web/svg/tutorial/svg_in_html_introduction/index.html (limited to 'files/es/web/svg') diff --git a/files/es/web/svg/tutorial/svg_in_html_introduction/index.html b/files/es/web/svg/tutorial/svg_in_html_introduction/index.html deleted file mode 100644 index ff4bede205..0000000000 --- a/files/es/web/svg/tutorial/svg_in_html_introduction/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: SVG In HTML Introduction -slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction -translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction ---- -

Overview

- -

This article and its associated example shows how to use inline SVG to provide a background picture for a form. It shows how JavaScript and CSS can be used to manipulate the picture in the same way you would script regular XHTML. Note that the example will only work in browsers that support XHTML (not HTML) and SVG integration.

- -

Source

- -

Here is the source to the example:

- -
<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><input type="button" value="Activate!" onclick="signalError();" /></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>
-
- -

Discussion

- -

The page is mainly regular XHTML, CSS and JavaScript. The only interesting part is the <svg> element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS. When the user enters something incorrect into the form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red. (Another style rule makes an error message appear.)

- -

This approach has the following points in its favor:

- - - -
-

To add a linked image with DOM methods to an embedded SVG element, one has to use setAttributeNS to set href. Like in the following example:

- -
 var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
-img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
-
-
-
-
- -

Details

- -

The viewBox attribute establishes a logical coordinate system which the SVG picture's coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.

- -

The preserveAspectRatio attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.

- -

The style attribute pins the SVG element to the background of the form.

- - - - -- cgit v1.2.3-54-g00ecf