Skip to content
GitLab
Open
Issue created by Davide P. Cervone@dpvcContributor

Output in scaled foreignObject inside SVG in WebKit doesn't display

If MathJax is rendered inside a <foreignObject> tag inside a <g> with a scaling transformation in an SVG image, then WebKit will not show the math properly (it will not be scaled and is positioned incorrectly, often falling outside the clipping rectangle for the math, so it disappears.

See the discussion forum for details.

Example:

<html>
<head title="Example 1">
  <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g transform="scale(2)">
      <foreignObject width="300" height="300">
        <div>\(G^2\)</div>
      </foreignObject>
    </g>
  </svg>
</body>
</html>