<?xml version="1.0" standalone="no"?>
<svg xml:space="preserve" viewBox="0 0 1.8 1.8" width="600" height="450" onload="DoOnLoad( evt )"
contentScriptType="text/ecmascript"
version="1.1" baseProfile="full"
xmlns:a="http://www.adobe.com/svg10-extensions"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events" a:timeline="independent">
<desc>Functional Key Spline graph created in SVG and Javascript</desc>
<script><![CDATA[

var dragger = null;
var origTransform = "";
var oldX;
var oldY;
var origX;
var origY;
var oldTranslateX;
var oldTranslateY;
function DoOnMouseOver(evt)
{
  var onObject = evt.getTarget();
  if( onObject.getAttribute("id") == "pointOne" || onObject.getAttribute("id") == "pointTwo")
  {
  onObject.getStyle().setProperty("opacity", "0.5");
  }
}
function DoOnMouseOut(evt)
{
  var onObject = evt.getTarget();
  if( onObject.getAttribute("id") == "pointOne" || onObject.getAttribute("id") == "pointTwo")
  {
  onObject.getStyle().setProperty("opacity", "0.3");
  }
}
    
function DoOnLoad(evt)
{
  // useless leftovers
  var el = getSVGDocument(evt.getTarget()).getElementById("pointOne");
  el.getStyle().setProperty("fill", "black");
}
function DoOnMouseDown(evt)
{
  var onObject = evt.getTarget();
  if( onObject.getAttribute("id") == "pointOne" || onObject.getAttribute("id") == "pointTwo")
  {
   dragger = onObject;
   oldX = Math.abs(dragger.getAttribute("cx")); // has to be abs'd so
   oldY = Math.abs(dragger.getAttribute("cy")); // it isn't a string(?)
   origX = evt.getClientX();
   origY = evt.getClientY();
   oldTranslateX = 0; // not used any more?
   oldTranslateY = 0;
  }
}
function DoOnMouseMove(evt)
{
    if( dragger != null )
    {
  dragger.getStyle().setProperty("opacity", "0.75");
  // problem is here - initially drops to zero - also, it has
  // to be multiplied by 0.004 for the exact display resolution
  // - wanted replace oldTranslateX with oldX, but it adds as a string?
  var newX = Math.max(Math.min((oldX + (evt.getClientX() - origX) * 0.004),1),0);
  var newY = Math.max(Math.min((oldY + (evt.getClientY() - origY) *-0.004),1),0);
  var curve = getSVGDocument(evt.getTarget()).getElementById("kSpline");
  if( dragger.getAttribute("id") == "pointOne" )
  {
   var other = getSVGDocument(evt.getTarget()).getElementById("pointTwo");
   var cLine1 = getSVGDocument(evt.getTarget()).getElementById("cL1");
   var curX2 = other.getAttribute("cx");
   var curY2 = other.getAttribute("cy");
   var transformT = "keySplines=\"" +
     Math.round(newX*100)/100 + " " + Math.round(newY*100)/100 + "  " +
     Math.round(curX2*100)/100 + " " + Math.round(curY2*100)/100 + "\"";
   curve.setAttribute("d", "M0,0C" +
     newX + "," + newY + " " +
     curX2 + "," + curY2 + " 1,1");
   cLine1.setAttribute("x2", newX);
   cLine1.setAttribute("y2", newY);
  }
  else
  {
   var other = getSVGDocument(evt.getTarget()).getElementById("pointOne");
   var cLine2 = getSVGDocument(evt.getTarget()).getElementById("cL2");
   var curX1 = other.getAttribute("cx");
   var curY1 = other.getAttribute("cy");
   var transformT = "keySplines=\"" +
     Math.round(curX1*100)/100 + " " + Math.round(curY1*100)/100 + "  " +
     Math.round(newX*100)/100 + " " + Math.round(newY*100)/100 + "\"";
   curve.setAttribute("d", "M0,0C" +
     curX1 + "," + curY1 + " " +  
     newX + "," + newY + " 1,1");
   cLine2.setAttribute("x2", newX);
   cLine2.setAttribute("y2", newY);
  }
  var coordsText = getSVGDocument(evt.getTarget()).getElementById("coords");
  coordsText.getFirstChild().setData(transformT);
    
  dragger.setAttribute("cx", newX);
  dragger.setAttribute("cy", newY);
    }
}
function DoOnMouseUp(evt)
{
  if( dragger != null )
  {
   dragger.getStyle().setProperty("opacity", "0.3");
   dragger = null;
   origTransform = ""
   oldX = 0;
   oldY = 0;
   origX = 0;
   origY = 0;
   oldTranslateX = 0;
   oldTranslateY = 0;
  }
}
function getSVGDocument(node)
{
  // given any node of the tree, will obtain the SVGDocument node.
  // must be careful: a Document node's ownerDocument is null!
  if( node.getNodeType() != 9 )  // if not DOCUMENT_NODE
   return node.getOwnerDocument();
  else
   return node;
}
]]></script>
<defs>
   <line id="sLine" x1="0" y1="0" x2="1" y2="0"
