Question

经过许多问题，我仍然对我的问题应该是什么感到困惑

当我将CSS添加到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"

为什么我会收到此错误？

我遵循这个建议：

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

Answer 1

如果您只是想添加CSS，可以在文档中看到根据您引用的问题链接的示例。

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

以下是他们提供的嵌入式样式表的示例：

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

链接版本：

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

请参阅文档以获取完整示例。

所以嵌入你的看起来可能是这样的：

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

第1行第1行的错误：文档为空

1 个答案: