Adobe Illustrator & SVG

◄Page 11►

Tap Ankle Bones

Tap Bone Information

Introduction

This example displays SVG paths over a background image. The background image's an enhanced X-ray of an ankle. Tap within SVG paths, that render over the ankle image, to read the names of specific ankle bones.

Read the JavaScript and simple CSS rule-set. Learn a little about interaction between SVG and JavaScript. Place paths in separate Adobe Illustrator layers. Name each layer. Later access layers by ID with JavaScript.

This simple example applies a fixed sized background image. A better use of vector graphics allows scaling. The next example scales up or down depending on your display screen, width and orientation.

<g 
id="foot"
>

<
image 
overflow="visible" 
width="300" 
height="150" 
xlink:href="assets/ankle_side300.png" 
>
	
</image>
	
</g>

div.ankle{
width:300px; 
height:150px;
margin:0px auto 0px auto;
text-align:center;
}

SVG Markup

While creating the SVG, fill each polygon with color. Otherwise click events only respond to the polygon path itself, not the area inside the polygon.

However to display the background image, assign fill opacity a value of 0.0 or transparent, if you want the background image visible. Assign stroke opacity a value of 0.0 if you don't want to display outlines, as follows.

fill-opacity="0.0" 
stroke-opacity="0.0"

Name Layers

Place each enclosed path on a separate, named layer. When you export the file, then each section's id receives the name you gave the layer.

See the SVG

See the original SVG ankle, before fill opacity was reduced for display. You can also open the SVG file with a text editor, or select view page source from your browser to see the markup.

JavaScript

Create a new Ankle() object when the Web page loads.

Named Layers

In Adobe Illustrator each enclosed path was placed on a separate, named layer. Now that you've exported the file, each section's id receives the name you gave the layer.

The method setListeners() obtains each layer by ID, then assigns JavaScript click events to each path.

Associate Array Names with Elements

The following JavaScript associates array elements with each bone in the ankle. An index accesses one entry in an array of names. Tap an element. A string from the array displays on the Web page.

var Ankle = function(){
this.aryNames = [
"Tibia",
"Fibula",
"Metatarsals",
"Navicular",
"Medial Cuneiform",
"Phalanges",
"Talus",
"Calcaneus"
];
this.eDebug = null;
this.getElements();
this.setListeners();
};

Ankle.prototype = {
		
getElements:function(){
this.eDebug = document.getElementById('eDebug');
},

/***
Obtain SVG elements by ID.
Assign click events to each
element.
*/
setListeners:function(){
let l = this.aryNames.length;
let i = 0;

let fibula = document.getElementById('fibula');
let tibia = document.getElementById('tibia');
let tibia2 = document.getElementById('tibia2');
let metatarsals = document.getElementById('metatarsals');
let navicular = document.getElementById('navicular');
let medial_cuneiform = document.getElementById('medial_cuneiform');
let phalanges = document.getElementById('phalanges');
let talus = document.getElementById('talus');
let calcaneus = document.getElementById('calcaneus');

//Assign this object.
//Event listener must access Ankle object.
tibia.ankle = this;
tibia.num   =  0;
tibia.addEventListener(
"click",
this.tapElement,
false
);

let aryElements =[
tibia2,
fibula,
metatarsals,
navicular,
medial_cuneiform,
phalanges,
talus,
calcaneus
];

for (i = 0; i < l; i++){
 let obj = aryElements[i];
 obj.num = i;
 obj.ankle = this;
 obj.addEventListener(
  "click",
  this.tapElement,
  false
 );
}

},

tapElement:function(ev){
let obj   = ev.currentTarget;
let ankle = obj.ankle;
let num   = obj.num;
let eDebug = ankle.eDebug;
let aryNames = ankle.aryNames;
eDebug.innerHTML = "You tapped the "+aryNames[num]+".";
},

};

Summary

This example displayed SVG paths over a background image. The background image's an enhanced X-ray of an ankle. Users tap within SVG paths, that render over the ankle image, to read the names of specific ankle bones.

You read the JavaScript and simple CSS rule-set. You learned a little about interaction between SVG and JavaScript. Place paths in separate Adobe Illustrator layers. Name each layer. Later access layers by ID with JavaScript.

This simple example applies a fixed sized background image. A better use of vector graphics allows scaling. The next example scales up or down depending on your display screen, width and orientation.

SVG Illustration

Create a range of Scaleable Vector Graphics (SVG) with Adobe Illustrator, HTML or plain text files. The SVG format proves ideal for lightweight, clean, crisp images that never lose their luster.

SVG images export as text files allowing designers and artists to modify properties, within the file, such as fill, background color, gradients and scaling.

Apply JavaScript and CSS3 to modify properties interactively or automatically. Animate, or respond to user interaction, to change a range of properties including color, opacity, location, scale, gradation and more.

Tags