temp.svg

AJAX and PHP: Building Responsive Web Applications源代码

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
  <a xlink:href="http://ajaxphp.packtpub.com">
    <text x="200" y="20">
      SVG with AJAX and PHP Demo
    </text>
  </a>
  <!-- All chart elements are grouped and translated by 50, 50 -->
  <g transform="translate(50, 50)">
    <!-- Group all axis elements (lines and text nodes) -->
    <g>
      <!-- Path draws the grid axes and unit delimiters -->
      <path stroke="black" stroke-width="2" 
        d="M0,300 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 l50,0 
           l0,5 l0,-5 
           M0,300 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0 l0,-30 
           l-5,0 l5,0"/>
      
      <!-- Text nodes that display horizontal unit numbers -->
      <text x="-10" y="322" stroke="black">0.0</text>
      <text x="40" y="322" stroke="black">5.0</text>
      <text x="86" y="322" stroke="black">10.0</text>
      <text x="136" y="322" stroke="black">15.0</text>
      <text x="185.5" y="322" stroke="black">20.0</text>
      <text x="235.5" y="322" stroke="black">25.0</text>
      <text x="285.5" y="322" stroke="black">30.0</text>
      <text x="335.5" y="322" stroke="black">35.0</text>
      <text x="385" y="322" stroke="black">40.0</text>
      <text x="435" y="322" stroke="black">45.0</text>
      <text x="485.5" y="322" stroke="black">50.0</text>
      
      <!-- Text nodes that display vertical unit numbers -->      
      <text x="-30" y="306" stroke="black">0.0</text>
      <text x="-38" y="276" stroke="black">10.0</text>
      <text x="-39" y="246" stroke="black">20.0</text>
      <text x="-39" y="216" stroke="black">30.0</text>
      <text x="-40" y="186" stroke="black">40.0</text>
      <text x="-39" y="156" stroke="black">50.0</text>
      <text x="-39" y="126" stroke="black">60.0</text>
      <text x="-39" y="96" stroke="black">70.0</text>
      <text x="-39" y="66" stroke="black">80.0</text>
      <text x="-39" y="36" stroke="black">90.0</text>
      <text x="-47" y="6" stroke="black">100.0</text>
    </g>
    
    <!-- Draw the lines between chart nodes -->
    <path stroke="black" stroke-width="1" fill="none" 
      d="M0,239.143 L10,220.286 L20,213.429 L30,185.571 L40,145.714 
         L50,108.857 L60,129 L70,101.143 L80,58.2857 L90,78.4286"/>
         
    <!-- Draw the chart nodes as filled blue circles -->
    <circle cx="00" cy="239.143" r="3" fill="blue" />
    <circle cx="10" cy="220.286" r="3" fill="blue" />
    <circle cx="20" cy="213.429" r="3" fill="blue" />
    <circle cx="30" cy="185.571" r="3" fill="blue" />
    <circle cx="40" cy="145.714" r="3" fill="blue" />
    <circle cx="50" cy="108.857" r="3" fill="blue" />
    <circle cx="60" cy="129.000" r="3" fill="blue" />
    <circle cx="70" cy="101.143" r="3" fill="blue" />
    <circle cx="80" cy="58.2857" r="3" fill="blue" />
    <circle cx="90" cy="78.4286" r="3" fill="blue" />
  </g>
</svg>