Что можно отобразить в элементе foreignObject, когда SVG встроен в HTML5?

HTML5 поддерживает SVG через 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>
7
html5 mathml svg

3 ответов

технически, что угодно можете поехать в foreignObject тег. Вопрос в том, будет ли пользовательский агент поддерживать его. На это, кажется, нет окончательного ответа. The SVG spec сам по себе довольно (намеренно) расплывчато об этом:

элемент 'foreignObject' позволяет включить внешнее пространство имен, графическое содержимое которого рисуется другим агентом пользователя. Включенный внешний графический контент подлежит SVG преобразования и композиция.

к счастью, спецификаций и определяет на requiredExtensions атрибут, который принимает разделенный пробелом список URIs пространства имен. Это, в сочетании с переключатель оператор учитывает полу-умную резервную логику основанную на возможностях потребител-агента. пример:

<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>

то, что на самом деле визуализируется, похоже, полностью зависит от агента пользователя (браузера, Батик и др.). Таким образом, аналогично, спецификация HTML5 имеет краткое описание, мытье рук на любом не-HTML контента, найденного в foreignObjects.

спецификация SVG включает требования, касающиеся обработки элементов в DOM, которые не находятся в пространстве имен SVG, которые находятся во фрагментах SVG и которые не включены в элемент foreignObject. Эта спецификация не определяет обработку элементов в SVG-фрагментах, не входящих в пространство имен HTML; они не считаются ни соответствующими, ни несоответствующими с точки зрения данной спецификации.

в исходном сообщении говорится ,что"HTML может быть отображен...как и MathML". С <math> элементы стандартный HTML5, Я считаю, что браузер интерпретирует этот код как HTML. Таким образом, было бы технически правильнее сказать, что браузер отображает MathML как часть HTML-код.

и по моему опыту, придерживаясь [X]HTML будет наиболее совместимым...и, возможно, все, что тебе действительно нужно. Ваши примеры выше как работать с помощью родительских HTML-пространство. Как вы можете видеть, вы можете вставлять фрагменты HTML-документа из обоих SVG context или контекст HTML, поэтому он может быть довольно универсальным.

9

Как насчет HTML5 Видео и аудио?

демо:http://double.co.nz/video_test/video.svg

2

Я предпочитаю не отвечать на свой собственный вопрос, но, похоже, что ответ: ничего, кроме HTML и MathML в это время (Aug 2011). Когда появится новая информация, я удалю свой ответ.

1