Edit contents of embedded SVG file using javascript

views:

answers:

Edit contents of embedded SVG file using javascript

Hello!

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 javascript 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:

Color the x^2 red
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.

moontear 2010-10-04 16:07:10

Thanks. This was exactly what I asked for. Although I found an easier solution to writing my math equations. I just convert my latex-equations to png. Then add them to a canvas using Raphaël. When I want to my equation to change I just update the image with a new png file. This solution requires a lot less coding, but at the expense of loading lots of png files.

Michael 2010-10-05 11:43:37

I always like solutions requiring less coding. If your question really is about Math Equations you should also read up on "MathML". Most recent browsers support MathML - except IE.

moontear 2010-10-05 11:54:09

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

Erik Dahlström 2010-10-05 07:37:31

I currently just need to display the equations themselves, but thanks anyway :)

Michael 2010-10-05 11:47:28

Ah, my bad :) Misread your question, thought you were displaying a plot of that function. Assuming your equation is text, just wrap a tspan element around the part you want to style, e.g `<tspan fill="red">x^2</tspan>`. To "remove" a part from the equation, assuming that means you want to temporarily hide it, you can use `display="none"` on the 2x part (again, wrap it in a tspan if necessary).

Erik Dahlström 2010-10-05 13:19:46

ansaurus

tags:

views:

answers:

Edit contents of embedded SVG file using javascript

related questions