Question

我正在尝试在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，我必须用什么来代替它？

Answer 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中使用哪个外部命名空间。它虽然效果比没有好。

Answer 2

不幸的是，没有标准说明要做什么，但Firefox使用http://www.w3.org/1999/xhtml表示它支持foreignObject标记中的xhtml（以及http://www.w3.org/1998/Math/MathML表示mathml）。我相信其他UA可能已复制此内容，但我没有检查过。

在SVG中使用<switch>和<foreignobject> </foreignobject> </switch>

2 个答案: