SysChat is a free online computer support community. Ask questions, share resources, contribute knowledge and discuss technology. Join our growing community to access all features. Register Now!

SysChat » Articles » Use HTML5 CSS & SVG To Draw

Articles

Computer and Technology articles

Comment
 
LinkBack Article Tools

Use HTML5 CSS & SVG To Draw

Published by mhookem
04-26-2012

Default Use HTML5 CSS & SVG To Draw

Simply copy & paste into your html editor and then view in your browser.

Googles chrome definitely supports everything here, as yet untested on the new IE9.

You can read my blog to see my opinions on it all.


blueflux.eu

<!--copy the code below-->

HTML Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:861px;
	height:133px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 71px;
	top: 2px;
}
-->
</style>
</head>

<body>
<div id="Layer2">
  <title>Layer 2</title>
  <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <!--gradient for main radio panel-->
  <radialGradient fy="0.64063" fx="0.51953" r="0.57959" cy="0.39063" cx="0.51953" id="svg_45">
   <stop stop-color="#ffffff" offset="0"/>
   <stop stop-color="#000000" offset="1"/>
  </radialGradient>
  <!--gradient for drop down panel-->
  <linearGradient y2="0.99219" x2="0.45703" y1="0.01172" x1="0.48438" id="svg_118">
   <stop stop-color="#fffcfc" offset="0"/>
   <stop stop-color="#020202" offset="1"/>
  </linearGradient>
  <!--gradient for display orange backlight-->
  <linearGradient y2="0.10938" x2="0.55078" y1="0.96094" x1="0.51563" id="svg_121">
   <stop stop-color="#ff7f00" offset="0"/>
   <stop stop-color="#000000" offset="1"/>
  </linearGradient>
 </defs>
 <g>
 <!-- drop down panel-->
  <rect id="svg_116" height="31" width="420.99999" y="268" x="108.00002" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#020202" fill="url(#svg_118)"/>
  <!--main radio panel-->
  <path id="svg_17" d="m38.36671,205l559.63738,0c50.27472,0.86185 51.59778,74.94226 0,73.99365l-559.63738,0c-46.30569,-1.37958 -46.30569,-73.73528 0,-73.99365z" stroke-linecap="null" stroke-linejoin="null" stroke="#ff7f00" fill="url(#svg_45)"/>
  <!--radio display orange backlight-->
  <path id="svg_2" d="m107.99999,237c140.66666,0 281.33335,0 422.00001,0c0,11.66667 0,23.33334 0,35c-140.66666,0 -281.33334,0 -422.00001,0l0,-35z" stroke-linecap="null" stroke-linejoin="null" stroke-width="2" stroke="#fcfcfc" fill="url(#svg_121)"/>
  <!--top line of main panel-->
  <line id="svg_52" y2="207" x2="598" y1="207" x1="34" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#ffffff" fill="none"/>
  <!--bottom line of main panel-->
  <line id="svg_53" y2="277" x2="598" y1="277" x1="34" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="3" stroke="#ffffff" fill="none"/>
  <!--left hand circle plain-->
  <circle id="svg_56" r="22.5899" cy="241.5" cx="58" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--right hand circle plain-->
  <circle id="svg_57" r="22.5899" cy="242.5" cx="576" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--right hand orange circle-->
  <circle id="svg_58" r="9.0899" cy="224" cx="88" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="#7f3f00"/>
  <!--right hand orange circle-->
  <circle id="svg_59" r="9.0899" cy="223" cx="548" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#ffffff" fill="#7f3f00"/>
  <!--text-->
  <text id="svg_70" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="14" y="295" x="311" stroke-width="0" stroke="#ffffff" fill="#ffffff">SVG Radio</text>
   <!--button background-->
  <rect id="svg_71" height="22" width="119" y="214" x="110" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#ff7f00"/>
   <!--button text-->
  <text xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="16" id="svg_3" y="230" x="169" stroke-width="0" stroke="#000000" fill="#020202">HTML5</text>
  <!--button background-->
  <rect id="svg_72" height="22" width="119" y="214" x="261" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#ff7f00"/>
   <!--button text-->
  <text id="svg_9" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="16" y="230" x="320" stroke-width="0" stroke="#000000" fill="#020202">CSS3</text>
  <!--button background-->
  <rect id="svg_73" height="22" width="119" y="214" x="409" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" stroke="#000000" fill="#ff7f00"/>
  <!--button text-->
  <text id="svg_11" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="16" y="230" x="469" stroke-width="0" stroke="#000000" fill="#020202">HOME</text>
<!--left hand dial dash stroke-->
  <circle id="svg_76" r="19.0899" cy="241.5" cx="58" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="5,5" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--right hand circle dash stroke-->
  <circle id="svg_77" r="19.0899" cy="242.5" cx="576" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="5,5" stroke-width="2" stroke="#ffffff" fill="none"/>
  <!--orange graphic equaliser bars-->
  <rect id="svg_95" height="29" width="15" y="242" x="120" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_96" height="23" width="15" y="248" x="139" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_97" height="23" width="15" y="248" x="158" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_98" height="24" width="15" y="247" x="177" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_99" height="29" width="15" y="242" x="196" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_100" height="19" width="15" y="252" x="215" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_101" height="23" width="15" y="248" x="234" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_102" height="29" width="15" y="242" x="253" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_103" height="29" width="15" y="242" x="272" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_104" height="9" width="15" y="262" x="291" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_105" height="22" width="15" y="249" x="310" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_106" height="27" width="15" y="244" x="329" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_107" height="17" width="15" y="254" x="348" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
  <rect id="svg_108" height="26" width="15" y="245" x="367" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#fcfcfc" fill="#ff7f00"/>
</div>
</body>
</html> 


Comment




Article Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is on
Smilies are on
[IMG] code is on
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are on



» Ads



1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54