4

JavaScript を使用して、svg に埋め込まれた html5 キャンバス (html5 ページ) に描画したいと考えています。"cvs" での描画は、次のようにすれば問題なく動作します:

<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024">
  <foreignObject x="0" y="0" width="512" height="512">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <canvas id="cvs" width="512" height="512"></canvas>
    </body>
  </foreignObject>
</svg>

ただし、キャンバスを使用して使用タグで参照されている場合はそうではありません。図面は単に表示されません。Safari で要素を調べると、use要素のサイズが NaN x NaN であることがわかります。Firebug は 0x0 と言います。

<svg id="fig" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px" height="1024px" viewBox="0 0 1024 1024">
  <defs>
    <foreignObject id="circles" x="0" y="0" width="512" height="512">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <canvas id="cvs" width="512" height="512"></canvas>
      </body>
    </foreignObject>
  </defs>
  <use x="0" y="0" xlink:href="#circles"></use>
</svg>

これはバグですか？予想される行動？私はforeignObjectの使い方を理解していないだけですか(可能性が高い)?

4

1 に答える 1

0

SVG仕様では、foreignObject要素を直接指すことはできません。

「svg」、「symbol」、「g」、グラフィック要素、またはその他の「使用」のみ。したがって、たとえば要素を子として持つ<g>or<svg>要素を指すことができます。<foreignObject>

于 2012-12-18T16:38:00.507 に答える