8

svgHTML5 は、要素を介して SVG をサポートします。要素を使用して、他の言語を SVG 内に埋め込むことができますforeignObject。HTML は、MathML と同様にレンダリングできます。今日のブラウザでレンダリングできるものは他にあるでしょうか? （簡単な例をいただければ幸いです）

要素内の HTML (canvas要素)の例foreignObject:

<!DOCTYPE html>
<html>
    <body>
        <svg id="svg1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
            <foreignObject x="0" y="0" width="200" height="100">
                <canvas id="myCanvas" width="200" height="100"></canvas>
            </foreignObject>
        </svg>
        <script>
            var canvas1 = document.getElementById("myCanvas");
            var context1 = canvas1.getContext("2d");
            context1.fillStyle = "lightblue";
            context1.fillRect(20, 40, 50, 50);
        </script>
    </body>
</html>

要素内の MathML の例foreignObject(FF5 を使用):

<!DOCTYPE html>
<html>
    <body>
        <svg id="svg1" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
            <foreignObject x="50" y="50" width="100" height="100">
                <math xmlns="http://www.w3.org/1998/Math/MathML">
                    <mrow>
                        <mi>A</mi>
                        <mo>=</mo>
                        <mfenced open="[" close="]">
                            <mtable>
                                <mtr>
                                    <mtd><mi>x</mi></mtd>
                                    <mtd><mi>y</mi></mtd>
                                </mtr>
                                <mtr>
                                    <mtd><mi>z</mi></mtd>
                                    <mtd><mi>w</mi></mtd>
                                </mtr>
                            </mtable>
                        </mfenced>
                    </mrow>
                </math>
            </foreignObject>
        </svg>
    </body>
</html>
4

3 に答える 3

9

技術的には、タグには何でも入れることができます。foreignObject問題は、ユーザー エージェントがそれをサポートするかどうかです。これについては、決定的な答えはないようです。SVG 仕様自体は、これについてかなり (意図的に) あいまいです。

「foreignObject」要素を使用すると、別のユーザー エージェントによって描画されたグラフィック コンテンツを持つ外部の名前空間を含めることができます。含まれている外国のグラフィック コンテンツは、SVG 変換と合成の対象となります。

幸いなことに、この仕様では、スペースで区切られた名前空間 URI のリストを受け入れる属性も定義しています。これは、 switchrequiredExtensionsステートメントと組み合わせて、ユーザー エージェントの機能に基づいたセミインテリジェントなフォールバック ロジックを可能にします。例：

<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <switch>
    <!-- Render if extension is available -->
    <foreignObject width="100" height="50"
         requiredExtensions="http://example.com/foreign-object-spec-uri">
      <!-- Foreign object content -->
    </foreignObject>

    <!-- Else, do fallback logic -->
    <text x="0" y="20">Not available</text>
  </switch>
</svg>

実際にレンダリングされるものは、ユーザー エージェント (ブラウザ、Batik など) に完全に依存しているようです。同様に、HTML5 仕様にも短い宣伝文句があり、 内にある HTML 以外のコンテンツをすべて処理しますforeignObject。

SVG 仕様には、SVG 名前空間にない、SVG フラグメントにある、foreignObject 要素に含まれていない DOM 内の要素の処理に関する要件が含まれています。この仕様は、HTML 名前空間にない SVG フラグメントの要素の処理を定義していません。それらは、この仕様の観点からは、適合も不適合もないと見なされます。

元の投稿では、「HTML をレンダリングできます... MathML ができるように」と述べています。<math>要素は現在標準の HTML5であるため、ブラウザーはそのコードを HTML として解釈していると思います。したがって、技術的には、ブラウザーが MathMLをHTMLの一部としてレンダリングしていると言う方が正しいでしょう。

私の経験では、[X]HTML を使用することが最も互換性があり、おそらく本当に必要なものはすべて揃っています。上記の例は両方とも、親 HTML 名前空間を使用して機能します。ご覧のとおり、SVG コンテキストまたはHTML コンテキストの両方から HTML ドキュメント フラグメントを挿入できるため、非常に用途が広くなります。

于 2011-08-04T16:15:55.687 に答える
3

HTML5 のビデオとオーディオはどうですか?

デモ: http://double.co.nz/video_test/video.svg

于 2011-07-27T21:51:42.970 に答える