当前位置 :| 主页>SVG>SVG教程>

SVG鼠标拖动画线

来源：醉生梦死 作者： 时间：2007-06-06 点击：

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" [
<!ATTLIST svg xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
]>


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
zoomAndPan="enable" onload="getSVGDoc(evt)">
<title>SVG - Learning By Coding</title>
<desc>SVG-Spezifikation in Beispielen</desc>
<defs>
    <script type="text/javascript">
      <![CDATA[
      var svgdoc,svgroot,newline,newline2,newline3,posx,posy,posmin=50,drawing;
      var linecol="#000",linewidth="1px",check=false;
      var svgns="http://www.w3.org/2000/svg";
      function getSVGDoc(load_evt)
      {
        svgdoc=load_evt.target.ownerDocument;
        svgroot=svgdoc.rootElement;
        drawing=svgdoc.getElementById("drawing");
        svgroot.addEventListener("mousedown",MDown,false);
        svgroot.addEventListener("mousemove",MMove,false);
        svgroot.addEventListener("mouseup",MUp,false);
      }
      function MDown(mousedown_event)
      {
        Coords(mousedown_event);
        newline=svgdoc.createElementNS(svgns,"line");
        newline.setAttribute("x1",posx);
        newline.setAttribute("x2",posx);
        newline.setAttribute("y1",posy);
        newline.setAttribute("y2",posy);
        newline.setAttribute("stroke",linecol);
        newline.setAttribute("stroke-width",linewidth);

        newline2=svgdoc.createElementNS(svgns,"line");
        newline2.setAttribute("x1",posx);
        newline2.setAttribute("x2",posx);
        newline2.setAttribute("y1",posy);
        newline2.setAttribute("y2",posy);
        newline2.setAttribute("stroke",linecol);
        newline2.setAttribute("stroke-width",linewidth);

        newline3=svgdoc.createElementNS(svgns,"line");
        newline3.setAttribute("x1",posx);
        newline3.setAttribute("x2",posx);
        newline3.setAttribute("y1",posy);
        newline3.setAttribute("y2",posy);
        newline3.setAttribute("stroke",linecol);
        newline3.setAttribute("stroke-width",linewidth);

check=true;
      }
      function MMove(mousemove_event)
      {
        if(check)
        {
          Coords(mousemove_event);
          newline.setAttribute("x2",posx);
          newline.setAttribute("y2",posy);

          newline2.setAttribute("y2",posy);

          newline3.setAttribute("y1",posy);
          newline3.setAttribute("x2",posx);
          newline3.setAttribute("y2",posy);
          drawing.appendChild(newline);
drawing.appendChild(newline2);
drawing.appendChild(newline3);
       }
      }
      function MUp()
      {
        check=false;
      }
      function Coords(mouse_event)
      {
        posx=mouse_event.clientX;
        posy=mouse_event.clientY;
        if(posx<posmin)posx=posmin;
        if(posy<posmin)posy=posmin;
        if(posx>640+posmin)posx=640+posmin;
        if(posy>480+posmin)posy=480+posmin;
      }
      function SetLineColor(mousedown_event)
      {
        linecol=mousedown_event.target.style.getPropertyvalue("fill");
        svgdoc.getElementById("aktline").style.setProperty("stroke",linecol,"");
      }
      function SetLineWidth(mousedown_event)
      {
        linewidth=mousedown_event.target.style.getPropertyvalue("stroke-width");
        svgdoc.getElementById("aktline").style.setProperty("stroke-width",linewidth,"");
      }
      ]]>
    </script>
</defs>
<text x="30" y="30" style="fill: #000; font-size: 24px">
    Linien zeichnen (mit Wahl von Farbe und Strichst?rke)</text>
<rect x="50" y="50" width="640" height="480" rx="5" ry="5"
    style="fill: #FFF; stroke: #000"/>
<g onmousedown="SetLineColor(evt)">
    <rect x="30" y="60" width="10" height="10"
      style="fill: #FF0; stroke: #000"/>
    <rect x="30" y="80" width="10" height="10"
      style="fill: #F00; stroke: #000"/>
    <rect x="30" y="100" width="10" height="10"
      style="fill: #090; stroke: #000"/>
    <rect x="30" y="120" width="10" height="10"
      style="fill: #00C; stroke: #000"/>
    <rect x="30" y="140" width="10" height="10"
      style="fill: #000; stroke: #000"/>
</g>
<g onmousedown="SetLineWidth(evt)">
    <line x1="30" y1="180" x2="40" y2="180"
      style="stroke: #000; stroke-width: 1px"/>
    <line x1="30" y1="200" x2="40" y2="200"
      style="stroke: #000; stroke-width: 2px"/>
    <line x1="30" y1="220" x2="40" y2="220"
      style="stroke: #000; stroke-width: 3px"/>
    <line x1="30" y1="240" x2="40" y2="240"
      style="stroke: #000; stroke-width: 4px"/>
    <line x1="30" y1="260" x2="40" y2="260"
      style="stroke: #000; stroke-width: 5px"/>
</g>
<line id="aktline" x1="18" y1="58" x2="18" y2="262"
    style="stroke: #000; stroke-width: 1px"/>

<g id="drawing"></g>
</svg>

[收藏] [推荐] [评论] [打印] [关闭]

上一篇：网络图形标准SVG 的特征及其实现[学SVG必看] 2
下一篇：网络矢量图像SVG的实现与应用研究

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

赞助商连接

souzz：www.souzz.net

SVG鼠标拖动画线