yatekii / svg Goto Github PK

The basic example should be extended to do something useful and demonstrate the capabilities of the renderer.

There should be global attributes to each shape.

Possibly it's best to implement them on a Trait, so they're accessible on each shape (Could use the UpdateElement).

The attributes are for now

fill
stroke

Somehow lyon rectangle and crircle tesselation both render an octagon.
Maybe something goes wrong after the tesselation and the tesselation actually works.
Needs more investigation!

Rect should not retesselate ever for the moment. It should only retesselate when it has a border and the size changes.

The rect should feature all the vital properties:
x
This attribute determines the x coordinate of the rect.
Value type: | ; Default value: 0; Animatable: yes
y
This attribute determines the y coordinate of the rect.
Value type: | ; Default value: 0; Animatable: yes
width
This attribute determines the width of the rect.
Value type: auto|| ; Default value: auto; Animatable: yes
height
This attribute determines the height of the rect.
Value type: auto|| ; Default value: auto; Animatable: yes
fill
This field should determine the rectangle color.
stroke
This field should determine the border stroke color.

Circle should not retesselate ever for the moment. It should only retesselate when it has a border and the size changes.

The circle should feature all the vital properties:
cx
This attribute defines the x-axis coordinate of the center of the element.
Value type: | ; Default value: 0; Animatable: yes
cy
This attribute defines the y-axis coordinate of the center of the element.
Value type: | ; Default value: 0; Animatable: yes
r
This attribute defines the radius of the element.
A value lower or equal to zero disables rendering of the circle.
Value type: ; Default value: 0; Animatable: yes
fill
This field should determine the rectangle color.
stroke
This field should determine the border stroke color.

Line should be an alias for the rectangle component, as it is really just a rectangle.

It should feature the following properties:

x1
Defines the x-axis coordinate of the line starting point.
Value type: || ; Default value: 0; Animatable: yes
x2
Defines the x-axis coordinate of the line ending point.
Value type: || ; Default value: 0; Animatable: yes
y1
Defines the y-axis coordinate of the line starting point.
Value type: || ; Default value: 0; Animatable: yes
y2
Defines the y-axis coordinate of the line ending point.
Value type: || ; Default value: 0; Animatable: yes
stroke-width
The width of the stroke.

We should have an example that demonstrates how the DOM can be altered during runtime.