style="stroke:#BBB;stroke-width:0.01" />
   <g id="lSet1">
     <use xlink:href="#sLine" x="0" y="1.0" />
     <use xlink:href="#sLine" x="0" y="0.9" />
     <use xlink:href="#sLine" x="0" y="0.8" />
     <use xlink:href="#sLine" x="0" y="0.7" />
     <use xlink:href="#sLine" x="0" y="0.6" />
     <use xlink:href="#sLine" x="0" y="0.5" />
     <use xlink:href="#sLine" x="0" y="0.4" />
     <use xlink:href="#sLine" x="0" y="0.3" />
     <use xlink:href="#sLine" x="0" y="0.2" />
     <use xlink:href="#sLine" x="0" y="0.1" />
     <use xlink:href="#sLine" x="0" y="0.0" />
   </g>
</defs>
<g id="all" onmouseover="DoOnMouseOver( evt )" onmouseout="DoOnMouseOut( evt )" onmousedown="DoOnMouseDown( evt )" onmouseup="DoOnMouseUp( evt )" onmousemove="DoOnMouseMove( evt )">
<rect id="bg" x="-0.3" y="0.05" width="2.6" height="1.75"
style="fill:white" />
<text x="0.15" y="0.2" style="fill:#348;stroke:none;font-size:0.15;">Key Splines graph tool</text>
<text x="-0.1" y="0.4" style="fill:#444;stroke:none;font-size:0.054;">
<tspan x="-0.25" y="0.5">  This SVG file</tspan>
<tspan x="-0.25" y="0.56">demonstrates how</tspan>
<tspan x="-0.25" y="0.62">the 'keySplines' </tspan>
<tspan x="-0.25" y="0.68">setting works for key</tspan>
<tspan x="-0.25" y="0.74">interpolation in SMIL</tspan>
<tspan x="-0.25" y="0.8">based animation.</tspan>
<tspan x="-0.25" y="0.86">  The handles can</tspan>
<tspan x="-0.25" y="0.92">be manipulated by </tspan>
<tspan x="-0.25" y="0.98">dragging them </tspan>
<tspan x="-0.25" y="1.04">around.</tspan>
</text>
<g id="graph" transform="translate(0.4,1.4) scale(1,1)"
  style="fill:none; stroke:black; stroke-width:.01">
   <g id="grid" transform="scale(1,-1)">
       <use x="0" y="0" xlink:href="#lSet1" />
       <use x="0" y="-1" xlink:href="#lSet1" transform="rotate(90)" />
       <line id="cL1" x1="0" y1="0" x2="0.5" y2="0.1" style="stroke:#444;stroke-width:0.005;" />
       <line id="cL2" x1="1" y1="1" x2="0.5" y2="0.9" style="stroke:#444;stroke-width:0.005;" />
       <circle id="pointOne" cx="0.5" cy="0.1" r=".03" transform="translate(0 0)"
  style="fill:black;stroke:#F66;stroke-width:0.006;opacity:0.3;" />
       <circle id="pointTwo" cx="0.5" cy="0.9" r=".03" transform="translate(0 0)"
  style="fill:black;stroke:#F66;stroke-width:0.006;opacity:0.3;" />
       <path id="kSpline" x="0" y="0" d="M0,0 C0.5,0.1 0.5,0.9 1,1" style="stroke:red;" />
   </g>
   <g id="textGrp" transform="scale(1)">
     <text x="0" y="-1.05" style="fill:grey;stroke:none;font-size:0.1;">y</text>
     <text x="1.05" y="0" style="fill:grey;stroke:none;font-size:0.1;">x</text>
     <text x="-0.1" y="0.1" style="fill:grey;stroke:none;font-size:0.07;">0,0</text>
     <text x="1" y="-1.05" style="fill:grey;stroke:none;font-size:0.07;">1,1</text>
     <text id="explan" x="0.05" y="0.16"
  style="fill:#444;stroke:none; font-size:0.05;">(You can select and copy the text below)</text>
     <text id="coords" x="0.05" y="0.25"
  style="fill:black;stroke:none;font-size:0.07;">keySplines="0.5 0.1  0.5 0.9"</text>
     <text x="0.9" y="0.38" style="fill:#333;stroke:none;font-size:0.04;">Copyleft 2000 - Burning Pixel Productions</text>
   </g>
</g>
</g>
</svg>

实例演示：http://burningpixel.com/svg/keySplineTool.htm