Peregrine Rig Designer Synopsis

This project is essentially a custom color filler. It allows you to change the fill color of select sections of an SVG. I used this concept to create a custom rig designer for a parachute container manufacturer, Peregrine Manufacturing Inc. This project allows customers to design their custom container.

Code Example

The jQuery for the Peregrine Rig Designer is as follows:

$('.form-control').on('change', function() { var targets = $(this).data('target').split(" "); var counter = 0;

while(targets[counter]){ var target = targets[counter]; $(target).css({ fill: $(this).val()}); counter++; } });

The HTML for the Peregrine Rig Designer is as follows:

Left Ring Cover

White Black Green Grey Orange Pink Purple Red Royal Blue Teal Yellow

The jQuery watches the class ".form-control" for any changes made to it. In the HTML data-target, include the ID of each SVG path you'd like the color picker to change. Each color in the dropdown is assigned a HEX code value. When a color is selected from the drop down, the HEX code value is inserted into the SVG fill CSS and the fill color for the assigned SVG paths will change!

To Reuse This Code:

1. Attach the main.js file to your HTML file.
2. Include the SVG in your HTML. Assign each path an ID.
3. In your HTML, create a dropdown using and . Assign the class "form-control" to your tag. Assign the ID of the SVG path that you'd like to change with this dropdown.
4. Create an for each color you'd like to choose from. Assign a value of the HEX code for the color (i.e. value="#188CCC")