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)

The 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

The upper-left corner of the canvas is the position (x=0, y=0), where
x is the horizontal dimension (positive to the right), and
y is the vertical dimension (positive going down).
The notation for a point is (x,y), such as (0,0).

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.

<style type="text/css">
svg {
	font-weight:bold;
	font-size:16px;
	border:solid 1px #000000;
	}
</style>

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.

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]

<svg id="color12-01" viewBox="0 0 320 240" width="320" height="240" class="rmsSvg">
</svg>

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.

Upper left is at (0,0).
Upper right is at (320,0).
Lower left is at (0,240).
Lower right is at (320,240).

Here is the SVG code [#2]

<svg id="color12-02" viewBox="0 0 320 240" width="320" height="240" class="rmsSvg">
<text x="4" y="16">(0,0)</text>
<text x="250" y="16">(320,0)</text>
<text x="4" y="232">(0,240)</text>
<text x="230" y="232">(320,240)</text>
</svg>

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.

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]

<svg id="color12-03" viewBox="0 0 320 240" width="320" height="240" class="rmsSvg">
<rect id="rect1" width="320" height="240" fill="#CCFFCC"></rect>
<text x="4" y="16">(0,0)</text>
<text x="250" y="16">(320,0)</text>
<text x="4" y="232">(0,240)</text>
<text x="230" y="232">(320,240)</text>
</svg>

Here is how the SVG code appears.

The following SVG code draws a polygon.

Here is the SVG code [#4]

<svg id="color12-04" viewBox="0 0 320 240" width="320" height="240" class="rmsSvg">
<rect id="rect1" width="320" height="240" fill="#CCFFCC"></rect>
<text x="4" y="16">(0,0)</text>
<text x="250" y="16">(320,0)</text>
<text x="4" y="232">(0,240)</text>
<text x="230" y="232">(320,240)</text>
<polygon id="poly1" points="80,60 280,100 150,180" style="fill:#FFFF00;stroke:#0000FF;stroke-width:4" />
</svg>

Here is how the SVG code appears.

The id, used to reference an SVG element from JavaScript, is poly1
The rect creates a rectangle used to fill the area of the canvas.
The fill of the polygon is the color #FFFF00.
The polygon creates a polygon on the canvas - in this case, a triangle.
The stroke of the polygon is the color #0000FF.
The stroke-width of the polygon is the color 4.

The polygon, called poly1 is described by the points 80,60 280,100 150,180 which are interpreted as follows.

Start at the first point at (80,60).
Move to the second point at (280,100).
Move to the third point at (150,180).

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.

Here is the SVG code [#5]

<svg id="color12-05" viewBox="0 0 320 240" width="320" height="240" class="rmsSvg">
<text x="4" y="16">(0,0)</text>
<text x="250" y="16">(320,0)</text>
<text x="4" y="232">(0,240)</text>
<text x="230" y="232">(320,240)</text>
<polygon id="poly2" points="80,60 280,100 150,180" style="fill:#FFFF00;stroke:#0000FF;stroke-width:4" />
<text x="20" y="50">#1 at (80,60)</text>
<text x="170" y="70">#2 at (280,100)</text>
<text x="80" y="200">#3 at (150,180)</text>
</svg>

Here is how the SVG code appears.

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

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

<button style="background-color:#FF6666">Red</button>
<button style="background-color:#66FF66">Green</button>
<button style="background-color:#6666FF">Blue</button>
<button style="background-color:#66FFFF">Cyan</button>
<button style="background-color:#FF66FF">Magenta</button>
<button style="background-color:#FFFF66">Yellow</button>

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).

<button style="background-color:#FF6666" onclick="colorSet1('poly2','#FF6666');">Red</button>
<button style="background-color:#66FF66" onclick="colorSet1('poly2','#66FF66');">Green</button>
<button style="background-color:#6666FF" onclick="colorSet1('poly2','#6666FF');">Blue</button>
<button style="background-color:#66FFFF" onclick="colorSet1('poly2','#66FFFF');">Cyan</button>
<button style="background-color:#FF66FF" onclick="colorSet1('poly2','#FF66FF');">Magenta</button>
<button style="background-color:#FFFF66" onclick="colorSet1('poly2','#FFFF66');">Yellow</button>

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.

function colorSet1(id1, color1) {
	var element1 = document.getElementById(id1);
	element1.style.fill = color1;
	}

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.

Here is a very minimal HTML text to put the above concepts together.

<html>
<head>
</head>
<body>
<br/>
</body>
</html>

The above HTML is saved at the following path on the web server on which this page appears.

/W/MYCODE1.HTM/color-12.htm

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.

<iframe
	src="/W/MYCODE1.HTM/color-12.htm"
	height="300"
	width="400"
	title="SVG canvas,polygon, buttons and JavaScript"
	>
</iframe>

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.