svg-links.svg   [plain text]


<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
  <a xlink:href='http://www.apple.com' xlink:title='SUCCESS you got a tooltip'>
    <rect width='100' height='100' />
  </a>
  <text x='10' y='120'>
    Try the following with the link above:
    <tspan x='10' dy='20'>1. Hover and notice the status text change</tspan>
    <tspan x='10' dy='20'>2. Hover and notice the cursor change to a hand</tspan>
    <tspan x='10' dy='20'>3. Hover and notice a tooltip appear</tspan>
    <tspan x='10' dy='20'>4. Drag the link and notice a bubble appear with the correct URL</tspan>
  </text>
</svg>