Question

晚上好，

我的rect中的文本有问题。我设置了一个动画，当你将鼠标悬停在矩形上时它会开始变为橙色。动画效果很好，但当鼠标悬停在其中的文本上时，它会被中断。有没有办法使文字＆＃34;不可选择＆＃34;为了让动画有效？

提前感谢您的帮助。

P.s：我提供了我正在处理的文件的代码。

＆＃13;

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

＆＃13;

Answer 1

在文本元素中加入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>

文字不允许鼠标悬停动画（Inkscape）

1 个答案: