如何解决在Xaringan / remark.js中的“下一张幻灯片”事件上对SVG进行动画处理
我正在使用xaringan / remark.js进行演示。我包括一个带有两个动画的SVG,这两个动画使彩色框看起来突出显示文本。目前,动画是在单击时播放的,但我想通过“下一张幻灯片”事件开始动画。因此,第一个框应出现与用于推动幻灯片相同的按键/滚动/...。我意识到,一个简单的解决方案是仅制作三个分别不带一个框和两个框的SVG文件,然后实际推进幻灯片,但是我想知道是否完全有可能这样做。
我的SVG的最小示例:
<svg
version="1.1"
baseProfile="full"
width="110" height="30"
xmlns="http://www.w3.org/2000/svg">
<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>
<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"/>
</svg>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。