si je veux ajouter CSS où le collerais-je?

Question

ici est la page où je dois ajouter CSS:

http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg

car il n'y a pas de corps et tête, exactement où pourrais-je coller le code CSS?

Voici à quoi il ressemble actuellement et cela ne fonctionne pas?

somestyle.css 
<style> 
#tt { 
position:absolute; 
display:block; 
background:url(images/tt_left.gif) top left no-repeat; 
} 
#tttop { 
display:block; 
height:5px; 
margin-left:5px; 
background:url(images/tt_top.gif) top right no-repeat; 
overflow:hidden; 
} 
#ttcont { 
display:block; 
padding:2px 12px 3px 7px; 
margin-left:5px; 
background:#666; 
color:#fff; 
} 
#ttbot { 
display:block; 
height:5px; 
margin-left:5px; 
background:url(images/tt_bottom.gif) top right no-repeat; 
overflow:hidden; 
} 
</style> 

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 

<svg 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
    version="1.0" 
    width="958.69" 
    height="592.78998" 
    id="svg2275" 
    sodipodi:version="0.32" 
    inkscape:version="0.46" 
    sodipodi:docname="Map of USA with state names.svg" 
    sodipodi:docbase="C:\temp\webdesign" 
    inkscape:output_extension="org.inkscape.output.svg.inkscape"> 


    <script type="text/ecmascript"> 
    <![CDATA[ 

     function showRectArea(state) { 
     var x = new Object(); 
     x["HI"] = "you clicked hawaii"; 
     x["CT"] = "you clicked CT"; 
     alert(x[state]); 
     } 

     var tooltip=function(){ 
     var id = 'tt'; 
var top = 3; 
var left = 3; 
var maxw = 300; 
var speed = 10; 
var timer = 20; 
var endalpha = 95; 
var alpha = 0; 
var tt,t,c,b,h; 
var ie = document.all ? true : false; 
return{ 
    show:function(v,w){ 
    if(tt == null){ 
    tt = document.createElement('div'); 
    tt.setAttribute('id',id); 
    t = document.createElement('div'); 
    t.setAttribute('id',id + 'top'); 
    c = document.createElement('div'); 
    c.setAttribute('id',id + 'cont'); 
    b = document.createElement('div'); 
    b.setAttribute('id',id + 'bot'); 
    tt.appendChild(t); 
    tt.appendChild(c); 
    tt.appendChild(b); 
    document.body.appendChild(tt); 
    tt.style.opacity = 0; 
    tt.style.filter = 'alpha(opacity=0)'; 
    document.onmousemove = this.pos; 
    } 
    tt.style.display = 'block'; 
    c.innerHTML = v; 
    tt.style.width = w ? w + 'px' : 'auto'; 
    if(!w && ie){ 
    t.style.display = 'none'; 
    b.style.display = 'none'; 
    tt.style.width = tt.offsetWidth; 
    t.style.display = 'block'; 
    b.style.display = 'block'; 
    } 
    if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} 
    h = parseInt(tt.offsetHeight) + top; 
    clearInterval(tt.timer); 
    tt.timer = setInterval(function(){tooltip.fade(1)},timer); 
    }, 
    pos:function(e){ 
    var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; 
    var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; 
    tt.style.top = (u - h) + 'px'; 
    tt.style.left = (l + left) + 'px'; 
    }, 
    fade:function(d){ 
    var a = alpha; 
    if((a != endalpha && d == 1) || (a != 0 && d == -1)){ 
    var i = speed; 
    if(endalpha - a < speed && d == 1){ 
    i = endalpha - a; 
    }else if(alpha < speed && d == -1){ 
    i = a; 
    } 
    alpha = a + (i * d); 
    tt.style.opacity = alpha * .01; 
    tt.style.filter = 'alpha(opacity=' + alpha + ')'; 
    }else{ 
    clearInterval(tt.timer); 
    if(d == -1){tt.style.display = 'none'} 
    } 
}, 
hide:function(){ 
    clearInterval(tt.timer); 
    tt.timer = setInterval(function(){tooltip.fade(-1)},timer); 
    } 
}; 
}(); 


    ]]> 
    </script> 


    <metadata 
    id="metadata2625"> 
    <rdf:RDF> 
     <cc:Work 
     rdf:about=""> 
     <dc:format>image/svg+xml</dc:format> 
     <dc:type 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
     </cc:Work> 
    </rdf:RDF> 
    </metadata> 
    <defs 
    id="defs2623"> 
    <inkscape:perspective 
     sodipodi:type="inkscape:persp3d" 
     inkscape:vp_x="0 : 296.39499 : 1" 
     inkscape:vp_y="0 : 1000 : 0" 
     inkscape:vp_z="958.69 : 296.39499 : 1" 
     inkscape:persp3d-origin="479.345 : 197.59666 : 1" 
     id="perspective364" /> 




    </defs> 

le css pour une raison quelconque ne fonctionne pas.

Je sais que le javascript fonctionne parce que j'ai mis une alerte qui apparaît. mais le CSS est complètement ignoré.

Answer 1

http://www.w3.org/TR/SVG/styling.html

MISE À JOUR

mystyle.css 
rect { 
    fill: red; 
    stroke: blue; 
    stroke-width: 3 
} 

SVG file referencing mystyle.css 
<?xml version="1.0" standalone="no"?> 
<?xml-stylesheet href="mystyle.css" type="text/css"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="10cm" height="5cm" viewBox="0 0 1000 500"> 
    <rect x="200" y="100" width="600" height="300"/> 
</svg>