Question

我实际上是在学习SVG，以便在网站中导入我在Flash中执行的矢量动画，然后集成一些“交互性”（使用SVG属性begin =“mouseover”）。

首先，这是一个非常简单的SVG动画示例，我使用名为“Flash2SVG”的Flash插件进行了制作：https://codepen.io/Rojiraan/pen/owboXr

（StackOverflow在使用Codepen.io链接时需要一些代码，问题是我的SVG太长了，所以我对我的HTML代码进行了超级转换）

<div class="svg-container">
<svg version="1.1" class="svg-content" viewBox="0 0 550 400" preserveAspectRatio="xMinYMin meet">
   <g id="SEQUENCE_No1" overflow="visible">
      <g id="THE_RED_RECTANGLE" transform="translate(71 68.05)">
         <g>
            <g id="Layer11_0_FILL">
               <path fill="#F30" stroke="none" d="M408 263.95L408 0 0 0 0 263.95 408 263.95Z"/>
            </g>
         </g>
      </g>
      <g display="none">
         <g>
            <g id="Layer10_0_FILL">
               <path fill="#6CF" stroke="none" d="some numbers..."/>
            </g>
         </g>
         <animate attributeName="display" repeatCount="indefinite" dur="3.333s" keyTimes="0;.9;1" values="none;inline;inline"/>
      </g>
      <g display="none">
         <g>
            <g id="Layer9_0_FILL">
               <path fill="#6CF" stroke="none" d="some numbers..."/>
            </g>
         </g>
         <animate attributeName="display" repeatCount="indefinite" dur="3.333s" keyTimes="0;.8;.9;1" values="none;inline;none;none"/>
      </g>
     <!-- Et cetera... -->
</svg>
</div>

我想要做的是在我徘徊红色矩形时开始动画（带有小蓝点）。问题是我不知道在哪里放置我的“开始”属性，我尝试了各种不成功的事情。

非常感谢阅读和阅读寻求帮助！

使用“begin”属性启动带有关键帧的SVG动画

0 个答案: