SVG in HTML, with CSS and JS

Discuss SVG code, accessible via the XML Editor.
Forum rules
Post Reply
JimJoyce
Posts: 37
Joined: Fri Jun 19, 2009 7:06 pm

SVG in HTML, with CSS and JS

Postby JimJoyce » Tue Feb 08, 2011 9:20 pm

I'm trying to code an 'Interactive Colour Blender.
'I'm having great difficulty positioning SVG Circle Divs in Rectangular Divs in my HTML.
I'm hoping someone can point me in the right direction.

I'm also using JS to respond to clicks in those Divs (But that's not yet a problem)
so I've commented out the JS link.
I should also say that currently I can only get a display in Opera and Safari.
I originally had it in Firefox, IE and Chrome also. I've no idea what went wrong.

This is a cut-down version of the HTML

Code: Select all

<!DOCTYPE.html"codebox">

Code: Select all

body
 { margin: 0; border: 0; }
h1
 { font-size: 1.2em;
   text-align: center; }
p
 { font-size: 0.9em;
   text-align: center; }

#wrap
 { position: absolute;
   top: 10px; left: 10px;
   width: 710px; height: 500px;
   border: 3px solid #000;
   background: rgb(221,221,221); color: #000; }
#orig
 { position: absolute;
   top: 20px; left: 20px;
   width: 150px; height: 220px;border: 1px solid #000;
   background: rgb(254,220,186); color: #000; }
#prev
 { position: absolute;
   top: 260px; left: 20px;
   width: 150px; height: 220px;
   border: 1px solid #000;
   background: rgb(249,232,215); color: #000; }
#curr
 { position: absolute;
   top: 20px; left: 190px;
   width: 290px; height: 460px;
   border: 2px solid #000;
   background: rgb(170,170,170); color: #000; }
#buts
 { position: absolute;
   top: 20px; left: 500px;
   width: 190px; height: 460px;
   border: 1px solid #000;
   background: rgb(204,204,204); color: #000; }

#reds
 { position: absolute;
   top: 45px; left: 10px;
   width: 50px; height: 405px;
   background: #fff;
   border: 1px solid #f00; }
#grns
 { position: absolute;
   top: 45px; left: 70px;
   width: 50px; height: 405px;
   background: #fff;
   border: 1px solid #0f0; }
#blus
 { position: absolute;
   top: 45px; left: 130px;
   width: 50px; height: 405px;
   background: #fff;
   border: 1px solid #00f; }

#reds.p4
 { position: absolute;
   width: 31px; height: 31px;
   top:  90px;  left: 20px; }
#reds.cr
 { position: absolute;
   width: 41px; height: 41px;
   top: 180px;  left: 15px; }
#reds.m4
 { position: absolute;
   width: 31px; height: 31px;
   top: 270px;  left: 20px; }
#reds.cr
 { background: #800000; }

.cr svg:circle,
.p4 svg:circle,
.m4 svg:circle
 { position: relative;
   cy: 22px; cx: 25px; }

.cr svg:text
 { position: absolute;
   y: 28px; x: 14px; }
.p4 svg:text, .m4 svg:text
 { position: absolute;
   y: 28px; x: 17px; }

#orig.text
 { position: absolute;
   top: 35px; left: 10px; }
#orig.p
 { position: absolute;
   top: 50px; left: 10px; }
Top
EricWarnke
Posts: 8
Joined: Fri Mar 25, 2011 5:23 pm

Re: SVG in HTML, with CSS and JS

Postby EricWarnke » Sat Mar 26, 2011 2:42 am

I use the jQuery SVG plugin to load my SVGs, however, IE 8 and older don't work with regular SVGs.

I recently discovered http://svgboilerplate.com/ and I might trying that out for all the cross-browser goodness it promises.
Top
coiner
Posts: 19
Joined: Mon Mar 14, 2011 5:21 pm
Location: NY

Re: SVG in HTML, with CSS and JS

Postby coiner » Fri Apr 01, 2011 6:29 am

The only way I've ever gotten SVG to work within an HTML page is to define it as XML instead of HTML. The file must have .xml extension (not .html). Here is an example:

Code: Select all

<?xml version="1.0" standalone="no"?>
<!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>SVG in HTML</title>
  <script type="text/javascript">
    <![CDATA[
    var svgns="http://www.w3.org/2000/svg";
    
       function tellWhat(which){
          alert(which);
       }
   
   ]]>
   </script>
</head>
<body>

   <h1 onclick="tellWhat(this)">some html</h1>

   <div>
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink"
           version="1.1" baseProfile="full" width="500px" height="500px">
         <rect x="0px" y="0px" width="100%" height="100%" fill="#666633"/>
         <circle cx="60px" cy="100px" r="50px" style="fill:white;stroke:blue;stroke-width:4" onclick="tellWhat(this)"/>
         <rect x="300px" y="100px" width="50px" height="50px" style="fill:white;stroke:blue;stroke-width:4"/>
      </svg>
   </div>
   
   <div style="background:yellow;position:absolute;left:100px;top:100px;">some good text in html</div>

   
<h1>some html after</h1>

</body>
</html>
Top
rickey121
Posts: 1
Joined: Fri Jan 13, 2012 11:57 pm

Re: SVG in HTML, with CSS and JS

Postby rickey121 » Sat Jan 14, 2012 12:13 am

this would be a great instance to make use of the jQuery library.
Struts2 Jquery
In this there are codes of jquery and you will get to know how to make best use of it. Also provided a video for better understanding.
Top
Post Reply

Return to “SVG / XML Code”