Using Polygons

For creating a new SVG element, see svg.html.

Add a Polygon

Select an SVG element, click  to add a new polygon to the SVG element.

A new polygon appears:

You may move it by clicking the move buttons.

You may change its border width and color:

You may change its fill color:

Change Vertices

Corner points of a polygon are under "Points". You may change them:

You may add a new corner point by filling the last empty point. On adding a new corner point another empty point appears for adding another new point.

Visually Adjusting Vertices

You may specify a corner point by clicking on a desired location. Click  to start adjusting a corner point. The button appears red , indicating that visual adjusting is started:

Click a point on the web page, the point becomes the corresponding corner point:

When you are satisfied with the point, click  to stop the operation. The button becomes  again.

Make Hyper Link

Set href and target properties to setup a hyper link on a shape:

By the settings of the above sample, clicking the shape will open a new web browser window for http://www.ibm.com. 

Creating Highlight Effects

When mouse pointer is moved into a shape, you may change its fill color and opacity, and also make some web page elements visible. When mouse pointer is moved out of a shape, you may change its fill color and opacity to other values, those web elements made visible when mouse pointer moving into the shape will be made invisible. In this way you may create interactive web page interface.

Opacity and Fill Color

Properties mouseoveropacity and mouseoverfillcolor specify opacity and fill color to be used by the shape when mouse pointer moves into the shape. Properties mouseoutopacity and mouseoutfillcolor specify opacity and fill color to be used by the shape when mouse pointer moves out of the shape.

Show/Hide Elements

Elements to be shown and hidden must have their "id" property set to non-empty values. For demonstration purpose, we create another SVG element and set its "id" to svg2, we also create an image element and set its "id" to img1.

To use a shape to show and hide elements, we may use a comma-delimited string to list those elements' "id" values in the shape's property "showelements". We may also use a dropdown for property "showelements" to pick the "id" values we want to use. Selected "id" value from the dropdown will be appended to "showelements" if it does not already exist in it.

To show the highlighting effects, publish the web page and show it by a web browser. On loading the web page, the page appears as if shape is in mouse out. In our above sample, elements svg2 and img1 are hidden, and the polygon's opacity is 20% and its fill color is #CDBFDB:

Now, move mouse pointer into the polygon, the fill color and opacity of the polygon change, and svg2 and img1 appear: