Loading ...
Sorry, an error occurred while loading the content.

How can I change the text in my SVG by using javascript?

Expand Messages
  • harry_ha_ha
    Hey people, just wondering if anyone can help me on this one. In this code I am using a boolean to change the fill attribute in a table in my SVG. I am have
    Message 1 of 2 , May 3, 2004
    • 0 Attachment
      Hey people, just wondering if anyone can help me on this one. In this
      code I am using a boolean to change the fill attribute in a table in
      my SVG. I am have some text in the table which says available. Can
      anyone tell me how I could have available appear in a true situation
      and booked in a false situation.

      Here is the code :

      <svg width='100%' height='600' onload='dessin(evt)'>
      <script><![CDATA[
      var svgdoc,root, floorplan;

      function dessin(evt)
      {
      svgdoc=evt.target.ownerDocument;
      root = svgdoc.documentElement;

      var status = true; // is the table booked or available?

      var table6_A = svgdoc.getElementById("table6_A");

      if(status == true)
      {
      node = table6_A.cloneNode(true);
      node.setAttribute('fill','orange');
      table6_A.parentNode.appendChild(node);
      }
      else
      {
      node = table6_A.cloneNode(true);
      node.setAttribute('fill','red');
      table6_A.parentNode.appendChild(node);
      }
      }


      ]]>
      </script>
      <g id='floorplan'>
      <defs>

      <desc> Here is a description of a table for six</desc>
      <symbol id="table_6" overflow="visible">
      <path d="M5 30 5 -10 L -100 -60 -130 -40 -129 -5 L -130 -40 -35 10 -
      35 50 -35 10 5 -10 z"
      stroke-linecap="round" transform="scale(1.2, .6)" stroke-width="3"
      stroke="black" />
      <text id="table_6_text" transform="rotate(15)" font-size="12pt" x="-
      120" y="10" fill="black">Available</text>
      </symbol>

      </defs>

      <g id='floor'/>



      <g>
      <use id="table6_A" xlink:href="#table_6" x="350" y="120" />
      <use id="table6_B" xlink:href="#table_6" x="510" y="170" fill="
      blue" />
      <use id="table6_C" xlink:href="#table_6" x="675" y="225" />
      <use id="table6_D" xlink:href="#table_6" x="840" y="280" />

      </g>

      <linearGradient id="brown_2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:saddlebrown; stop-opacity:1"/>
      <stop offset="100%" style="stop-color:darkgoldenrod; stop-opacity:1"/>
      </linearGradient>

      </g>
      </svg>
    • Jérôme Tricand de la Goutte
      try something like if (status== true ) document.getElementById( table6_text ).firstChild.data= available else
      Message 2 of 2 , May 3, 2004
      • 0 Attachment
        try something like
        if (status=='true')
        document.getElementById('table6_text').firstChild.data="available"
        else
        document.getElementById('table6_text').firstChild.data="booked"

        Jérôme

        harry_ha_ha wrote:

        > Hey people, just wondering if anyone can help me on this one. In this
        > code I am using a boolean to change the fill attribute in a table in
        > my SVG. I am have some text in the table which says available. Can
        > anyone tell me how I could have available appear in a true situation
        > and booked in a false situation.
        >
        > Here is the code :
        >
        > <svg width='100%' height='600' onload='dessin(evt)'>
        > <script><![CDATA[
        > var svgdoc,root, floorplan;
        >
        > function dessin(evt)
        > {
        > svgdoc=evt.target.ownerDocument;
        > root = svgdoc.documentElement;
        >
        > var status = true; // is the table booked or available?
        >
        > var table6_A = svgdoc.getElementById("table6_A");
        >
        > if(status == true)
        > {
        > node = table6_A.cloneNode(true);
        > node.setAttribute('fill','orange');
        > table6_A.parentNode.appendChild(node);
        > }
        > else
        > {
        > node = table6_A.cloneNode(true);
        > node.setAttribute('fill','red');
        > table6_A.parentNode.appendChild(node);
        > }
        > }
        >
        > ]]>
        > </script>
        > <g id='floorplan'>
        > <defs>
        >
        > <desc> Here is a description of a table for six</desc>
        > <symbol id="table_6" overflow="visible">
        > <path d="M5 30 5 -10 L -100 -60 -130 -40 -129 -5 L -130 -40 -35 10 -
        > 35 50 -35 10 5 -10 z"
        > stroke-linecap="round" transform="scale(1.2, .6)" stroke-width="3"
        > stroke="black" />
        > <text id="table_6_text" transform="rotate(15)" font-size="12pt" x="-
        > 120" y="10" fill="black">Available</text>
        > </symbol>
        >
        > </defs>
        >
        > <g id='floor'/>
        >
        > <g>
        > <use id="table6_A" xlink:href="#table_6" x="350" y="120" />
        > <use id="table6_B" xlink:href="#table_6" x="510" y="170" fill="
        > blue" />
        > <use id="table6_C" xlink:href="#table_6" x="675" y="225" />
        > <use id="table6_D" xlink:href="#table_6" x="840" y="280" />
        >
        > </g>
        >
        > <linearGradient id="brown_2" x1="0%" y1="0%" x2="100%" y2="0%">
        > <stop offset="0%" style="stop-color:saddlebrown; stop-opacity:1"/>
        > <stop offset="100%" style="stop-color:darkgoldenrod; stop-opacity:1"/>
        > </linearGradient>
        >
        > </g>
        > </svg>
        >
        >
        > -----
        > To unsubscribe send a message to: svg-developers-unsubscribe@yahoogroups.com
        > -or-
        > visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
        > ----
        > Yahoo! Groups Links
        >
        >
        >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.