Room

Composition avec SVG et MathML

Cette page présente des exemples de compositions avec des éléments SVG et MathML en utilisant différentes méthodes.

Utilisation de la fonction h()

La fonction h() de Room peut être utilisée pour produire des éléments SVG ou MathML.

Le plus simple pour cela est de créer une fonction s() qui produit des éléments SVG et une fonction m() qui produit des éléments MathML.

Le code suivant permet de créer ces deux fonctions :

const s = Room.h.bind("http://www.w3.org/2000/svg");
const m = Room.h.bind("http://www.w3.org/1998/Math/MathML");

Avec ces deux fonctions il est alors possible de composer des éléments comme sur cet exemple :

const i = s("svg", {width: "20px", height: "20px"},
	s("rect", {width: 20, height: 20, fill: "red"})
);
const v = m("math", m("mi", "π"), m("mo", "≈"), m("mn", Math.PI));

Les éléments i et v peuvent être ajoutés dans un élément HTML avec une ligne de code :

document.getElementById("smExample").append(i, " ", v);

Ce qui donne le résultat suivant :

Cet exemple présente une possibilité pour produire des éléments SVG ou MathML, mais comme avec la fonction h() et HTML, ce n’est pas forcément la plus pratique. Les exemples suivants sont donc basés sur l’utilisation de la fonction elements().

Utilisation de SVG

Cet exemple utilise la fonction elements() de Room pour représenter un logo créé par l’artiste anglais Harvey Rayner et sur lequel est basé le logo du W3C SVG Working Group.

Ce logo peut être généré dans le HTML de la page en utilisant Room et du code JavaScript générant un élément <svg> comme ici :

const {
	svg, use, g, circle, path
} = Room.elements("http://www.w3.org/2000/svg");

const logo = svg({viewBox: "-300 -300 600 600"},
	use({href: "#a", stroke:"#007FFF", stroke_width: 76.7}),
	g({id: "a"},
		g({id: "b"},
			g({id: "c", fill: "#fff"},
				circle({id: "d", cx: -202, r: 45.2}),
				path({d: "m201-32-402,0 0,64 402,0"}),
				use({href: "#d", x: 404})
			),
			use({href: "#c", transform: "rotate(90)"})
		),
		use({href: "#b", transform: "rotate(45)"})
	)
);

La première ligne du code permet de récupérer les éléments spécifiques à SVG via la fonction elements() en lui passant le nameSpace de SVG. La deuxième ligne permet de créer l’élément <svg> qui peut être ensuite inséré dans un autre élément du document.

Utilisation de MathML

Cet exemple utilise la fonction elements() de Room pour représenter la formule de Leibniz-Gregory (une solution pour calculer le nombre Pi) en utilisant un élément <math>.

Cette formule peut être générée dans le HTML de la page en utilisant Room et du code JavaScript générant un élément <math> comme ici :

const {
	math, mi, mo, munderover, mrow, mn, mfrac,  msup
} = Room.elements("http://www.w3.org/1998/Math/MathML");
	
const formulaLeibnizGregory = math(
	mi("π"), mo("="),
	munderover(
		mrow(mo("∑")),
		mrow(mi("n"), mo("="), mn("0")),
		mrow(mi("∞"))
	),
	mfrac(
		mrow(
			mn("4"), mo("×"),
			msup(
				mrow(mrow(mo("("), mo("-"), mn("1"), mo(")"))),
				mrow(mi("n"))
			)
		),
		mrow(mn("2"), mi("n"), mo("+"), mn("1"))
	)
);

La première ligne du code permet de récupérer les éléments spécifiques à MathML via la fonction elements() en lui passant le nameSpace de MathML. La deuxième ligne permet de créer l’élément <math> qui peut être ensuite inséré dans un autre élément du document.

Dans l’exemple Calcul de Pi, nous verrons qu’il est possible de rendre dynamique cette formule.