2017-03-01 29 views
0

晚上好,文字不允许鼠标悬停动画(Inkscape)

我的内部文字有问题。当鼠标悬停在矩形上时,我设置了一个动画,以便它变成橙色。动画效果很好,但当鼠标悬停在其中的文字上时,它会中断。有没有办法让文字“不可选”,以让动画工作?

在此先感谢您的帮助。 P:我提供了我正在处理的文件的代码。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
<!-- Created with Inkscape (http://www.inkscape.org/) --> 
 

 
<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:xlink="http://www.w3.org/1999/xlink" 
 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
 
    width="744.09448819" 
 
    height="1052.3622047" 
 
    id="svg2" 
 
    version="1.1" 
 
    inkscape:version="0.48.5 r10040" 
 
    sodipodi:docname="Nuovo documento 1"> 
 
    <defs 
 
    id="defs4" /> 
 
    <sodipodi:namedview 
 
    id="base" 
 
    pagecolor="#ffffff" 
 
    bordercolor="#666666" 
 
    borderopacity="1.0" 
 
    inkscape:pageopacity="0.0" 
 
    inkscape:pageshadow="2" 
 
    inkscape:zoom="0.7" 
 
    inkscape:cx="361.92867" 
 
    inkscape:cy="655.61451" 
 
    inkscape:document-units="px" 
 
    inkscape:current-layer="layer1" 
 
    showgrid="true" 
 
    inkscape:window-width="1366" 
 
    inkscape:window-height="705" 
 
    inkscape:window-x="-8" 
 
    inkscape:window-y="-8" 
 
    inkscape:window-maximized="1"> 
 
    <inkscape:grid 
 
     type="xygrid" 
 
     id="grid2985" /> 
 
    </sodipodi:namedview> 
 
    <metadata 
 
    id="metadata7"> 
 
    <rdf:RDF> 
 
     <cc:Work 
 
     rdf:about=""> 
 
     <dc:format>image/svg+xml</dc:format> 
 
     <dc:type 
 
      rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> 
 
     <dc:title></dc:title> 
 
     </cc:Work> 
 
    </rdf:RDF> 
 
    </metadata> 
 
    <g 
 
    inkscape:label="Livello 1" 
 
    inkscape:groupmode="layer" 
 
    id="layer1"> 
 
    <rect 
 
     style="fill:#ffffff;fill-opacity:1;stroke:none" 
 
     id="testrect" 
 
     width="320" 
 
     height="100" 
 
     x="60" 
 
     y="232.36218" 
 
     ry="14.285714" /> 
 
    <text 
 
     xml:space="preserve" 
 
     style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" 
 
     x="73.173828" 
 
     y="296.68835" 
 
     id="randomtext" 
 
     sodipodi:linespacing="125%"><tspan 
 
     sodipodi:role="line" 
 
     id="tspan2991" 
 
     x="73.173828" 
 
     y="296.68835">RANDOM TEXT</tspan></text> 
 
    </g> 
 
    <animate 
 
    id="testrect_anim1" 
 
    attributeName="fill" 
 
    xlink:href="#testrect" 
 
    begin="mouseover" 
 
    from="#ffffff" 
 
    to="#ff6600" 
 
    dur="0.2s" 
 
    fill="freeze" /> 
 
    <animate 
 
    id="testrect_anim2" 
 
    attributeName="fill" 
 
    xlink:href="#testrect" 
 
    begin="mouseout" 
 
    from="#ff6600" 
 
    to="#ffffff" 
 
    dur="0.2s" 
 
    fill="freeze" /> 
 
</svg>

+0

为什么不把动画添加到文本中? – GibralterTop

回答

3

包括pointer-events="none"的文本元素。

<text 
    xml:space="preserve" 
    style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" 
    x="73.173828" 
    y="296.68835" 
    id="randomtext" 
    sodipodi:linespacing="125%"> 
    <tspan> 
    sodipodi:role="line" 
    id="tspan2991" 
    pointer-events="none" 
    x="73.173828" 
    y="296.68835">RANDOM TEXT 
    </tspan> 
</text> 
+0

非常感谢Francis Hemsher,对我来说就像是魅​​力! – pablobs88