Question

这是我的html/svg代码

<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" style="display: none;" id="foo" height="700" width="370" y="0" x="0">
    <span xmlns="http://www.w3.org/1999/xhtml" class="tooltip">
       <div><b>Comments</b></div>
    </span>
</foreignObject>

我要做的是显示foreignObject onmouseover。这是onmouseover代码，用于更改style的{{1}}属性。

foreignObject

这里是$('#foo').css('display','block');的{{1}}代码：

css

整个代码在firefox中完美运行，但似乎无法在chrome中运行。我正在使用Ubuntu 12.04 Chrome版本20.0.1132.57。 class tooltip按预期将.tooltip { display: block; position: absolute; width: 350px; padding: 5px; font-size: 11px; text-align: left; color: rgb(0, 0, 0); background: rgb(204, 204, 204); border: 2px solid rgb(153, 153, 153); border-radius: 5px; text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px; margin-top: 1px; top: 0%; left: 0%; z-index: 1000; word-wrap: break-word; }的显示从mouseover更改为foreignObject，但文字不会显示。

修改

http://jsfiddle.net/firecast/wNB8G/

这是我确切问题的一个例子......在Firefox上工作正常，但它不适用于chrome。

Answer 1

根据我在Mac OS X上的测试，Chrome似乎不支持foreignObjects，至少不支持您所需的扩展名。我已经尝试过您的源代码，并从mdn：

中获取此示例

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

<svg width="400px" height="300px" viewBox="0 0 400 300"
     xmlns="http://www.w3.org/2000/svg">
  <desc>This example uses the 'switch' element to provide a 
        fallback graphical representation of a paragraph, if 
        XHTML is not supported.</desc>
  <!-- The 'switch' element will process the first child element
       whose testing attributes evaluate to true.-->
  <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://www.w3.org/1999/xhtml">
      <!-- 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>
  </switch>
</svg>

现在可行的是，MDN示例有些内容无法与Chrome一起使用，但对我来说，我只能在Chrome版本28.0.1500.71中获得文本后备呈现

您的xhtml嵌入是否在没有display:none的情况下在Chrome中运行？

更新

如果您删除requiredExtensions属性，我可以从我的测试中获得上述示例。显然这可能不是一个好主意，因为我的理解是该属性是为了确保用户代理可以正确呈现内容。但是，如果您的目标受众只是基于浏览器，那么您可以做出一个很好的假设，即UA将能够支持基本的XHTML。现在关于某些UA是否需要该属性来理解嵌入内容，这是一个不同的故事。

Firefox和Chrome都支持使用正确的命名空间是可行的，这个答案可能很有趣：

<textarea> inside <foreignObject> handles as expected in Chrome but not Firefox

但是，似乎foreignObjects仍然会导致网络问题，因此浏览器供应商可能需要改善其支持。

更新x2

到目前为止，我已经在Firefox和Chrome中使用以下内容了，这看起来很奇怪foreignObject;）

<!DOCTYPE html>
<html>
<style>
svg {
  position: relative;
}
.tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 350px;
  padding: 5px;
  font-size: 11px;
  text-align: left;
  color: rgb(0, 0, 0);
  background: rgb(204, 204, 204);
  border: 2px solid rgb(153, 153, 153);
  border-radius: 5px;
  text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 1px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 2px 0px; 
}
svg:hover .tooltip {
  display: block;
}
</style>
<body>
  <svg width="400px" height="300px" viewBox="0 0 400 300"
       xmlns="http://www.w3.org/2000/svg">
       <foreignObject id="foo" height="700" width="370" y="0" x="0">
           <span xmlns="http://www.w3.org/1999/xhtml" class="tooltip">
              <div><b>Comments</b></div>
           </span>
       </foreignObject>
  </svg>
</body>
</html>

foreignObject display：block在chrome中不起作用

1 个答案:

更新

更新x2