<?xml version="1.0" encoding="utf-8"?>

<!-- by maxf@w3.org -->

<xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.w3.org/2000/svg"
  version="1.0">

  <xsl:output method="xml" indent="yes"/>

  <xsl:template match="/">
    <svg>

<!-- todo (danbri): add this (with right numbers) width="640" height="490" viewbox="0 10 640 490" to svg element -->
				  <!-- how do we do that, since we only get that info once html:img has matched? -->

      <xsl:apply-templates select="html:html/html:body/html:img"/>
      <clipPath id="clip1">
        <xsl:apply-templates select="html:html/html:body/html:map/html:area"/>
      </clipPath>
    </svg>
  </xsl:template>

  <xsl:template match="html:img">
   <image xlink:href="{@src}" width="{@width}" height="{@height}" opacity="0.5"/>
    <rect width="{@width}" height="{@height}" fill="green" fill-opacity="0.5"/>
    <image xlink:href="{@src}" width="{@width}" height="{@height}" clip-path="url(#clip1)"/>
  </xsl:template>

  <xsl:template match="html:area[@shape='POLY']">
    <polygon points="{translate(@coords,',',' ')}"/>
  </xsl:template>

</xsl:stylesheet>
