svg in html/js

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
aronsta
Posts: 3
Joined: Mon Jan 09, 2012 2:46 am

svg in html/js

Postby aronsta » Wed Jan 11, 2012 12:47 am

Hello everyone,
I'm new to SVG and have been playing around with it for a few days now and I have a problem I was hoping someone could help me solve. I tried to drop SVG straight into html (I'm not even sure if this is legal :? ) but my goal was to have js draw a rectangle based on user inputs from.html"smilies" src="images/smilies/icon_e_biggrin.gif" alt=":D" title="Very Happy" /> :D
- Aron

(fyi...I used carto.net as a tutorial, and it was VERY helpful to get me this far)

Code: Select all

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <form>
      Input Rectangle Width Here:<input type="text" name="width" id="w"/><br />
      Input Rectangle Height Here:<input type="text" name="height" id="h"/><br />
      <input type="submit" value="Draw Rectangle" onClick="createRect()"/>
   </form>
   <svg>
      <script type="text/ecmascript">
      <![CDATA[
         var svgNS = "http://www.w3.org/2000/svg";
         var xlinkNS = "http://www.w3.org/1999/xlink";
         function createRect(){
         var newRect = document.createElementNS(svgNS,"rect");
         var xx = document.getElementById("w").value;
         var yy = document.getElementById("h").value;            
         newRect.setAttributeNS(null,"width",xx);   
                        newRect.setAttributeNS(null,"height",yy);
         newRect.setAttributeNS(null,"fill-opacity",1);
         newRect.setAttributeNS(null,"stroke-width",1);
         newRect.setAttributeNS(null,"astroke-opacity",1);
         newRect.setAttributeNS(null,"fill","white");
         newRect.setAttributeNS(null,"stroke","black");
         document.getElementById("firstGroup").appendChild(newRect);
         };
      ]]>
      </script>
         <g id="firstGroup">
            <rect x="100" y="100" />
         </g>
   </svg>
</body>
</html>
Top
User avatar
tomh
Posts: 218
Joined: Sat Feb 14, 2009 10:14 pm

Re: svg in html/js

Postby tomh » Thu Jan 12, 2012 5:37 am

Not legal as is. In HTML 5 you are nearly correct see this: http://www.tutorialspoint.com/html5/html5_svg.htm basically you have to add the svg namespace element. Otherwise it is a bit of a mind field, tav has done a fairly good job of summarizing the options: http://tavmjong.free.fr/SVG/SVG_IN_HTML ... _html.html . The current versions of Firefox, Chrome, Safari all work. Have not checked the others recently.
Top
aronsta
Posts: 3
Joined: Mon Jan 09, 2012 2:46 am

Re: svg in html/js

Postby aronsta » Sun Jan 15, 2012 7:10 am

I fixed the problem by getting rid of the onclick from the submit button and modifying the opening form tag to: <form action="javascript:createRect()">. I also don't need the <rect> tags since they are being created. This site was also helpful: http://www.alistapart.com/articles/get- ... or-html-5/ I also added the svg namespace that tomh recommended...seems to work now. The final code looks like this:

Code: Select all

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <form action="javascript:createRect()">
      Input Rectangle Width Here:<input type="text" name="width" id="w"/><br />
      Input Rectangle Height Here:<input type="text" name="height" id="h"/><br />
      <input type="submit" value="Draw Rectangle" />
   </form>
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <script type="text/javascript">
      <![CDATA[
         var svgNS = "http://www.w3.org/2000/svg";
         function createRect(){
         var newRect = document.createElementNS(svgNS,"rect");
         var xx = document.getElementById("w").value;
         var yy = document.getElementById("h").value;            
         newRect.setAttributeNS(null,"width",xx);   
                        newRect.setAttributeNS(null,"height",yy);
         newRect.setAttributeNS(null,"fill-opacity",1);
         newRect.setAttributeNS(null,"stroke-width",1);
         newRect.setAttributeNS(null,"astroke-opacity",1);
         newRect.setAttributeNS(null,"fill","white");
         newRect.setAttributeNS(null,"stroke","black");
         document.getElementById("firstGroup").appendChild(newRect);
         };
      ]]>
      </script>
         <g id="firstGroup">
         </g>
   </svg>
</body>
</html>
Top
Post Reply

Return to “SVG / XML Code”