Geek Answers Handbook

Using <switch> with <foreignObject> in SVG

I am trying to correctly implement the switch tag for a foreignObject tag in SVG so that Internet Explorer can display something else (nothing new in IE, always leaving functions). The documentation is almost completely clear how to do this:

<switch> <!-- Process the embedded XHTML if the requiredExtensions attribute evaluates to true (ie, the user agent supports XHTML embedded within SVG). --> <foreignObject width="100" height="50" requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML"> <!-- XHTML content goes here --> <body xmlns="http://www.w3.org/1999/xhtml"> <p>Here is a paragraph that requires word wrap</p> </body> </foreignObject> <!-- Else, process the following alternate SVG. Note that there are no testing attributes on the 'text' element. If no testing attributes are provided, it is as if there were testing attributes and they evaluated to true.--> <text font-size="10" font-family="Verdana"> <tspan x="10" y="10">Here is a paragraph that</tspan> <tspan x="10" y="20">requires word wrap.</tspan> </text>

The example is nice and straightforward and shows how to use the requiredExtensions attribute. However, the hyperlink "http://example.com/SVGExtensions/EmbeddedXHTML" is meaningless to me. What would I have to put instead to indicate that XHTML is required for this external object?

+7
source share
2 answers

I found the answer after much grunts. An example should probably be added to the documentation ... I have tested in IE, FF and Chrome so far, and all three have correctly handled the switch:

Instead of using the attribute "requiredExtensions" I used the attribute "requiredFeatures" and was associated with "http://www.w3.org/TR/SVG11/feature#Extensionibility"

So it will look like this:

 <switch> <foreignObject width="100" height="50" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"> <!-- whatever external user-agent stuff --> </foreignObject> <!-- Alternate SVG content if foreignObject is not supported --> </switch>

This works for testing if foreignObject is supported by the user agent, but it is not ideal, because you still do not specify which external namespace you plan to use in foreignObject, which this user agent may not support. It works better than nothing.

+7
source

Unfortunately, no standard says what to do, but Firefox uses http://www.w3.org/1999/xhtml to indicate that it supports xhtml in foreignObject tags (and http://www.w3.org/1998/Math/MathML for mathml). I believe other UAs can copy this, but I have not tested.

0
source

More articles:


All Articles