4

这是我的部分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更改.styleforeignObject

$('#foo').css('display','block');

这是css代码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;
}

整个代码在 Firefox 中完美运行，但在 chrome 中似乎不起作用。我正在使用 Ubuntu 12.04 Chrome 版本 20.0.1132.57。将frommouseover的显示更改为预期，但文本不出现。foreignObjectdisplay: none;display:block;

编辑

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

这是我的确切问题的一个示例......它在 Firefox 上运行良好，但在 chrome 上不起作用。

4

1 回答 1

5

从我在 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 嵌入是否可以在没有 的情况下在 Chrome 中使用display:none？

更新

从我的测试中，如果删除该requiredExtensions属性，您可以使上述示例正常工作。显然这可能不是一个好主意，因为据我了解，该属性的存在是为了确保用户代理可以正确呈现内容。但是，如果您的目标受众只是基于浏览器的，您可能会很好地假设 UA 将能够支持基本的 XHTML。现在至于某些 UA 是否需要该属性来理解嵌入内容，那就另当别论了。

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

<foreignObject> 中的 <textarea> 在 Chrome 中按预期处理，但在 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>
于 2013-07-17T07:24:03.143 回答