SVG 鼠标悬停不适用于嵌套元素

Question

我想做的是，当你将鼠标悬停在嵌套组#sec7kpi-c 上，然后进一步进入动画效果内的文本时，当你继续鼠标悬停时。

<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
  <g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c">
    <ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
    <text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363">KPI</text>  
  </g>
</g>
<animateTransform attributeType="XML"
                  xlink:href="#sec7kpi-c"
                  attributeName="transform"
                  type="scale"
                  dur="1s"
                  from="1"
                  to="2"
                  restart="whenNotActive"
                  begin="mouseover"
                  calcMode="spline"
                  values="1;1.5;1"  
                  keyTimes="0;0.5;1"
                  keySplines=".16,.59,.46,.98;.88,.27,.37,1.52"
                  fill="freeze"                     
                  id="c-hover">
</animateTransform>

Answer 1

您可以将文本指针事件属性设置为 none 来避免这种情况。

请注意，您的 keySplines 值无效（它们必须全部 <= 1），因此您的动画不应该像编写的那样工作（如果是这样，您应该在该 UA 上提出错误）。 我已经在我的版本中更正了。

我还删除了 from 和 to 属性，因为如果您提供值属性，它们将被忽略。

body, html {
  width: 100%;
  height: 100%;
}

<svg width="100%" height="100%">
  <g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
    <g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c">
      <ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
      <text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>  
    </g>
  </g>
  <animateTransform attributeType="XML"
                    xlink:href="#sec7kpi-c"   
                    attributeName="transform"
                    type="scale"
                    dur="1s"
                    restart="whenNotActive"
                    begin="mouseover"
                    calcMode="spline"
                    values="1;1.5;1" 
                    keyTimes="0;0.5;1"
                    keySplines=".16,.59,.46,.98;.88,.27,.37,1"
                    fill="freeze"                        
                    id="c-hover">
  </animateTransform> 
</svg>

SVG 鼠标悬停不适用于嵌套元素

SVG mouseover does not work on nested elements

javascript

svg

nested

mouseover

smil