Having trouble rendering svg object in IE.

May 16, 2013 at 11:45 PM
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>
May 17, 2013 at 6:00 PM
This forum is for the CodePlex website itself. You might want to post this on some other forum, dedicated for such a discussion.