Edited at

WebKit系ブラウザでforeignObject下に構築したMathJaxのsvgが表示されない

More than 3 years have passed since last update.


概要

多分こういうのが動かない.(特に条件を詳しく調べたわけではない)

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>

<svg>
<g transform="translate(100, 0)">
<foreignObject width="300" height="300">
$$e^{i\theta} = \cos\theta + i\sin\theta$$
</foreignObject>
</g>
</svg>

原因はレンダラがforeignObjectの上にある要素に指定されたtransformを全部無視してしまうからぽい. WebKit系エンジン特有のバグ.単にtranslateが無視されるだけならいいが, 最初何も表示されないのにCtrl+Tabとかでタブを移動して戻ってくると(0,0)に表示されてたりしてかなり混乱させられた.


解決策

.MathJax_SVG_Display {

position: static !important;
}


まとめ

やっぱinline svgはつらい.


参考