きったんの頭ん中☆

HOME > 開発室

SVG

SVGテスト用のページ。一部のブラウザでSVGを表示する(Firefox 3, Google Chrome 6で動作確認)。
参考：SVG入門 / Scalable Vector Graphics (SVG) 1.1 仕様 / XML SQUARE / Learn SVG

Hello World

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="240px" height="180px" version="1.1" baseProfile="full">
  <text x="20px" y="60px" font-family="Verdana" font-size="20px"
      onmouseover="evt.target.setAttribute('fill', 'red');"
      onmouseout="evt.target.setAttribute('fill', 'black');"
      onclick="alert('Hello World');">
    Hello World
  </text>
</svg>

直線

<line x1="30" y1="100" x2="130" y2="10" stroke="blue" stroke-width="5"/>

折れ線

<polyline fill="none" stroke="pink" stroke-width="4" 
    points="20,20 140,20 140,40 20,40 20,50 90,50 90,70 20,70 />

多角形

<polygon fill="lime" stroke="orange" stroke-width="3"
    points="30,50 60,20 120,60 80,100 50,100" />

長方形

<rect x="20" y="20" width="100" height="80" fill="lime" stroke="blue" 
    stroke-width="5"/>

円

<circle cx="90" cy="60" r="50" fill="pink" stroke="red" 
    stroke-width="5"/>

楕円

<ellipse cx="90" cy="60" rx="80" ry="30" fill="lime" stroke="green" 
    stroke-width="5"/>