SVG Maker Project - Flower to Color

This project makes a flower in SVG, which can be colored. It uses javascript to select an SVG element or group of SVG elements when clicked on and then opens a color selection panel. Clicking on a color in the color selection panel changes the color of the original element or group of elements to the color selected. The project starts with the code for the flower, then the code for the color selection panel, and finally the javascript to color the flower.

The image to the left is the flower to color. The code to create the flower is shown below. It consists of an outer grouping that sets the stroke-width to 4 pixels using the class "sw4" and contains 6 groupings of SVG elements that make up the flower colors. Each of the elements with id="g6" to id="g1" have a style attribute that sets the fill color to a color defined by a hexadecimal or hex number. Hex numbers are preceded by a # sign. A 6 digit hex number sets the mixture of Red, Green, and Blue colors. Each 2 digits of hex select from 256 shades of the color.

The "g6" grouping consists of 10 ellipses, all with the same center (400,235), x-radius (rx="65"), and y-radius (ry="215"). Copies of the first ellipse have a rotate transformation applied every 360/10 = 36 degrees about the center of the image (400,400).

Similarly the "g5" grouping consists of 10 ellipses, all with the same center (400,320), x-radius (rx="80"), and y-radius (ry="180"). Copies of the first ellipse have a rotate transformation applied every 360/10 = 36 degrees about the center of the image (400,400). The "g5" grouping is place on top of the "g6" grouping, exposing only part of it.

Next a <circle> element is placed in the center of the flower. It is drawn on top and hides parts of both the "g5" and "g6" groupings. It is given the id="g4" since it will be selectable for coloring.

The "g3" grouping consists of 12 circles, all with the same center (400,225) and same radius (r="10"). Copies of the first circle have a rotate transformation applied every 360/12 = 30 degrees about the center of the image (400,400). This grouping has a class attribute that sets the stroke to none, otherwise the stroke would be inherited from the outer grouping. Since these circles are small and colorable, the stroke is not desired.

The "g2" grouping consists of 5 ellipses, all with the same center (400,325), x-radius (rx="35"), and y-radius (ry="75"). Each ellipse has a rotate transformation applied every 360/5 = 72 degrees about the center of the image (400,400). Note that the first 2 ellipses are rotated 36 and -36 degrees. They are 72 degrees apart. There is no ellipse at 0 degrees.

Lastly, a <circle> element is placed in the center of the flower. It is drawn on top and hides everything underneath. It is given the id="g1" since it will be selectable for coloring.

The code is complete and can be copied and pasted into an editor, then saved and opened in a browser. Try moving the groupings around to see how the placement of the groupings determines the overall appearance.

Code for the Flower

The Color Selection Panel

The image to the left is the color panel to be added to the flower to allow selecting from a set of colors when a grouping of SVG elements is clicked on.

The code consists of an outer grouping with id="colors". The grouping contains a <rect> element that has a width and height of 750 pixels. It is the background of the color selection panel. Since our image is 800 pixels square, 800-750 = 50 pixels remain for margins. Equal margins on both sides are 25 pixels. The "colors" grouping has a translate transformation to offset the elements by (25,25) which keeps the panel centered on the image.

The "colors" grouping also has a class attribute to set the stroke to black, and a style attribute to set the display to initial, which displays the image. This style attribute will be set to display:none to hide the panel in the final code listing. The style attribute will be changed with javascript to display the panel when a flower element is clicked on.

A <text> element is added to display the "Select Color" message on the panel. It is styled by the class "sc" and is placed in the upper left of the panel.

There are 49 colors to select from, 7 rows of 7 colors. 49 <rect> elements are filled with the color choices, each is given an id from "c1" to "c49". The colors are set via the style attribute where the fill property is set to a hexidecimal number representation for the color. A free eBook, I Love to Color, Play, and Learn, can provide a good understanding of the Red, Green, Blue color representations. It is also available in the Apple iBookstore.

Each row of 7 colors is grouped to together. The rectangles have a width of 85 pixels and a height of 75 pixels. in each row, the rectangles are placed 100 pixels apart, leaving a 15 pixel space between. The last rectangle starts at x="600" with a width of 85 pixels, for a total length of 685 pixels. Our background is 750 pixels, so to center the rectangles, a margin of 750-685 = 65 is divided by 2 for equal margins of 65/2 = 32.5. That is why grouping of rectangles has a translate transformation with the x value = 32.5.

