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>