After seeing the programs can be in C to create SVG files (programs that in principle could also be written in PHP and any language), I will explain a hello world according to blog another approach: interactive SVG files.
SVG format allows for two types of interactivity, which explained a little above would be these two:
- By
- scripts (scripts) in this case put scripts in the SVG file (or in a separate file, which then link to the SVG file.) These scripts allow you to interact with elements of the SVG file. For example, you can get when you press a button to change the color of an element or position, or change the text of a text element. This system also allows adding new elements to the SVG file that were not originally defined (for example, every time you click on a square a circle appears on screen again in a different position). Examples:
svgDocument.getElementById ( 'helloworld' ). FirstChild.data = "Hello world!" ; svgDocument.getElementById ( 'panel_epicicloides' ). SetAttributeNS (null, "visibility" , "visible" ) svgDocument.getElementById ( 'laser' ). SetAttributeNS (null, "points" points )
The first example changes the wording (replacing its contents Hello World!). The second brings up a group (called panel_epicicloides), this group contains several figures that act as a dialogue. What it does is change its visibility property (visibility) enabled. The last case, adjust the path of a polyline (called laser) and gives him the points put before the text variable points. It changes the ownership points. By
- SMIL Animation: in this case there are hyphens, but SVG tags which indicates the actions. These tags do not have as much power as the scripts (scripts) but make it much CreAcción some interactive effects, such as changing color of a component while passing the mouse over them. One drawback of this system is that Firefox 3 is not adapted (SVG file is shown without these effects), but I think that they do not include this improvement.
There are two types of labels: set and animate. September lets you apply an attribute directly, without an intermediate transition (eg, a red rectangle, it immediately turns green). Instead animate a transition can produce lasting, and allows for several intermediate steps, interpolation of intermediate values. For example, you can have the rectangle red before, but to be going green for the color purple, blue and finally green colors during a transition from three seconds long. In both cases, you must specify an event that initiates the change, an attribute and the value for the attribute.
Some examples (click to enlarge):
In the first two lines are used set. Tickets are alternatives, the first is activated when the mouse is within the g_hola_mundo group and the second when it exits. The attribute that change is the filling (fill) and give in to the right color. Its operation allows a color change when you move your mouse over g_hola_mundo group (which would come to act as a button).
In the third line is an animation where the color is changed through a transition of various colors that lasts a second.
would be something like: 
Operation is simple: first you see only the button click. Pressing the button displays Hello World!. Meanwhile, the button takes a greenish color when you mouse over it (in Firefox 3 is not appreciated latter). In can highlight several details:
- The head of SVG hello world is different from the previous blog entry, since that did not work in animation. This new header copy of the first link of the sources (apike.ca), and also copied the first function of the script. If you are programming the SVG file seems silly and does nothing, can be two things, you're wrong in the script (a misplaced comma can stop execution), or is poorly directed header.
- One group (called g_hola_mundo), which includes a rectangle (r_hola_mundo) and text (click). This group pointed out in green and is assigned that when you click the mouse on is called the "hello world" script. This function is mapped on the group and not on the box, because if the rectangle is assigned only work in the area is the rectangle, that is, if you just click on the letters of the text does not do anything. However, if the function is mapped on the entire group (text and rectangle), works around the area.
Let's say this group is for all practical purposes ... a button as any dialog.
- A script with a function (hello_world) that is activated by clicking in the "g_hola_mundo." This function modifies the text item text "helloworld" (the last entry in the SVG file), replacing the space that was originally by the Hello world!
- Two labels to animate the background color of the rectangle forming the button to activate the hello world. The first assigns a greenish background color when the mouse passes over the group. The second assigns the original color when the mouse leaves the area. The event is to put the mouse in the group, because if it were made on the basis of the rectangle would have only one problem: when you mouse over the letters of the text is interpreted in the same way the mouse to draw the rectangle, and fail .
- The rectangle appears on two labels instead of one. This is done when you have to add properties to animate the rectangle.
The first line (shaded in yellow) would be to define a rectangle that is not going to be animated or anything. It is a single label and is to indicate the end bar (/) that is placed on the closing tags.
The other lines (shaded in green) also define a rectangle, but in between you can enter tags for defining animation. It is very important to note that the slash (/) only appears in the second label, the end and never the first.
The remaining elements (circles, lines, polylines ...) work similarly. Usually defined using a single label, but if you want to add animation, you use two tags to define the animations between.
Sources:
- http://apike.ca/prog_svg_smil.html
- http://rendergraf.wordpress.com/2008/09/12/animacion-svg-% E2% 80% 93-comes -the-alternative-to-flash-but-with-a-standard-free /
0 comments:
Post a Comment