Firefox Hacks [Electronic resources] نسخه متنی

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی

Hack 62. Make SVG Content

Create dynamically changing diagrams based on
vector graphics instead of static images.

Scalable Vector Graphics
(SVG)
is a W3C XML standard for defining two-dimensional images that are
composed of vector graphics. SVG is useful for maps, illustrations,
diagrams, and numerous other uses. SVG support is being added to
Firefox and Mozilla, but at the time of writing, that support is
still being finished. Many SVG features are complete, but there are
still rough edges and gaps. This hack explains how to do
something, in preparation for the day when
you'll be able to do anything.
To work with SVG, you need the right build of Firefox [Hack #92] and the right fonts in place
[Hack #30] . If
you're using an older operating system, this URL
describes other files that you might also need:

http://www.mozilla.org/projects/svg/buildl

6.6.1. Understand Versions and Features

Mozilla SVG 1.1 support is being built in a project separate from the
Firefox project. This means that Firefox does not always include the
latest SVG changes. Here are the levels of SVG support provided by
different versions of Firefox and Mozilla (as of the time of
writing):

The standard installations of Mozilla and Firefox
don't yet include SVG support.

Custom versions of Firefox 1.0 have SVG support at least as good as
Mozilla 1.6.

Custom versions of Firefox 1.1 will have SVG support at least equal
to that of Mozilla 1.8 (an estimate).

Mozilla 1.9 and Firefox 1.5 will have extensive cross-platform SVG
support (an estimate).

Standard installations of Mozilla 1.9, and perhaps Firefox 1.5,
releases will include SVG support (an estimate).

The following URL describes SVG project progress in the
latest trunk builds, and therefore goes beyond the SVG
support in custom Firefox 1.0 versions:

http://www.mozilla.org/projects/svg/statusl

Basic SVG features such as <rect> have been
supported in custom builds of Firefox for a long time. Use the basic
features without fear, and expect them in all versions of Mozilla
that support SVG.

For such versions, one major restriction on use remains. SVG content
and other XML content cannot be deeply intermixed.
SVG content and other XML content, such as XHTML, can be present in
the same document, but if <svg> tags are
present, only SVG tags can appear inside them. This means that SVG
diagrams can be inset in other content, but SVG shapes cannot be
freely mixed with hypertext. Since SVG has its own
<text> tag anyway, this is less of a problem
that it might seem. Eventually, this problem will go away. In the
interim, the alternative to all these "under
construction" matters is to install the Adobe SVG
Viewer Plugin.

6.6.2. Make an Interactive Diagram

Once you add JavaScript and
SVG styles resembling CSS to an SVG
document, the world becomes your oyster. Figure 6-4
shows the end result.

Figure 6-4. SVG Firefox build showing user-rotated content

Here's the XML for this page (note the emphasized
text where the hooks are located):

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg">
<head>
</head>
<body onload="init( )">
<h1>SVG Example</h1>
<p>Click on the rectangle to rotate it.</p>
<svg:svg width="300" height="300">
<svg:g id="shim" transform="rotate(-15,60,100)">
<svg:rect class="box" x="40" y="50" width="100" height="75" rx="5"/>
<svg:text x="50" y="80">SVG text</svg:text>
</svg:g>
</svg:svg>
</body>
</html>

At the moment, it's safer to use inline
<style> tags than to include external
stylesheets. Here's the style and scripting content:

<style>
rect       {stroke:green; stroke-width:5; fill:green; }
rect:hover {stroke:red;}
</style>
<script>
var shim, angle;
function init( ) {
shim = document.getElementById("shim")
shim.addEventListener("click",twist,false);
angle = -15;
}
function twist( ) {
angle -= 30;
var att = "rotate(" + angle + ",60,100)";
shim.setAttribute("transform",att);
}
</script>

Here's a brief summary of the code. A
shim is a thin piece of anything;
we've just used it as a name for the rotating
rectangle; the <rect> shape is certainly
thin in the z-direction! The init( )
function installs an event listener as though
onclick="twist()" had been stated. It also
initializes two variables. When the user clicks, the
transform attribute of the
<svg:g> tag is updated by the script,
causing the content to be modified. Firefox reflow/redraw
automatically brings the display up to date. In many similar ways,
content can be added, moved, or deleted in response to user
actions.

Firefox Hacks [Electronic resources] نسخه متنی

فارسی

کردی

العربیه

اردو

Türkçe

Русский

English

Français

کانال فیلم من

تبیان من

فایلهای من

کتابخانه من

پنل پیامکی

وبلاگ من

اینجــــا یک کتابخانه دیجیتالی است

با بیش از 100000 منبع الکترونیکی رایگان به زبان فارسی ، عربی و انگلیسی