Что можно отобразить в элементе 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>

person james.garriss    schedule 27.07.2011    source источник


Ответы (3)


Технически все, что может помещаться в тег foreignObject. Вопрос в том, будет ли это поддерживать пользовательский агент. Для этого, кажется, нет окончательного ответа. Сама спецификация SVG довольно (намеренно) расплывчата:

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

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

<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-контенте, найденном в foreignObjects.

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

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

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

person Courtney Christensen    schedule 04.08.2011
comment
Итак, с одной стороны, вы даете мне ответ по спецификации: спецификации не будут окончательными. Ваш ответ делает этот случай очень хорошим и полезным. С другой стороны, я ищу прагматичный ответ: что работает сегодня? И есть как минимум 2 языка, которые можно отображать, HTML и MathML. Что еще? - person james.garriss; 09.08.2011
comment
@james, к сожалению, у меня нет более определенного ответа ... Я открыт для одного, если он действительно существует. Но я знаю, что «то, что работает сегодня», зависит от браузера. Например, MathML в Chrome (13b) отображается как обычный текст (как и ВСЕ MathML). Если вы перейдете к другим парсерам/визуализаторам (например, Batik), результаты будут сильно различаться. Если вы предоставляете контент, который он не умеет отображать, его следует просто игнорировать. Однако я нашел ссылку на атрибут requiredExtensions (см. обновленный пост). Это должно, по крайней мере, дать вам возможность обеспечить резервную логику. Надеюсь, это поможет немного больше... - person Courtney Christensen; 09.08.2011
comment
Интересный. Я не видел резервный вариант раньше. Спасибо. - person james.garriss; 09.08.2011

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

Демонстрация: http://double.co.nz/video_test/video.svg

person jbeard4    schedule 27.07.2011
comment
Соглашаться. Но я уже перечислил HTML5. Что еще помимо HTML и MathML? - person james.garriss; 28.07.2011
comment
Я думаю, что набор стандартных веб-технологий, поддерживаемых большинством браузеров, — это HTML, CSS, JavaScript, SVG и Canvas. Некоторые также поддерживают MathML. Я думаю, что помимо этого вы начинаете переходить к плагинам и функциям, специфичным для браузера. Например, вы, вероятно, можете встроить Flash-ролики и Java-апплеты внутрь SVG, используя тег объекта HTML внутри тега ForeignObject. Там, вероятно, есть какие-то странные, устаревшие вещи для Internet Explorer, которые вы могли бы добавить туда. Что еще вы имеете в виду? - person jbeard4; 28.07.2011
comment
Эм, ну, как раз то, что я спросил. Какие языки могут использоваться в элементе foreignObject, который находится в элементе svg, который является частью страницы HTML5, которая может отображаться современными браузерами. Возможно, HTML и MathML — единственные ответы. Если да, то все в порядке. - person james.garriss; 28.07.2011

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

person james.garriss    schedule 15.08.2011