SVG: Robotic finger animation

The robot finger image responds to user commands.

Explanations...

1) Load the image into memory

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

To bend either the tip of the finger or the last two phalanges, the phalanges combine into a lighthouse <g>:

<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 used to move the entire finger.

I would like to keep the definition of gradients in the animation (which is done outside the group), but for this you need to refer to the entire svg image: it works with Firefox, but not with Chrome or IE. Therefore, we will be content with a linear pattern .

The second group of ID "onetwo" combines the last two phalanges.

This second group includes another group, ID "one," which represents the fingertip.

2) The drawing surface is defined

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

2) We put our finger in the surface

The transform attribute with the translate property places 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) JavaScript defines possible actions

Ones:

• Fold your finger (slant).
• Straighten (imprudently).
• Fold tip (slantOne).
• Fold the last two phalanges (slantTwo).
• Return to start (restart).

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 related to interface buttons.

They are identical to what could be used in electronic installation. You can add additional parameters such as pressure degree, speed. We can also imagine them by developing this code.

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

The finger.html file is created from the finger.sol file with the command: solj-w finger. But the Script language is not used in this demo.

The next step will be to collect several fingers to form a whole hand, and then revive them and force them to manually complete a task, such as writing.