how to search text and highlight that text area in a svg image using javascript?

[saikat]

Hello Friends...

I have a project in which I have a SVG image with some text in it. I want to upload this image in my website, so that one can easly search text within the image. I want to use javascript. Can anyone give me some idea that how can search text within the image and highlight the that text area? Also, I want to put a search box on the top of the iamge.

[djr33]

Is it even possible to manipulate a SVG image using Javascript? I don't think SVG images are well supported in browsers. I know you can view the files (but only the files, not embedded in a webpage) but that often slows down my browser significantly. On wikipedia for example, when they are embedded they are often embedded at a much lower resolution in another format (eg PNG).

I don't have any answer for you (and I honestly wouldn't be surprised if no one here does), but this is an interesting question. Again, though, the first question is whether an SVG image can be manipulated with Javascript. In theory I don't see why not, but I don't know why/if that would be allowed by browsers or included by default.

[bernie1227]

Unfortunately as Daniel said, this is impossible with JavaScript. The best you can do is convert an svg into a <canvas>.

[saikat]

Hi dir33 and bernie1227.....
Thank you for your reply and suggestions. Can you please look the website "Wikipathways"? The text search feature within an image in this website is helpful. Same feature I want to give in my website. If you have any idea then please reply to me.

Thanks in advance.

[bernie1227]

Where on the site is this feature? I would suggest contacting wiki pathways and asking them about it.

[keyboard]

After a quick google, it looks like you can edit svgs with js...

Using something like this -

   var S=document.getElementById("sv")
   var SD=S.getSVGDocument();
   E=SD.getElementById('E');
   E.setAttribute("fill", v);

[bernie1227]

The problem isn't editing, it's reading.

[keyboard]

You could create the svg with javascript, then when someone searchs, search the text used to create the svg, highlight it if it's there, then re-write the svg...

It would be tricky, but it should work...

[bernie1227]

That seems like a lot of hassle, wouldn't you be better off just giving the image a value, and reading the value?

[saikat]

Thank you everyone......
In my project, I have to read the SVG file and also want to put a serach box, where an user can search a text string. If it will match then the text string would be highlighted. The same feature is avialble in "Inkspace". In Wikipathways this feature is also avialable. There is a search box on the pathway image and an user can search their protein of interest inside the pathway image. Actually I have some images in SVG file format and the text elements are around thousands. So I have to give the search facilty on these images. I am using SVG because the text elements of the images would be dynamic. Therefore, I can't use other file format. Can anybody tell me how to highlight a specific area on an image? Can I use javascript?