Circles

For Mozilla

Drawing or Scripting Tips

Alexander Fritze has added libart which is a library for high-performance 2D graphics to Mozilla.
Thanks to him this is completly new, thus no talk of earlier work here. ;-)

Now we are getting into new area. Alex has built a second browser and it is now possible to render circles.
Here is some basic information about circles.

Attribute definitions:

cx = "<coordinate>"

The x-axis coordinate of the center of the circle.
If the attribute is not specified, the effect is as if a value of "0" were specified.

cy = "<coordinate>"

The y-axis coordinate of the center of the circle.
If the attribute is not specified, the effect is as if a value of "0" were specified.

r = "<length>"

The radius of the circle.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.

Here is the script of the circle below.

Notice that the style attribute of fill-opacity:; has been left out here.
Well, not really this is also one of the new things, please see below.

Grid Scale 1 : 20px This is a SVG image. 0 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10

Grid Scale 1 : 20px This is a png of the SVG in hover mode. 0 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10

HOVER: run your cursor over the circle above. Na, now you can also see where the radi is at: X="100px" and Y="100px"; or better put the coordinate of cx and cy.
The Radius is equal to 80Px or r="80px" But of course you can see that in the png copy. Two important things here are that all styling can now be hovered and the introduction of <foreignObject></foreignObject>

These two items open up a lot of new possibilities in being more creative.