Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Extras

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

MathML Extras

Esta es una demostración técnica de algunos extras de Mozilla que aun no han sido definidos en la especificación MathML, pero que no se impide su uso por parte de otra especificación. No son portables , solo fueron creados para mostrar algunas características interesantes de usar código nativo desde el entorno del navegador. Se espera que otros renderizadores ignoren los atributos que no pueden comprender mientras estos extras permanezcan indefinidos.

El atributo title como una descripción emergente (desde XHTML)

HTML Content

<p>Mouse over either log to see a tooltip showing the title

<math display="block">
<mrow>
<mrow>
<msub title="Base-a log">
<mi>log</mi>
<mi>a</mi>
</msub>
<mo>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>

Rather than repeating the instructions,
some CSS might be used to provide a visual cue. For example
with the style rule: <code style="white-space: nowrap;">*[title] { color: blue; }</code>

<math class="cue" display="block">
<mrow>
<mrow>
<msub title="Base-a log">
<mi>log</mi>
<mi>a</mi>
</msub>
<mo>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mo>=</mo>
<mfrac>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>x</mi>
</mrow>
<mrow>
<mi title="Natural log">ln</mi>
<mo>&ApplyFunction;</mo>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>
</p>

CSS Content

math.cue *[title] { color: blue; }

Mezclando con otras marcas

HTML Content

<math display="block">
<mrow>
<mi>A</mi>
<mo>=</mo>
<mo>[</mo>
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd>
<mtext>
<img width="16" height="16"
src="http://www.mozilla.org/images/mozilla-16.png"
alt="mozilla-16" />
</mtext>
</mtd>
</mtr>
<mtr>
<mtd>
<mtext><input value="type" size="4"/></mtext>
</mtd>
<mtd><mn>4</mn></mtd>
</mtr>
</mtable>
<mo>]</mo>
</mrow>
</math>

<math display="block">
<msqrt>
<mpadded width="30px" height="15px" depth="15px" voffset="-15px">
<mtext>
<svg width="30px" height="30px">
<defs>
<radialGradient id="radGrad1" cx="50%" cy="50%" r="50%"
                            fx="50%" fy="50%">
<stop offset="0%"
                    style="stop-color:rgb(255,255,255); stop-opacity:1;"/>
<stop offset="100%"
                    style="stop-color:rgb(255,0,0); stop-opacity:.8;"/>
</radialGradient>
</defs>
<g transform="translate(15,15)">
<g>
<animateTransform attributeName="transform"
                                attributeType="XML" type="rotate"
                                from="360" to="0"
                                dur="15s" repeatCount="indefinite"/>
<g transform="translate(-15, -15)">
<path fill="url(#radGrad1)"
                      d="M 15 0 L 20 10 L 30 15 L 20 20 L 15 30
                         L 10 20 L 0 15 L 10 10"/>
</g>
</g>
</g>
</svg>
</mtext>
</mpadded>
</msqrt>
<mo>=</mo>
<msubsup>
<mo>∫</mo>
<mn>0</mn>
<mfrac>
<mi>π</mi>
<mn>2</mn>
</mfrac>
</msubsup>
<msup>
<mi>θ</mi>
<mtext>
<svg width="15px" height="15px">
<defs>
<radialGradient id="radGrad2" cx="50%" cy="50%" r="50%"
                          fx="50%" fy="50%">
<stop offset="0%"
                  style="stop-color:rgb(255,255,255); stop-opacity:1;"/>
<stop offset="100%"
                  style="stop-color:rgb(0,0,255); stop-opacity:.9;"/>
</radialGradient>
</defs>
<g>
<animateMotion path="M0,0 L3,0 L2,5 L5,5 L0,4 L5,2 z"
                         begin="0s" dur="0.5s" repeatCount="indefinite"/>
<circle fill="url(#radGrad2)" r="5px" cx="5px" cy="5px"/>
</g>
</svg>
</mtext>
</msup>
<mrow>
<mo>ⅆ</mo>
<mi>θ</mi>
</mrow>
</math>

<div style="width: 300px; margin-left: auto; margin-right: auto;">
<svg width="300px" height="250px">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
</linearGradient>

<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
</linearGradient>

<radialGradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/>
</radialGradient>
</defs>

<rect width="300" height="250" fill="url(#grad1)"/>

<g transform="translate(150,125)">
<g>
<animateTransform attributeName="transform"
                          attributeType="XML" type="rotate" from="0" to="360"
                          dur="6s" repeatCount="indefinite"/>

<g transform="translate(-50,-35)">
<rect width="100" height="70" fill="url(#grad2)"/>
<switch>
<foreignObject width="100" height="70"
                           requiredExtensions="http://www.w3.org/1998/Math/MathML">
<math display="block">
<mrow>
<mo>(</mo>
<mtable>
<mtr>
<mtd><mi>cos</mi><mi>θ</mi></mtd>
<mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd>
</mtr>
<mtr>
<mtd><mi>sin</mi><mi>θ</mi></mtd>
<mtd><mi>cos</mi><mi>θ</mi></mtd>
</mtr>
</mtable>
<mo>)</mo>
</mrow>
</math>
</foreignObject>
<text>rotation matrix</text>
</switch>
</g></g></g>
<g>
<animateMotion path="M 32,69 C 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z"
                     begin="0s" dur="20s" repeatCount="indefinite"/>
<animateTransform attributeName="transform"
                        attributeType="XML" type="scale"
            values="1;2;.5;1" keyTimes="0;.25;.75;1" dur="20s"
            repeatCount="indefinite"/>
<circle fill="url(#grad3)" r="30"/>
<g transform="translate(-30,-30)">
<switch>
<foreignObject width="60" height="60"
requiredExtensions="http://www.w3.org/1998/Math/MathML">
<math display="block">
<mrow>
<munderover>
<mo>∑</mo>
<mrow>
<mi>n</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mrow>
<mo>+</mo>
<mi>∞</mi>
</mrow>
</munderover>
<mfrac>
<msup>
<mi>α</mi>
<mi>n</mi>
</msup>
<mrow>
<mi>n</mi>
<mo>!</mo>
</mrow>
</mfrac>
</mrow>
</math>
</foreignObject>
<text>exp(α)</text>
</switch>
</g>
</g>
</svg>
</div>

 

JavaScript Incorporado

HTML Content

<math display="block">
<mfrac>
<mtext id="num">Mouse</mtext>
<mtext id="denum">Over</mtext>
</mfrac>
</math>

JavaScript Content

function whoIsThereAlert(evt)
{
  alert("Who is there?");
}
function attachListener(id)
{
  document.getElementById(id).addEventListener("mouseover", whoIsThereAlert);
}
function init()
{
  attachListener("num");
  attachListener("denum");
}

window.addEventListener("load", init);

 

Etiquetas y colaboradores del documento

Etiquetas: 
 Colaboradores en esta página: sinfallas, maedca
 Última actualización por: sinfallas,