SVG: Animate a robotic finger

The representation of a robot finger responds to user commands.

Explanations...

1) The image is loaded in memory

<div style="display:none">
  <iframe id="ifinger" width="600" height="400" src="code/finger.svg"></iframe>
</div>

To be able to bend the finger tip, or both phalanges, the two last phalanges are grouped in a <g> tag:

<g id="finger" stroke-width="2" stroke="#000000" fill="url(#metal)">
  <rect id="three" x="340" y="2" width="160" height="100" />
  <g id="onetwo"> 
    <rect id="two" x="180" y="2" width="140" height="100" />
      <g id="one">  
        <path id="svg_2" d="m160,102c-300,-100 20,-100 0,-100"/>   
        <line y2="0" x2="160" y1="100" x1="160"  />
      </g>
    <circle cx="170" cy="50" r="30" />
  </g>
  <circle cx="330" cy="50" r="30" />  
</g>

The first group corresponds to the whole finger. This <g> tag is referred to move the whole finger.

We would love to retain the definition of gradients (which is outside the group) in the animation, but to do that we should reference the entire svg picture: it works with Firefox, but not on Chrome or IE. We will therefore use only a linear pattern.

The second group with ID "onetwo" includes the last two phalanges.

This second group includes another group with ID "one" representing the fingertip.

2) We define a drawing surface

<svg id="anim" width="600" height="400"></svg>

2) The finger is put on this surface

The transform attribute with the translate property positions it at x=50 and y=50.

var ifinger;
var one;
var two;
var three;

function start()
{
  var anim = document.getElementById("anim");
  var ifr = document.getElementById("ifinger");
  var graphics = ifr.contentWindow || ifr.contentDocument;
  ifinger = graphics.document.getElementById("finger");
  ifinger.setAttribute("transform", "translate(50, 50)");
  anim.appendChild(ifinger);
  one = document.getElementById("one");
  two = document.getElementById("onetwo");
}

window.onload=start;

4) We define all the possible actions in JavaScript

There are :

function slant() {
  ifinger.setAttribute("transform", "translate(50, 50) rotate(-40,500,0)");
}

function unslant() {
  ifinger.setAttribute("transform", "translate(50, 50)");
}

function slantOne() {
  one.setAttribute("transform", "rotate(-40, 160, 0)")
}

function slantTwo() {
  two.setAttribute("transform", " rotate(-40, 320, 0)")
}

function restart() {
  ifinger.setAttribute("transform", "translate(50, 50)");
  one.setAttribute("transform", "rotate(0, 0, 0)");	
  two.setAttribute("transform", "rotate(0, 0, 0)");	
}

These functions are associated with the interface buttons.

They are identical to those which would be used in an electronic assembly. Additional parameters can be added as the degree of pressure, speed. We could also represent them by developing this code.

To download the source code and the SVG file, click below:

The finger.html file is generated from the finger.sol file with the command: solj -w finger. But we do not use the Scriptol language in this demo.

The next step is to gather more fingers to form a whole hand and then animate them, and to accomplish a task with the hand, like writing for example.