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に取り組んでいます。からのmouseover表示が意図したとおりに変更されますが、テキストは表示されません。foreignObjectdisplay: none;display:block;

編集

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

これは私の正確な問題の例です... Firefoxでは正常に動作しますが、クロムでは動作しません。

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依然として Web で問題が発生しているように見えるため、ブラウザ ベンダーがサポートを改善する必要があるだけかもしれません。

アップデート 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 に答える