Menu
I am trying to properly implement the switch tag for a foreignObject tag in SVG so that Internet Explorer can display something else (nothing new in IE, always leaving features out). The documentation is almost perfectly clear on how to do this:
<switch>
<!-- Process the embedded XHTML if the requiredExtensions attribute
evaluates to true (i.e., 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 clear 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 in place of this in order to denote that XHTML is the requiredExtension for this foreignObject?
362
I have found the answer after much fiddling. The example should probably be added to the documentation... I have tested in IE, FF, and Chrome so far and all three have treated the switch properly:
Instead of using the "requiredExtensions" attribute, I used the "requiredFeatures" attribute and linked to "http://www.w3.org/TR/SVG11/feature#Extensibility"
So it would look like:
<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 isn't perfect as you still aren't denoting which external namespace you plan to use in the foreignObject which that user-agent may not support. It works better than nothing though.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With