www.webdeveloper.com
Results 1 to 2 of 2

Thread: VML to SVG

  1. #1
    Join Date
    Mar 2003
    Posts
    432

    VML to SVG

    Hello yall~
    I have a vml script below that I was wondering if svg can do the exact same thing though? I know you can create animation with svg but can it do what is in the script below?

    Code:
    <xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
    <body>
    <script language="">
    var pic=new Array("pic1.bmp","pic3.bmp","pic2.bmp")
    var message=new Array("Test 1","test 2","TEST 3")
    var fnt="Arial Black"
    var formwidth=450
    var fillcolor="#FFFFFF"
    var backdepth=10
    var speed=10
    var opacity="100%"
    var filltype="frame"
    var pause=2
    var stopafterdisplay=false
    var postop=50
    
    var circlemark=" "
    var i_angle1=0
    var i_pic=0
    var i_message=0
    var posleft=0
    var pagewidth
    var pageheight
    var longestmessage=0
    var emptyspace=" "
    var flagstarted=false
    pause*=1000
    
    var opera=navigator.userAgent.match(/Opera/)
    var ie5=document.getElementById&&document.all&&!opera?1:0
    
    for (i=0;i<=message.length-1;i++) {
          if (message[i].length>longestmessage) {
                longestmessage=message[i].length
          }
          longestmessage+=4
    }
    for (i=0;i<=message.length-1;i++) {
          var emptyspace=""
          var i_emptyspace=(longestmessage-message[i].length)/2
          for (ii=0;ii<=i_emptyspace;ii++) {
                emptyspace+=circlemark
          }
          message[i]=emptyspace+" "+message[i]+" "+emptyspace
    }
    function initform() {
          pagewidth=document.body.clientWidth
          pageheight=document.body.clientHeight
          posleft=(pagewidth-formwidth)/2
          if (postop=="middle") {
                postop=pageheight/2
          }
          document.getElementById('rectid').style.left=posleft
          document.getElementById('rectid').style.top=postop
          preload()
    }
    function preload() {
          var i_preload=0
          for (i=0;i<=pic.length-1;i++) {
                var imgref=eval("document.n"+i)
                if (imgref.complete) {i_preload++}
          }
          if (i_preload>=pic.length-1) {
                window.status=i_preload
                var timer=setTimeout("changeform()",pause)
          }
          else {
                var timer=setTimeout("preload()",50)
          }
    }
    function changeform() {
          i_angle1+=speed
          if (i_angle1==360) {
                pausenow()
          }
          else {
                if (i_angle1==250) {
                      i_pic++
                      i_message++
                      if (i_pic>=pic.length) {i_pic=0}
                      if (i_message>=message.length) {i_message=0}
                      document.getElementById('fillid').src=pic[i_pic]
    document.getElementById('textpathid').string=message[i_message]
                      flagstarted=true
                }
    document.getElementById('extrusionid').rotationangle=0+","+i_angle1
                if (stopafterdisplay && i_message==0 && flagstarted) {
                      document.getElementById('textpathid').string=""
                }
                else {
                      var timer=setTimeout("changeform()",20)
                }
          }
    }
    function pausenow() {
          i_angle1=0
          document.getElementById('extrusionid').rotationangle=0+","+i_angle1
          var timerendpause=setTimeout("changeform()",pause)
    }
    if (ie5) {
          document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
          for (i=0;i<=pic.length-1;i++) {
                document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
          }
          document.write('</div>')
          document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
          document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
          document.write('<v:fill id="fillid" opacity="'+opacity+'"color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
          document.write('<v:path textpathok="t"/>')
          document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
          document.write('</v:curve>')
          window.onload=initform
       }
    </script>
    Thanks
    Devil
    "It is better to keep your mouth shut and look like a fool, rather than open your mouth and be a fool!!!"

    "It is better to say nothing, and be thought a fool, rather than open your mouth and confirm it!!!"

  2. #2
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    5,298
    The preceding script is a JavaScript apposed to VML. VML is markup-based.

    But, yes, it can be done is SVG, though; im no expert on the subject.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles