How to rotate child "bones" in a dog's tail in SVG?

Question

I'm overwhelmed by approaches and tools for SVG, and would like to find a super simple way to position and draw a stick-figure dog's "tail", consisting of maybe five "bones". each of which could be a line or rectangle for now. I'd like each child bone to have a settable rotation from its parent bone. You could also think of it as a five-segment snake.

For example, if the bones' rotations are 10,10,10,10,10 then the tail curves smoothly down, like a circle. If the rotations are -20,-10,0,10,20 then the tail has an "S"-curve shape to it. I'd love to have a static page that could do this, but ideally I'd like to have some kind of textbox/slider for each of the five bones, or at least an example of how to reference and tweak the bones via JavaScript. is there a really simple approach that can make this tail? I'll use a library if there's one that really adds value for this case, but simple/small is preferred. Thanks!

score 0 · Answer 1 · answered Jul 13 '15 at 17:58

Yes, make each bone a "child" of the previous one.

Here's an example SVG. Make the snippet full screen to see the inputs.

function adjustTail(evt)
{
  var name = evt.target.getAttribute('name');
  var val = evt.target.value;
  console.log("name="+name+" val="+val);
  var xform = (name=="s1") ? "" : "translate(50,0) ";
  xform += "rotate(" + val + ")";
  document.getElementById(name).setAttribute("transform", xform);
  return false;
}


document.getElementById("i1").addEventListener("change", adjustTail);
document.getElementById("i2").addEventListener("change", adjustTail);
document.getElementById("i3").addEventListener("change", adjustTail);
document.getElementById("i4").addEventListener("change", adjustTail);
document.getElementById("i5").addEventListener("change", adjustTail);

input {
  width: 3em;
}

<svg width="500" height="300">

  <g id="tail1" stroke="black" stroke-width="10" fill="none" transform="translate(100,150)"> 

    <g id="s1" transform="rotate(-20)">
      <line x1="0" y1="0" x2="50" y2="0"/>
      <g id="s2" transform="translate(50,0) rotate(-10)">
        <line x1="0" y1="0" x2="50" y2="0"/>
        <g id="s3" transform="translate(50,0) rotate(0)">
          <line x1="0" y1="0" x2="50" y2="0"/>
          <g id="s4" transform="translate(50,0) rotate(10)">
            <line x1="0" y1="0" x2="50" y2="0"/>
            <g id="s5" transform="translate(50,0) rotate(20)">
              <line x1="0" y1="0" x2="50" y2="0"/>
            </g>
          </g>
        </g>
      </g>
    </g>
    
  </g>
  

</svg>

<div>
  <input id="i1" type="text" name="s1" value="-20">
  <input id="i2" type="text" name="s2" value="-10">
  <input id="i3" type="text" name="s3" value="0">
  <input id="i4" type="text" name="s4" value="10">
  <input id="i5" type="text" name="s5" value="20">
</div>

Thanks! That was a perfect answer. Simple, informative, fully functional. I appreciate it a ton. — svgnewb, Jul 13 '15 at 18:21
You can get rid of the gaps between segments by adding `stroke-linecap="round"` to the `` tags. — r3mainer, Jul 13 '15 at 18:51

How to rotate child "bones" in a dog's tail in SVG?

1 Answers1