8

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

4

2 回答 2

9

经过多次摆弄，我找到了答案。该示例可能应该添加到文档中......到目前为止，我已经在 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 中使用哪个外部命名空间。不过，它总比没有好。

于 2012-10-19T15:17:20.633 回答
0

不幸的是，没有标准说明要做什么，但 Firefox 使用http://www.w3.org/1999/xhtml来表明它支持在 foreignObject 标记（和http://www.w3.org/1998/Math/MathMLmathml）中的 xhtml。我相信其他 UA 可能已经复制了这个，但我没有检查过。

于 2012-10-19T14:39:36.693 回答