editing an inkscape svg in javascript

Question

I've created an svg in inkscape with two different colored rectangles and 4 text-overlays on top. I am currently able to store the svg and call it in javascript and have it show up on the webpage. However, we are trying to make the text dynamic in order to use one svg to represent the data stored in the database multiple times. This means every time the svg is called in the javascript, we need to change the inkscape svg parameters to have different text display.

Any ideas? We are having issues accessing inside of the inkscape svg. We know each text item has its own id, but we haven't been able to change any parameters of the inkscape svg in the javascript code.

Thanks!

code:

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="500"
   height="50"
   id="svg5768"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="fusiongene2.svg">
  <defs
     id="defs5770" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="2"
     inkscape:cx="148.31325"
     inkscape:cy="50.507627"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1440"
     inkscape:window-height="838"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5773">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-1002.3622)">
    <rect
       style="fill:#00ff00;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none"
       id="rect4312"
       width="276.7818"
       height="48.487324"
       x="1.0101526"
       y="1.5126777"
       transform="translate(0,1002.3622)" />
    <rect
       style="fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.1;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect4314"
       width="235.36554"
       height="48.487324"
       x="263.64981"
       y="1003.8749" />
    <text
       xml:space="preserve"
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       x="13.5"
       y="1037.8622"
       id="text4316"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4318"
         x="13.5"
         y="1037.8622"
         style="font-size:20px">Gene1</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       x="169.5"
       y="1037.8622"
       id="text4320"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4322"
         x="169.5"
         y="1037.8622"
         style="font-size:20px">Chrom1</tspan></text>
    <rect
       y="1002.8749"
       x="0.010152578"
       height="49.487324"
       width="277.7818"
       id="rect4324"
       style="fill:#00ff00;fill-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none" />
    <rect
       y="1002.8298"
       x="263.64981"
       height="49.532394"
       width="235.90593"
       id="rect4326"
       style="fill:#0000ff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.10118789;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
    <text
       sodipodi:linespacing="125%"
       id="text4328"
       y="1006.8973"
       x="13.915162"
       style="font-size:38.80659103px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       xml:space="preserve"
       transform="scale(0.97016475,1.0307528)"><tspan
         style="font-size:19.40329552px"
         y="1006.8973"
         x="13.915162"
         id="tspan4330"
         sodipodi:role="line">Gene1</tspan></text>
    <text
       sodipodi:linespacing="125%"
       id="text4332"
       y="1006.8973"
       x="145.32069"
       style="font-size:38.80659103px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       xml:space="preserve"
       transform="scale(0.97016475,1.0307528)"><tspan
         style="font-size:19.40329552px"
         y="1006.8973"
         x="145.32069"
         id="tspan4334"
         sodipodi:role="line">Chrom1</tspan></text>
    <text
       sodipodi:linespacing="125%"
       id="text4328-1"
       y="1006.8973"
       x="276.59357"
       style="font-size:38.80659103px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       xml:space="preserve"
       transform="scale(0.97016475,1.0307528)"><tspan
         style="font-size:19.40329552px"
         y="1006.8973"
         x="276.59357"
         id="tspan4330-7"
         sodipodi:role="line">Gene2</tspan></text>
    <text
       sodipodi:linespacing="125%"
       id="text4332-4"
       y="1006.8973"
       x="407.99911"
       style="font-size:38.80659103px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       xml:space="preserve"
       transform="scale(0.97016475,1.0307528)"><tspan
         style="font-size:19.40329552px"
         y="1006.8973"
         x="407.99911"
         id="tspan4334-0"
         sodipodi:role="line">Chrom2</tspan></text>
  </g>
</svg>

Here is the inkscape code. You can see that there the text we are trying to modify towards the bottom as generic names instead of specific: — user1453752, Jun 13 '12 at 14:16
You should save as "Optimized svg" in Inkscape, that will produce output much more suited for putting on the web. — Erik Dahlström, Jun 13 '12 at 22:02

score 0 · Answer 1 · edited May 23 '17 at 12:29

Depending on how your SVG is included in the HTML, you might simply be able to reference the tspan elements with getElementById like any other:

document.getElementById('tspan4330').firstChild.textContent = '1 Rob was here';
document.getElementById('tspan4334').firstChild.textContent = '2 Rob was here';
document.getElementById('tspan4330-7').firstChild.textContent = '3 Rob was here';
document.getElementById('tspan4334-0').firstChild.textContent = '4 Rob was here';

Demo.

If you've included it in an object then you need to listen to the load event and the grab the contentDocument as described in this answer.

score 0 · Answer 2 · answered Jun 07 '13 at 22:45

0

I had the same problem yesterday. For me its the same as robertc's answer only I did:

document.getElementById('element's id').textContent = 'your new text';

answered Jun 07 '13 at 22:45

nemo

593
2
8
22

editing an inkscape svg in javascript

2 Answers2