Send Close Add comments: (status displays here)
Got it!  This site "robinsnyder.com" uses cookies. You consent to this by clicking on "Got it!" or by continuing to use this website.  Note: This appears on each machine/browser from which this site is accessed.
SVG canvas,polygon, buttons and JavaScript
by RS  admin@robinsnyder.com : 1024 x 640


1. SVG canvas,polygon, buttons and JavaScript
I have been experimenting with SVG as used in, say D3, for visualization graphics for data science applications.

This SVG has not yet been integrated into the system used for scaling for various devices screens.
SVG (Scalable Vector Graphics) uses a canvas in two dimensions. To use that canvas, you should be familiar with the Cartesian coordinate system, named for Rene Descartes in the 1600's.

For more information on the Cartesian coordinate system, see https://en.wikipedia.org/wiki/Cartesian_coordinate_system. (as of 2021-02-09)

2. The canvas
Graphics coordinate systemThe canvas is initially blank. Dimensions are, by default, in pixels (i.e., dots on the screen).

The maximum values in each direction depend on the size of the window. Graphics coordinate system

3. CSS
SVG can be explicitly styled, but, for many documents, it is easier to use the same default style for all SVG elements using CSS. Here is the CSS used for the SVG styles in this document.

This CSS sets the font style and puts a border around the SVG so that, for these examples, the border of the SVG is clearly depicted.

4. SVG canvas
The following SVG code has a canvas with a width of 320 and a height of 240.

In order to see the border of the canvas, the SVG outer definition will include a CSS style of border:solid 1px #00000 or similar (see above).

Here is the SVG code [#1]

Here is how the SVG code appears.

This is a blank canvas. Let us add some text at each corner to represent the bounds of the canvas. Here is the SVG code [#2]

These text labels have been exactly placed. Other ways (e.g., using CSS, JavaScript, etc.) are left for later. Here is how the SVG code appears.

5. Add a background color
If the canvas is to have a color, a rectangle can be used of the same size as the canvas to provide a color such as "#CCFFCC".

Here is the SVG code [#3]

Here is how the SVG code appears.

6. Polygon
The following SVG code draws a polygon.

Here is the SVG code [#4]

Here is how the SVG code appears.
The polygon, called poly1 is described by the points 80,60 280,100 150,180 which are interpreted as follows. Since this is a polygon, the polygon is completed and any requested fill and/or stroke color are applied. One can remove the fill or stroke by not including them. Another way to remove the stroke is to set the stroke-width to 0.

7. Point labels
Here is the SVG code [#5]

Here is how the SVG code appears.

8. HTML
Here are some buttons. These buttons do not do anything when clicked.

Here is the HTML to display the buttons (with no click actions)

Here are some buttons. These buttons change the color of the SVG when clicked.

Here is the HTML to display the buttons (with click actions).


9. JavaScript
Here is the JavaScript to connect the HTML (Hypertext Markup Language) onclick action to the SVG with identification attributes as used for the above buttons.

Note: There are many ways to abstract this code to make it more concise, more machine efficient, etc., but the objective here is to show a simple example with minimal abstraction.

10. Putting it all together
Here is a very minimal HTML text to put the above concepts together.

The above HTML is saved at the following path on the web server on which this page appears.
/W/MYCODE1.HTM/color-12.htm


11. IFRAME
An IFRAME is an HTML construct that allows an HTML page to be embedded in another page.
Here is the HTML for the above IFRAME, spaced out to make it more readable.

Note that getting the height and width to work on all devices with varying screen sizes and orientations is not always easy. A discussion of this is omitted and left as a future topic.

12. Debugging
If you make any syntax errors in the SVG, then that part, and anything after it in the SVG, will often disappear from the displayed drawing.

13. End of page

by RS  admin@robinsnyder.com : 1024 x 640