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

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

7 голосов
/ 27 июля 2011

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>

Ответы [ 3 ]

9 голосов
/ 04 августа 2011

Технически, все может идти в теге 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>

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

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

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

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

2 голосов
/ 28 июля 2011

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

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

1 голос
/ 15 августа 2011

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

...