[svg-developers] .svg button not rendering in IE.

Tue, 21 May 2013 09:26:34 -0700 

Hello, I've been handed this code to render an .svg button with .css styling. 
Works in all other browsers aside from IE. Unfortunately, we are testing in 
IE7+....any suggestions as to why this isn't displaying? 

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
<style type='text/css'>
.Btn3D
{
    position: fixed;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background: #DAB852;
    -webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -1px 2px 1px, inset 
rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
    box-shadow: inset rgba(0,0,0,0.2) 0 -1px 2px 1px, inset 
rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 3px 8px -1px;
    -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), 
-webkit-border-radius .2s cubic-bezier(0,.5,0,1);
    -moz-transition: -moz-transform .3s cubic-bezier(0,.5,.5,1), 
-moz-border-radius .2s cubic-bezier(0,.5,0,1);
    -ms-transition: -ms-transform .3s cubic-bezier(0,.5,.5,1), 
-ms-border-radius .2s cubic-bezier(0,.5,0,1);
    -o-transition: -o-transform .3s cubic-bezier(0,.5,.5,1), -o-border-radius 
.2s cubic-bezier(0,.5,0,1);
    transition: transform .3s cubic-bezier(0,.5,.5,1), border-radius .2s 
cubic-bezier(0,.5,0,1);}

.Btn3D:active
{
    -webkit-transform: scale(.8);
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    -o-transform: scale(.8);
    transform: scale(.8);
    background: #DAB852;
    -webkit-box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset 
rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 1px 1px 1px;
    box-shadow: inset rgba(0,0,0,0.5) 0 -4px 4px 1px, inset 
rgba(252,255,255,0.2) 0 6px 4px -2px, rgba(0,0,0,.6) 0 1px 1px 1px;
    -webkit-transition: -webkit-transform .2s cubic-bezier(0,.5,0,1), 
-webkit-border-radius 1s cubic-bezier(0,.5,0,1);
    -moz-transition: -moz-transform .2s cubic-bezier(0,.5,0,1), 
-moz-border-radius 1s cubic-bezier(0,.5,0,1);
    -ms-transition: -ms-transform .2s cubic-bezier(0,.5,0,1), -ms-border-radius 
1s cubic-bezier(0,.5,0,1);
    -o-transition: -o-transform .2s cubic-bezier(0,.5,0,1), -o-border-radius 1s 
cubic-bezier(0,.5,0,1);
    transition: transform .2s cubic-bezier(0,.5,0,1), border-radius 1s 
cubic-bezier(0,.5,0,1);}
</style>
</head>

<body>

<svg xmlns="http://www.w3.org/2000/svg"; version="1.1">

<g id="g" shape-rendering="inherit" pointer-events="all">

<circle cx="400" cy="210" r="25.6" fill="white" stroke="#505055" 
stroke-width="2"></circle>

<foreignObject class="node" x="383" y="192" width="32" height="32">

<body xmlns="http://www.w3.org/1999/xhtml";>

<div class="Btn3D" title="" style="width: 101%; height: 100%; background-color: 
rgb(218, 184, 82); text-align: center; vertical-align: middle; 
background-position: initial initial; background-repeat: initial 
initial;"></div>

</body>

</foreignObject>
</g>
</svg> 

</body>
</html>



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

-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my 
membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    [email protected] 
    [email protected]

<*> To unsubscribe from this group, send an email to:
    [email protected]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Reply via email to