sur la ligne 1 à la colonne 1: Le document est vide

Question

après de nombreuses questions que je suis encore perplexe quant à ce que ma question devrait être

Je reçois cette erreur quand j'ajouter CSS dans mon SVG:

style.css 
* {margin:0; padding:0} 
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF} 
#text {margin:50px auto; width:500px} 
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer} 

#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} 


<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[ 
    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> 
    <sodipodi:namedview 
    inkscape:window-height="721" 
    inkscape:window-width="1024" 
    inkscape:pageshadow="2" 
    inkscape:pageopacity="0.0" 

Pourquoi ai-je cette erreur?

Je suis followign cet avis:

if i want to add CSS where would i paste it?

Answer 1

Si vous êtes juste essayer d'ajouter CSS, vous pouvez voir des exemples dans le document lié de la question que vous avez mentionné.

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

est ici l'exemple de la feuille de style intégré qui leur donnent:

<style type="text/css"><![CDATA[ 
     rect { 
     fill: red; 
     stroke: blue; 
     stroke-width: 3 
     } 
    ]]></style> 

Et la version liée:

<?xml-stylesheet href="mystyle.css" type="text/css"?> 

Voir le document pour les exemples complets.

donc vôtre serait train d'incorporer probablement ressembler à ceci:

<style type="text/css"><![CDATA[ 

* {margin:0; padding:0} 
body {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; background:#FFF} 
#text {margin:50px auto; width:500px} 
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px dotted #900; cursor:pointer} 

#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>