Latex -формула в svg- рамке

Приведем еще один пример комбинирования svg-изображений и MathJax-формул. Раннее было показано, как вывести формулу на изображение. Здесь формула выводится на svg-баннере. Для заполнения баннера применен линейный градиентный фильтр. Получается эффектно.

Приведем теперь код, с помощью которого получена такая комбинация:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100"> <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <rect style="stroke-width: 10; stroke: #e34c26;" width="100%" height="100%" fill="url(#grad3)"/> <foreignObject x="42%" y="30" width="100" height="100"> <div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Times; font-size:18px"> \(\displaystyle{\frac{-b\pm\sqrt{b^2-4ac}}{2a}}\) </div> </foreignObject></svg> Для отображения формулы понадобится подключить библиотеку MathJax:
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"> </script> Для набора формулы можно воспользоваться нашим Latex-редактором (см.кнопка вверху страницы). Обратите внимание - баннер адаптивный, а формула в баннере центрируется.