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

只需使文本指针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>