Styling XHTML with SVG using XSLT - Part IISee also: Part I
1. Adding some SVG
So in Part I of this tutorial we used XSLT to style XHTML, now lets add some SVG... So in this example we add a rect element in a custom namespace. We bind the prefix "my" to an example URI, here I use "http://example.com/namespace". We then make up a new element called rect in the "my" namespace.
<?xml-stylesheet href="extension.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:my="http://example.com/namespace">
<head>
<title>test</title>
</head>
<body>
<my:rect/>
</body>
</html>
We extent the identity transformation with one template for our my:rect
<xsl:template match="my:rect">
<svg:svg width="100" height="100">
<svg:rect x="0" y="0" width="100" height="100"/>
</svg:svg>
</xsl:template>
You will notice that SVG still does not work in IE, it requires a special handling. Basicly you have to use prefixes for your SVG, and tell IE that ASV should handle that namspace. You do this by adding an xmlns:svg="http://www.w3.org/2000/svg" to your html tag and a special processing-instruction plus an object to your html:head element. So a basic document looks like this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:my="http://example.com/namespace" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<title>test</title>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
</head>
<body>
<svg:svg width="100" height="100">
<svg:rect x="0" y="0" width="100" height="100"/>
</svg:svg>
</body>
</html>
XHTML with inline SVG send as "text/html"- works in IE but does not in Firefox or Opera.
Now we can reuse the idea with the identity transformation to make this whole thing work in IE while still using "text/xml".
XHTML with inline SVG send as "text/xml" and an identity XSLT.
So knowing this, we can extend the stylsheet of the first example to add the required workarounds for IE automatically. So we add two extra templates to our stylesheet:
<xsl:template match="html:head">
<xsl:copy>
<xsl:if test="system-property('xsl:vendor')='Microsoft'">
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<xsl:processing-instruction name="import">namespace="svg" implementation="#AdobeSVG"</xsl:processing-instruction>
</xsl:if>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:template>
This template copies the html:head element, and if in IE add the object tag and the processing-instruction. Add this template...
<xsl:template match="html:html">
<xsl:choose>
<xsl:when test="system-property('xsl:vendor')='Microsoft'">
<html xmlns:svg="http://www.w3.org/2000/svg">
<xsl:apply-templates select="@*|node()"/>
</html>
</xsl:when>
<xsl:otherwise>
<xsl:copy>
<xsl:apply-templates select="@*|node()"/>
</xsl:copy>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
...adds the "svg" prefix declaration. Alternatively you can add this by hand to your documents, which is a cleaner way to go I think. But I'll stick to this version for now to keep the files simple.
So again our first example, this time styled with the two extra templates.
<?xml-stylesheet href="extension2.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:my="http://example.com/namespace">
<head>
<title>test</title>
</head>
<body>
<my:rect/>
</body>
</html>
2. Creating a skin for html:input type="button" with SVG
So finally we can start developing a real stylesheet. As a first example we will turn My inline SVG button example into a skin for html:input type="button". Here is the SVG code of that button again:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="208" height="38" cursor="pointer" onclick="alert('hello')">
<svg:linearGradient id="button3_bg1" x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0" stop-color="turquoise"/>
<svg:stop offset="1" stop-color="navy"/>
</svg:linearGradient>
<svg:linearGradient id="button3_light1" x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0" stop-color="white"/>
<svg:stop offset="1" stop-color="white" stop-opacity="0"/>
</svg:linearGradient>
<svg:linearGradient id="button3_light2" x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0" stop-color="grey" stop-opacity="0"/>
<svg:stop offset="1" stop-color="grey"/>
</svg:linearGradient>
<svg:filter id="gb" x="-0.5" y="-1" width="2" height="3">
<svg:feGaussianBlur stdDeviation="3"/>
</svg:filter>
<svg:rect x="5" y="5" width="150" height="30" rx="10" ry="10" fill="grey" filter="url(#gb)"/>
<svg:rect x="0" y="0" width="150" height="30" rx="10" ry="10" fill="url(#button3_bg1)"/>
<svg:text stroke="blue" x="75" y="22" font-size="20" text-anchor="middle" fill="yellow" font-weight="900">click here</svg:text>
<svg:rect x="2" y="2" width="146" height="17" rx="8" ry="8" fill="url(#button3_light1)" filter="url(#gb)"/>
<svg:rect x="4" y="21" width="142" height="7" rx="8" ry="8" fill="url(#button3_light2)" filter="url(#gb)"/>
</svg:svg>
We can use this as a template. The only things we will change are the ids of the gradients, as we have 3 gradients for each button, and the id must be unique. And the content of the svg:text element will be determind by the value attribute of the styled input element(<xsl:value-of select="@value"/>). So the template looks like this, note the curly braces.
<xsl:template match="html:input[@type='button']">
<xsl:variable name="id" select="generate-id()"/>
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="208" height="38" cursor="pointer">
<xsl:apply-templates select="@*"/>
<svg:linearGradient id="{$id}_bg1" x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0" stop-color="turquoise"/>
<svg:stop offset="1" stop-color="navy"/>
</svg:linearGradient>
<svg:linearGradient id="{$id}_light1" x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0" stop-color="white"/>
<svg:stop offset="1" stop-color="white" stop-opacity="0"/>
</svg:linearGradient>
<svg:linearGradient id="{$id}_light2" x1="0" y1="0" x2="0" y2="1">
<svg:stop offset="0" stop-color="grey" stop-opacity="0"/>
<svg:stop offset="1" stop-color="grey"/>
</svg:linearGradient>
<svg:filter id="{$id}_gb" x="-0.5" y="-1" width="2" height="3">
<svg:feGaussianBlur stdDeviation="3"/>
</svg:filter>
<svg:rect x="5" y="5" width="150" height="30" rx="10" ry="10" fill="grey" filter="url(#{$id}_gb)"/>
<svg:rect x="0" y="0" width="150" height="30" rx="10" ry="10" fill="url(#{$id}_bg1)"/>
<svg:text stroke="blue" x="75" y="22" font-size="20" text-anchor="middle" fill="yellow" font-weight="900">
<xsl:value-of select="@value"/>
</svg:text>
<svg:rect x="2" y="2" width="146" height="17" rx="8" ry="8" fill="url(#{$id}_light1)" filter="url(#{$id}_gb)"/>
<svg:rect x="4" y="21" width="142" height="7" rx="8" ry="8" fill="url(#{$id}_light2)" filter="url({$id}_#gb)"/>
</svg:svg>
</xsl:template>
An example would look quite simple:
<?xml-stylesheet href="extension2.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
</head>
<body>
<form>
<input type="button" value="button1" onclick="alert('hello from button1')"/><br/>
<input type="button" value="button2" onclick="alert('hello from button2')"/><br/>
<input type="button" value="button3" onclick="alert('hello from button3')"/>
</form>
</body>
</html>
the stylsheet used here
I hope you enjoyed this part. As a homework , you can try to implement the other HTML form elements like radio or checkboxes, or even type="text".
|
