The purpose of this assignment is to practice creating SVG graphics using basic SVG shape and text elements.
1 . Add a file named svg.html to …/public_html/courses/csci240/ and a file named svg.css to …/public_html/courses/csci240/css/.
2 . Add content to your svg.html and svg.css files so that your web page looks like this page.
Helpful Hints
- If you set your body’s text-align property to center, then any child element that has their display property set to inline-block will be centered on the page.
- The dimensions of the top graphic is 400×400 and the dimensions of the bottom graphic is 410×410.
- The bar graph can be constructed using only path elements (within a svg element) with varying stroke-width values.
- The pie chart can be constructed by drawing out paths for each of the quarters and filling them with the appropriate color. To get an outline of a circle, you can draw a circle on top of the quarters with an appropriate stroke-width and stroke, and fill set to transparent.
- For the pie chart, you may have to make your svg slightly larger than your circle and use the translateX and translateY transform to center the circle in order to prevent the edges of the circle from being cropped.
© 2018 – 2021, Eric. All rights reserved.