在 SVG 中使用 <switch> 和 <foreignObject>答案

【问题标题】：Using <switch> with <foreignObject> in SVG在 SVG 中使用 <switch> 和 <foreignObject>
【发布时间】：2012-12-11 19:40:53
【问题描述】：

我正在尝试为 SVG 中的 foreignObject 标记正确实现 switch 标记，以便 Internet Explorer 可以显示其他内容（在 IE 中没有什么新功能，总是忽略功能）。文档几乎非常清楚地说明了如何做到这一点：

<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>

这个例子很好，很清楚，展示了如何使用 requiredExtensions 属性。但是，超链接“http://example.com/SVGExtensions/EmbeddedXHTML”对我来说毫无意义。为了表明 XHTML 是这个 foreignObject 的 requiredExtension，我必须用什么代替它？

【问题讨论】：

相关：stackoverflow.com/questions/11128939/…

标签： svg

【解决方案1】：

经过一番折腾，我找到了答案。该示例可能应该添加到文档中...到目前为止，我已经在 IE、FF 和 Chrome 中进行了测试，并且所有三个都正确处理了开关：

我没有使用“requiredExtensions”属性，而是使用了“requiredFeatures”属性并链接到“http://www.w3.org/TR/SVG11/feature#Extensibility”

所以它看起来像：

<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>

这适用于测试用户代理是否支持 foreignObject，但它并不完美，因为您仍然没有表示您计划在用户代理可能不支持的 foreignObject 中使用哪个外部命名空间。不过总比没有好。

【讨论】：

一个警告：虽然这会处理 IE，它根本不支持 foreignObject，但在一个环境（例如，像 Illustrator 这样的自定义图形程序）中查看 SVG 时，它不会工作一般支持foreignObjects，但不特别支持XHTML。

【解决方案2】：

不幸的是，没有标准说明该怎么做，但 Firefox 使用 http://www.w3.org/1999/xhtml 表示它支持在 foreignObject 标签中的 xhtml（以及 http://www.w3.org/1998/Math/MathML 用于 mathml）。我相信其他 UA 可能已经复制了这个，但我没有检查过。

【讨论】：

虽然他们在文档中使用了这个，但我还没有看到一个浏览器可以正确处理这个问题。请参阅我使用“requiredFeatures”而不是“requiredExtensions”的答案