- From: Jeff Schiller <codedread@gmail.com>
- Date: Thu, 23 Jul 2009 07:21:20 -0500
- To: Simon Pieters <simonp@opera.com>
- Cc: Geoffrey Sneddon <gsneddon@opera.com>, HTML WG <public-html@w3.org>, www-svg <www-svg@w3.org>
On Thu, Jul 23, 2009 at 7:12 AM, Simon Pieters<simonp@opera.com> wrote:
> You can do:
>
> <svg>
> <desc>
> <img src="fallback.png" alt="...">
> </desc>
> <circle cx="50" cy="50" r="30" fill="red"></circle>
> <a xlink:href="foo.html"><text y="100"><![CDATA[This is SVG
> text]]></text></a>
> </svg>
>
Actually my original solution was indeed to use the <desc> element,
but that's a misuses of the element. Of course creating my own markup
tag is also probably a misuse. ;)
Better to just use the svg:g element with a class:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@namespace svg "http://www.w3.org/2000/svg";
svg text, svg a, svg a { display: none; }
svg|svg svg|g.fallback { display: none; }
svg|svg svg|text, svg|svg svg|a { display: block; }
</style>
</head>
<body>
<svg>
<g class="fallback">
<img src="fallback.png"></img>
<p>Please consider using a browser that supports SVG</p>
</g>
<circle cx="50" cy="50" r="30" fill="red"></circle>
<a href="foo.html"><text y="100">This is SVG text</text></a>
</svg>
</body></html>
Jeff
Received on Thursday, 23 July 2009 12:22:10 UTC