The y value of the translate transformation is determined similarly. Each row is 100 pixels below the one above. The last grouping would start at 600 pixels and end at 600 plus the height of the color rectangle which is 75, so the total length is 675 pixels. To center the rectangles, a margin of 750-675 = 75 is divided by 2 for equal margins of 75/2 = 37.5. That is why the first grouping of rectangles has a translate transformation with the y value = 37.5. Each subsequent grouping adds 100 to the y value.

Adding the Javascript

The script below will allow the flower to be colored when clicking on one of the 6 elements with id="g1" to "g6" defined in the flower, then colors the element having that id with the color from the color selection panel that is clicked on. To do that, several event listeners need to be added to the document objects that can be clicked on.

First a variable named event is set to "click", the event name to respond to. Another global variable - to be available in all the functions - called petalgroup is declared. It will hold the group that was clicked on. Then an event listener is added so that when the images is loaded, the init() function is called.

In the init() function, the required event listeners are added. An event listener is added to an object by first getting the element by its id. That object is stored in the variable, node. If the node variable is not null (i.e. it was found), then an event listener is added to the object. The groups with ids = "g6" to "g1" have an event listener added that, when clicked on, will call the PaintPetals() function, passing the group number to the function.

A for loop (for variable i=1 an event listener to each passing an event object (e).

When a group ("g1" to was clicked on. The function Then the function displays attribute to "display:initial". loop while i<50, incrementing i, i.e. i++, each time through the loop.) is used to add of the color rectangles with ids of "c1" to "c49" so that when clicked on, they call the color function 0.9em;width:95%;margin:10px auto;background-color:#ffffcc;padding:10px;white-space:nowrap;overflow:scroll;text-overflow:clip;"> <script type="application/x-javascript"><![CDATA[

var event = "click";
var petalgroup;

window.addEventListener("load", init);

function init()
{
var node = document.getElementById("g6");
if(node!=null) node.addEventListener(event,function(e) { PaintPetals(6); });
node = document.getElementById("g5");
if(node!=null) node.addEventListener(event,function(e) { PaintPetals(5); });
node = document.getElementById("g4");
if(node!=null) node.addEventListener(event,function(e) { PaintPetals(4); });
node = document.getElementById("g3");
if(node!=null) node.addEventListener(event,function(e) { PaintPetals(3); });
node = document.getElementById("g2");
if(node!=null) node.addEventListener(event,function(e) {; PaintPetals(2); });
node = document.getElementById("g1");
if(node!=null) node.addEventListener(event,function(e) { PaintPetals(1); });

for(var i=1;i<50;i++)
{
node = document.getElementById("c"+i);
if(node!=null) node.addEventListener(event,function(e) { color(e); });
}
}

function PaintPetals(group)
{
var node;
petalgroup = group;
node = document.getElementById("colors");
if(node!=null) node.setAttribute("style","display:initial;");
}

function color(e)
{
var node = e.target;
var attr = node.getAttribute("style");

node = document.getElementById("g"+petalgroup);
if(node!=null) node.setAttribute("style",attr);

node = document.getElementById("colors");
if(node!=null) node.setAttribute("style","display:none;");
}
]]>
</script>
"g6") is clicked on, the PaintPetals() function is called passing the number of the group that sets the global variable, petalgroup, to the group number that was passed to the function. the color selection panel by getting the element with id="colors" and setting its style The function then returns.

When a color selection panel rectangle with an id of "c1" to "c49" is clicked on, the color() function is called passing an event object. The target property of the event object is used to get the object (element) that was clicked on. Using that object, the code first gets its style attribute and stores it in variable, attr. The attr variable then contains fill:color value of the rectangle that was clicked on. Next, using the global variable, petalgroup, it gets the element that was clicked on that diplayed the color selection panel. It then sets the style attribute of that element to the attr variable, which is the color of the rectangle that was clicked on - coloring the flower element. Lastly, the code hides the color selection panel by setting the group "colors" style attribute to display:none.

Entire code for the Flower to Color

Copy and paste the code below into a text editor and save, then open in a browser. Change the colors in the color selection panel to different colors.