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

Re: [svg-developers] SVG with html control

Expand Messages
  • ddailey
    Sure Mark, Take a look at the first example at http://srufaculty.sru.edu/david.dailey/svg/intro/PartF_C.html It works in IE/ASV, Opera 9.23, and FF (except for
    Message 1 of 13 , Oct 6, 2007
    • 0 Attachment
      Sure Mark,

      Take a look at the first example at http://srufaculty.sru.edu/david.dailey/svg/intro/PartF_C.html

      It works in IE/ASV, Opera 9.23, and FF (except for the SMIL). The color of the SVG oval is varied through values chosen in an HTML <select>.

      The second example uses turbulence filters as controlled by radio buttons in HTML, so it also won't work in FF, though it is working for me in IT and Opera.

      The third example -- well let's just not talk about that one (there is an error of some sort in my very old code that prevents the keystroke event from being detected in Opera.)

      A slightly more adventurous example is given here.

      http://srufaculty.sru.edu/david.dailey/svg/intro/checkerembed.html

      It embeds clipPaths into an SVG from HTML and seems to be working in FF, IE and Opera.

      hope this helps,
      David
      ----- Original Message -----
      From: mark_alsisto
      To: svg-developers@yahoogroups.com
      Sent: Saturday, October 06, 2007 2:39 AM
      Subject: Re: [svg-developers] SVG with html control



      hi david,
      do you have the simpler example that you mention. i really need your help.
      i just need a simple example of how to show and hide a text in svg using
      html radiobutton control...
      from there...i will try to understand the coding and implement it with my
      work...

      thanx...for your reply

      ddailey wrote:
      >
      > In http://srufaculty.sru.edu/david.dailey/svg/waves.html
      > (which should run in Opera and IE/ASV) little waves that distort an image
      > are created from parameters given by
      > HTML form elements and then are embedded into the DOM and animated with
      > SMIL.
      >
      > It also takes advantage of the file upload (input type-file) in HTML that
      > is rather hard to duplicate in SVG alone.
      >
      > I have some simpler examples laying about somewhere. If such would prove
      > useful, please holler.
      >
      > David Dailey
      > ----- Original Message -----
      > From: mark_alsisto
      > To: svg-developers@yahoogroups.com
      > Sent: Sunday, September 30, 2007 11:40 PM
      > Subject: [svg-developers] SVG with html control
      >
      >
      > hi,
      > can anyone give me a simple example on how i can control svg with the
      > use of html control. for example, there are checkboxes that controls
      > whether to display text in svg.
      >
      > thanx...
      >
      >
      >
      >
      >
      > [Non-text portions of this message have been removed]
      >
      >
      >

      --
      View this message in context: http://www.nabble.com/SVG-with-html-control-tf4550488.html#a13071161
      Sent from the Gnome - librsvg - Dev mailing list archive at Nabble.com.





      [Non-text portions of this message have been removed]
    • mark_alsisto
      hi, can you help me see what s wrong with this...i cant seem to get it right(slow learner).
      Message 2 of 13 , Oct 7, 2007
      • 0 Attachment
        hi,
        can you help me see what's wrong with this...i cant seem to get it
        right(slow learner).

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" >
        <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
        var svgdoc, textmap,showHide
        function prepare()
        {
        svgdoc=document.sv.getSVGDocument();
        textmap=svgdoc.getElementById('names');

        }

        function visibleText(showhide)
        {
        textmap.setAttribute("visibility", showHide);
        }


        </script>
        </head>

        <body onload="prepare()">
        //then here is where i embed my svg file.
        <form name="form">
        show<input id="show" type="radio" name="visible" checked="checked"
        onclick="visibleText(visible)"/><br />
        hide<input id="hide" type="radio" name="visible"
        onclick="visibleText(hidden)"/>

        </form>
        </body>
        </html>
        i'm using IE7 and the svg file displayed properly.
        but whenever i clicked the radio button nothing changes. Instead, the msg
        "error on page" were shown at the brower's status bar...please guide me.




        ddailey wrote:
        >
        > Sure Mark,
        >
        > Take a look at the first example at
        > http://srufaculty.sru.edu/david.dailey/svg/intro/PartF_C.html
        >
        > It works in IE/ASV, Opera 9.23, and FF (except for the SMIL). The color of
        > the SVG oval is varied through values chosen in an HTML <select>.
        >
        > The second example uses turbulence filters as controlled by radio buttons
        > in HTML, so it also won't work in FF, though it is working for me in IT
        > and Opera.
        >
        > The third example -- well let's just not talk about that one (there is an
        > error of some sort in my very old code that prevents the keystroke event
        > from being detected in Opera.)
        >
        > A slightly more adventurous example is given here.
        >
        > http://srufaculty.sru.edu/david.dailey/svg/intro/checkerembed.html
        >
        > It embeds clipPaths into an SVG from HTML and seems to be working in FF,
        > IE and Opera.
        >
        > hope this helps,
        > David
        > ----- Original Message -----
        > From: mark_alsisto
        > To: svg-developers@yahoogroups.com
        > Sent: Saturday, October 06, 2007 2:39 AM
        > Subject: Re: [svg-developers] SVG with html control
        >
        >
        >
        > hi david,
        > do you have the simpler example that you mention. i really need your
        > help.
        > i just need a simple example of how to show and hide a text in svg using
        > html radiobutton control...
        > from there...i will try to understand the coding and implement it with
        > my
        > work...
        >
        > thanx...for your reply
        >
        > ddailey wrote:
        > >
        > > In http://srufaculty.sru.edu/david.dailey/svg/waves.html
        > > (which should run in Opera and IE/ASV) little waves that distort an
        > image
        > > are created from parameters given by
        > > HTML form elements and then are embedded into the DOM and animated
        > with
        > > SMIL.
        > >
        > > It also takes advantage of the file upload (input type-file) in HTML
        > that
        > > is rather hard to duplicate in SVG alone.
        > >
        > > I have some simpler examples laying about somewhere. If such would
        > prove
        > > useful, please holler.
        > >
        > > David Dailey
        > > ----- Original Message -----
        > > From: mark_alsisto
        > > To: svg-developers@yahoogroups.com
        > > Sent: Sunday, September 30, 2007 11:40 PM
        > > Subject: [svg-developers] SVG with html control
        > >
        > >
        > > hi,
        > > can anyone give me a simple example on how i can control svg with the
        > > use of html control. for example, there are checkboxes that controls
        > > whether to display text in svg.
        > >
        > > thanx...
        > >
        > >
        > >
        > >
        > >
        > > [Non-text portions of this message have been removed]
        > >
        > >
        > >
        >
        > --
        > View this message in context:
        > http://www.nabble.com/SVG-with-html-control-tf4550488.html#a13071161
        > Sent from the Gnome - librsvg - Dev mailing list archive at Nabble.com.
        >
        >
        >
        >
        >
        > [Non-text portions of this message have been removed]
        >
        >
        >
        :drunk::drunk:
        --
        View this message in context: http://www.nabble.com/SVG-with-html-control-tf4550488.html#a13091418
        Sent from the Gnome - librsvg - Dev mailing list archive at Nabble.com.
      • ddailey
        Hi Mark, Give this a try -- comments included (simple SVG file follows):
        Message 3 of 13 , Oct 8, 2007
        • 0 Attachment
          Hi Mark,

          Give this a try -- comments included (simple SVG file follows):

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html xmlns="http://www.w3.org/1999/xhtml" >
          <head>
          <title>Untitled Page</title>
          <script type="text/javascript">
          var svgdoc, textmap,showHide
          xmlns="http://www.w3.org/1999/xhtml"
          function prepare()
          {
          // svgdoc=document.sv.getSVGDocument();
          svgdoc=document.getElementById("sv").getSVGDocument();

          //(I think retrieving an embed by id is probably a bit more robust than doing it by DOM1 methods)
          textmap=svgdoc.getElementById('names')
          }

          function visibleText(showhide)
          {
          alert(showhide+textmap.nodeName)
          //this is just to make sure the textmap object was properly identified
          textmap.setAttributeNS(null,"x", 200);
          textmap.setAttributeNS(null,"visibility", showhide);

          //using setAttributeNS rather than setAttribute is consistent with the SVG spec.
          //neither IE/ASV, Opera, nor FF requires it, but some browser somewhere sometime might

          }


          </script>
          </head>

          <body onload="prepare()">
          <embed id="sv" src="testing.svg" width=400 height=200>
          <!--
          <object> doesn't allow scripting in IE/ASV
          <iframe> would be another way, but there are some oddities
          <embed> is not how the spec says to do it, but it works in IE/FF/OP/Safari
          -->

          </embed>
          <form name="form">
          show<input id="show" type="radio" name="visible" checked="checked"
          onclick="visibleText('visible')"/><br />
          hide<input id="hide" type="radio" name="visible"
          onclick="visibleText('hidden')"/>

          </form>
          </body>
          </html>

          -----------------------svg---------
          <svg xmlns="http://www.w3.org/2000/svg" width="100%"
          xmlns:xlink="http://www.w3.org/1999/xlink" >
          <script><![CDATA[
          sampleVar="unnecessary";
          //]]>
          </script>
          <text font-size="12" x="5" y="20" id="names">sample text</text>
          </svg>

          ----------------

          Hope this helps and sorry if any of my old code has sent you barking up wrong DOM trees,

          David






          ----- Original Message -----
          From: mark_alsisto
          To: svg-developers@yahoogroups.com
          Sent: Monday, October 08, 2007 2:47 AM
          Subject: Re: [svg-developers] SVG with html control



          hi,
          can you help me see what's wrong with this...i cant seem to get it
          right(slow learner).

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" >
          <head>
          <title>Untitled Page</title>
          <script type="text/javascript">
          var svgdoc, textmap,showHide
          function prepare()
          {
          svgdoc=document.sv.getSVGDocument();
          textmap=svgdoc.getElementById('names');

          }

          function visibleText(showhide)
          {
          textmap.setAttribute("visibility", showHide);
          }

          </script>
          </head>

          <body onload="prepare()">
          //then here is where i embed my svg file.
          <form name="form">
          show<input id="show" type="radio" name="visible" checked="checked"
          onclick="visibleText(visible)"/><br />
          hide<input id="hide" type="radio" name="visible"
          onclick="visibleText(hidden)"/>

          </form>
          </body>
          </html>
          i'm using IE7 and the svg file displayed properly.
          but whenever i clicked the radio button nothing changes. Instead, the msg
          "error on page" were shown at the brower's status bar...please guide me.

          ddailey wrote:
          >
          > Sure Mark,
          >
          > Take a look at the first example at
          > http://srufaculty.sru.edu/david.dailey/svg/intro/PartF_C.html
          >
          > It works in IE/ASV, Opera 9.23, and FF (except for the SMIL). The color of
          > the SVG oval is varied through values chosen in an HTML <select>.
          >
          > The second example uses turbulence filters as controlled by radio buttons
          > in HTML, so it also won't work in FF, though it is working for me in IT
          > and Opera.
          >
          > The third example -- well let's just not talk about that one (there is an
          > error of some sort in my very old code that prevents the keystroke event
          > from being detected in Opera.)
          >
          > A slightly more adventurous example is given here.
          >
          > http://srufaculty.sru.edu/david.dailey/svg/intro/checkerembed.html
          >
          > It embeds clipPaths into an SVG from HTML and seems to be working in FF,
          > IE and Opera.
          >
          > hope this helps,
          > David
          > ----- Original Message -----
          > From: mark_alsisto
          > To: svg-developers@yahoogroups.com
          > Sent: Saturday, October 06, 2007 2:39 AM
          > Subject: Re: [svg-developers] SVG with html control
          >
          >
          >
          > hi david,
          > do you have the simpler example that you mention. i really need your
          > help.
          > i just need a simple example of how to show and hide a text in svg using
          > html radiobutton control...
          > from there...i will try to understand the coding and implement it with
          > my
          > work...
          >
          > thanx...for your reply
          >
          > ddailey wrote:
          > >
          > > In http://srufaculty.sru.edu/david.dailey/svg/waves.html
          > > (which should run in Opera and IE/ASV) little waves that distort an
          > image
          > > are created from parameters given by
          > > HTML form elements and then are embedded into the DOM and animated
          > with
          > > SMIL.
          > >
          > > It also takes advantage of the file upload (input type-file) in HTML
          > that
          > > is rather hard to duplicate in SVG alone.
          > >
          > > I have some simpler examples laying about somewhere. If such would
          > prove
          > > useful, please holler.
          > >
          > > David Dailey
          > > ----- Original Message -----
          > > From: mark_alsisto
          > > To: svg-developers@yahoogroups.com
          > > Sent: Sunday, September 30, 2007 11:40 PM
          > > Subject: [svg-developers] SVG with html control
          > >
          > >
          > > hi,
          > > can anyone give me a simple example on how i can control svg with the
          > > use of html control. for example, there are checkboxes that controls
          > > whether to display text in svg.
          > >
          > > thanx...
          > >
          > >
          > >
          > >
          > >
          > > [Non-text portions of this message have been removed]
          > >
          > >
          > >
          >
          > --
          > View this message in context:
          > http://www.nabble.com/SVG-with-html-control-tf4550488.html#a13071161
          > Sent from the Gnome - librsvg - Dev mailing list archive at Nabble.com.
          >
          >
          >
          >
          >
          > [Non-text portions of this message have been removed]
          >
          >
          >
          :drunk::drunk:
          --
          View this message in context: http://www.nabble.com/SVG-with-html-control-tf4550488.html#a13091418
          Sent from the Gnome - librsvg - Dev mailing list archive at Nabble.com.





          [Non-text portions of this message have been removed]
        • ddailey
          Hi Mark, Give this a try -- comments included (simple SVG file follows):
          Message 4 of 13 , Oct 8, 2007
          • 0 Attachment
            Hi Mark,

            Give this a try -- comments included (simple SVG file follows):

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml" >
            <head>
            <title>Untitled Page</title>
            <script type="text/javascript">
            var svgdoc, textmap,showHide
            xmlns="http://www.w3.org/1999/xhtml"
            function prepare()
            {
            // svgdoc=document.sv.getSVGDocument();
            svgdoc=document.getElementById("sv").getSVGDocument();

            //(I think retrieving an embed by id is probably a bit more robust than doing it by DOM1 methods)
            textmap=svgdoc.getElementById('names')
            }

            function visibleText(showhide)
            {
            alert(showhide+textmap.nodeName)
            //this is just to make sure the textmap object was properly identified
            textmap.setAttributeNS(null,"x", 200);
            textmap.setAttributeNS(null,"visibility", showhide);

            //using setAttributeNS rather than setAttribute is consistent with the SVG spec.
            //neither IE/ASV, Opera, nor FF requires it, but some browser somewhere sometime might

            }


            </script>
            </head>

            <body onload="prepare()">
            <embed id="sv" src="testing.svg" width=400 height=200>
            <!--
            <object> doesn't allow scripting in IE/ASV
            <iframe> would be another way, but there are some oddities
            <embed> is not how the spec says to do it, but it works in IE/FF/OP/Safari
            -->

            </embed>
            <form name="form">
            show<input id="show" type="radio" name="visible" checked="checked"
            onclick="visibleText('visible')"/><br />
            hide<input id="hide" type="radio" name="visible"
            onclick="visibleText('hidden')"/>

            </form>
            </body>
            </html>

            -----------------------svg---------
            <svg xmlns="http://www.w3.org/2000/svg" width="100%"
            xmlns:xlink="http://www.w3.org/1999/xlink" >
            <script><![CDATA[
            sampleVar="unnecessary";
            //]]>
            </script>
            <text font-size="12" x="5" y="20" id="names">sample text</text>
            </svg>

            ----------------

            Hope this helps and sorry if any of my old code has sent you barking up wrong DOM trees,

            David






            ----- Original Message -----
            From: mark_alsisto
            To: svg-developers@yahoogroups.com
            Sent: Monday, October 08, 2007 2:47 AM
            Subject: Re: [svg-developers] SVG with html control



            hi,
            can you help me see what's wrong with this...i cant seem to get it
            right(slow learner).



            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.