Page 1 of 2 12 LastLast
Results 1 to 10 of 15

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

  1. #1
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Unfortunately as Daniel said, this is impossible with JavaScript. The best you can do is convert an svg into a <canvas>.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. #4
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #5
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Where on the site is this feature? I would suggest contacting wiki pathways and asking them about it.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. #6
    Join Date
    Mar 2011
    Location
    N 11░ 19' 0.0012 E 142░ 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

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

    Using something like this -

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

  7. #7
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    The problem isn't editing, it's reading.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  8. #8
    Join Date
    Mar 2011
    Location
    N 11░ 19' 0.0012 E 142░ 15' 0
    Posts
    1,521
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    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...

  9. #9
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    That seems like a lot of hassle, wouldn't you be better off just giving the image a value, and reading the value?
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  10. #10
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •