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

Replace an image with another

Expand Messages
  • xyz1332003
    I want to click on the SVG square and change it to a circle; However I am not trying to generate a circle using JavaScript, because eventually I want the
    Message 1 of 3 , Oct 1, 2009
    • 0 Attachment
      I want to click on the SVG square and change it to a circle; However I am not trying to generate a circle using JavaScript, because eventually I want the circle image to be one of many images in a database.

      Can I store these images between <defs> tags and use JavaScript to call on each image individually to replace the square image?

      If not, how can I store these SVG images and call each one to replace the square?

      Thanks.

      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
      "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120">

      <script type="text/ecmascript"><![CDATA[

      function replaceRect(evt) {
      var rect = evt.target;
      rect.parentNode.replaceChild(rect,circle);
      }

      ]]></script>

      <defs>

      <circle id="circle" cx="60" cy="60" r="50" fill="green"/>

      </defs>

      <g>
      <rect width="100" height="100" x="20" y="20" fill="blue" onclick="replaceRect(evt)"/>
      </g>

      </svg>
    • Olaf Schnabel
      Hi xyz, you have to define the variable circle in your function replaceRect. This code should work: var rect = evt.target; var circle =
      Message 2 of 3 , Oct 1, 2009
      • 0 Attachment
        Hi xyz,

        you have to define the variable circle in your function replaceRect.
        This code should work:

        var rect = evt.target;
        var circle = document.getElementById("circle");
        rect.parentNode.replaceChild(circle,rect);

        Best regards
        Olaf

        xyz1332003 wrote:
        > I want to click on the SVG square and change it to a circle; However I am not trying to generate a circle using JavaScript, because eventually I want the circle image to be one of many images in a database.
        >
        > Can I store these images between <defs> tags and use JavaScript to call on each image individually to replace the square image?
        >
        > If not, how can I store these SVG images and call each one to replace the square?
        >
        > Thanks.
        >
        > <?xml version="1.0" encoding="UTF-8" standalone="no"?>
        > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
        > "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
        > <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120">
        >
        > <script type="text/ecmascript"><![CDATA[
        >
        > function replaceRect(evt) {
        > var rect = evt.target;
        > rect.parentNode.replaceChild(rect,circle);
        > }
        >
        > ]]></script>
        >
        > <defs>
        >
        > <circle id="circle" cx="60" cy="60" r="50" fill="green"/>
        >
        > </defs>
        >
        > <g>
        > <rect width="100" height="100" x="20" y="20" fill="blue" onclick="replaceRect(evt)"/>
        > </g>
        >
        > </svg>
        >
        >

        --
        Dr. Olaf Schnabel
        Institute of Cartography
        ETH Zurich
        Wolfgang-Pauli-Str. 15
        8093 Zurich
        Switzerland

        tel: ++41 44 633 3031
        fax: ++41 44 633 1153
        e-mail: oschnabel@...
        www private: http://www.ika.ethz.ch/schnabel
        www project: http://www.e-cartouche.ch
        www institute: http://www.karto.ethz.ch
      • xyz1332003
        Thanks Olaf. That was much simpler than I was expecting. I wasn t even sure this was possible.
        Message 3 of 3 , Oct 2, 2009
        • 0 Attachment
          Thanks Olaf.

          That was much simpler than I was expecting. I wasn't even sure this was possible.


          --- In svg-developers@yahoogroups.com, Olaf Schnabel <oschnabel@...> wrote:
          >
          > Hi xyz,
          >
          > you have to define the variable circle in your function replaceRect.
          > This code should work:
          >
          > var rect = evt.target;
          > var circle = document.getElementById("circle");
          > rect.parentNode.replaceChild(circle,rect);
          >
          > Best regards
          > Olaf
        Your message has been successfully submitted and would be delivered to recipients shortly.