我一直试图在我的网站上运行一个圆圈动画，当您点击div时会触发该动画。以前，我使用50％边界半径的div来做这个可怕的临时方式 - 它几乎没有用。
现在我发现了svgs，我正试图让它以这种方式工作。动画很简单;我已经在svg文件中编写了所有代码。当您单击应该启动动画的div时，它会向div附加<object>，然后将svg文件（带动画）加载到其中。
它运行正常，但问题是，点击和动画开始之间有一点延迟，当然这是在加载svg时。我之前使用圆形div完成动画的方法没有这种延迟。
是否有一种方法可以在加载时将svg文件存储在页面中，但在单击div时创建<object>之前，是否实际显示或触发它？这样它就已经加载了，没有延迟。
目前，我已经做了一个小小的工作，将整个svg代码内联到<object>作为后备选项附加
即
$(selProject).append('<object type="image/svg+xml"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 360 360" enable-background="new 0 0 360 360" xml:space="preserve"><circle cx="180" cy="180" r="0.01" stroke="#FFFFFF" stroke-width="0.5" fill="none"><animate attributeName="r" from="0.01" to="270" dur="0.3" begin="0s" fill="freeze"/><animate attributeName="stroke-width" from="0.5" to="100" dur="0.3" begin="0s" fill="freeze"/></circle></svg></object>')
但由于显而易见的原因，这是一个可怕的解决方法。我还应该添加：在单击div之前不会创建$(selProject)。有许多可点击的div，一旦点击任何一个，就会变成selProject。因此，将<object>附加到每个可点击的div，然后在div变为selProject时在div中激活它不是一个可行的解决方案，因为如果有一个实例，将会产生巨大的性能损失。每个可点击的div中都有<object>。
最佳解决方案允许将<object>存储在某处，隐藏，然后在创建时移动到$(selProject)。
有没有更好的方法来处理我的要求？