Edit contents of embedded SVG file using javascript

I have an SVG file with some math equations. Lets say I include this file into my html document. Now what I'd like to do is to make some simple modifications to the contents of the svg using javascri开发者_StackOverflowpt in the html document.

A specific example

My svg file contains a nicely formatted version of this equation:

x^2 + 2x + 1 = 0

and I'd like to make the following changes:

1. Color the x^2 red
2. Remove 2x from the equation

Thanks.

What you need to do is to attach yourself onto the load event of the SVG image. There is a nice SVG jQuery Plugin to do just that for you (and some more):

You should also check out the good resource on Javascript animating SVGs from David Dailey.

If you want interactive mathematical equations, then you might want to have a look at JSXGraph.

From http://docs.mathjax.org/en/latest/output.html

Currently, MathJax can render math in three ways:

Using HTML-with-CSS to lay out the mathematics,
Using SVG to lay out the mathematics,
or Using a browser’s native MathML support.