动画 SVG：单击动画仅在单击边框时有效

Question

我正在尝试制作一个带有两个动画的 SVG，这两个动画使彩色框看起来可以突出显示文本。请参阅下面的最小示例。

目前，文本被放置在彩色框的前面，因为如果我以相反的方式这样做，文本会变得非常暗淡（在这个例子中不是那么糟糕，因为文本是黑色的，但其他的更是如此颜色）。但是现在只有很小的彩色框边框可以点击了。我希望整个框都可以点击，但文本要放在颜色前面。有办法吗？

<svg
  version="1.1"
  baseProfile="full"
  width="110" height="30"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect id="redbox" x="0" y="0" width="110" height="30" rx="4" ry="4" style="fill:red;stroke:none;fill-opacity:0" />
  
  <animate xlink:href="#redbox" attributeType="CSS" attributeName="fill-opacity" 
           from="0" to="0.5" dur="1s" begin="click" fill="freeze"/>
  <rect x="5" y="5" width="100" height="20" rx="4" ry="4" fill="none" stroke="black" />
  
  <text dominant-baseline="central" font-size="11px">
    <tspan x="10" y="14.5">Highlight on click</tspan>
  </text>
  
</svg>

.

Answer 1

只需将文本设置为 pointer-events="none" 然后鼠标点击将到达您想要的父级。

<svg
  version="1.1"
  baseProfile="full"
  width="110" height="30"
  xmlns="http://www.w3.org/2000/svg">
  
  <rect id="redbox" x="0" y="0" width="110" height="30" rx="4" ry="4" style="fill:red;stroke:none;fill-opacity:0" />
  
  <animate xlink:href="#redbox" attributeType="CSS" attributeName="fill-opacity" 
           from="0" to="0.5" dur="1s" begin="click" fill="freeze"/>
  <rect x="5" y="5" width="100" height="20" rx="4" ry="4" fill="none" stroke="black" />
  
  <text dominant-baseline="central" pointer-events="none" font-size="11px">
    <tspan x="10" y="14.5">Highlight on click</tspan>
  </text>
  
</svg>

动画 SVG：单击动画仅在单击边框时有效

Animated SVG: animate on click only works when clicking on border

svg

svg-animate