Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Constructing an Inline SVG Diagram using Javasctipt with JSON

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #240550
    tonyf
    Participant

    I’m currently working on a project that involves building a dynamic diagram and am looking at using SVGs for this.

    Based on this, was looking at getting some assistance with the following queries please and to see also, whether what I am after is actually possible with SVGs.

    1) Using javascript and json,is it possible to build an SVG diagram within a HTML page dynamically, based on my json data?

    Basically, I want to construct say a rectangle box within the page, where I can have say 1 to 10 svg lines as inputs into the rectangle box, on the left hand side. To determine how many actual lines appear, will come from my json object.

    So as mentioned above, is this possible and if so, how might this be setup to draw this inline svg diagram?

    2) Again, using javascript, is it possible to place hyperlink labels on these svg lines, again based on info within the json object?

    I started playing with static inline SVG but unsure how to construct this using javascript instead, to cover off my two points above, i.e.:

    <body>
      <h1>My SVG Test</h1><hr/>
    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    
    <text x="465" y="90" fill="red">Heading One</text>
    <image x="100" y="110" width="50%" height="50%"
       xlink:href="http://my-image.com/myimg.jpg" />
    
    <line x1="25" y1="80" x2="350" y2="80" style="stroke: #000000; stroke-width: 2;"/>
    `
    
    </svg>
    
    </body>
    

    Thanks.

    #240563
    Shikkediel
    Participant

    The question’s quite broad… but yes, that is definitely possible. You’d be best of by using jQuery which has a bunch of built in methods to create HTML dynamically. Also for getting files such as the JSON data. The latest version I inspected should be able to handle SVGs better as well (it was a bit limited before). It can always be mixed with regular JS of course for where it might still be lacking.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.