当我将带有SVG动画图像的div注入到Bootstrap 5 Off Canvas内的HTML中时,然后以编程方式显示,只有在打开与浏览器集成的开发工具时,动画才会开始.

$("#myDiv").html('<div class="" style="image-rendering: auto;"><img src="/img/loading-spinner.svg"></div>');

我使用的是Chrome,119.0.6045.161(官方版本)(64位)

推荐答案

我通过加载带有"svg"标签的svg解决了这个问题,动画立即开始.

<svg width="40" height="40">       
   <image xlink:href="/img/loading-spinner.svg" width="50" height="50"/>    
</svg>

Html相关问答推荐

将小文本放在输入字段的右侧

如何在不影响子列表的情况下在HTML(OL Li)上同时加数字和列表?

电话号码验证器(Angular )

在css嵌套 Select 器中,尾随的`&;‘是什么意思?

如何修复与导航栏重叠的css网格?

标签数据的XPath?

HTML+CSS+JS动态选中文本高亮 colored颜色 变化

如何在HTML中适当地为单选按钮网格添加标签?

为什么我得不到有错误的字段?迈克尔·哈特尔教程.7.3.3

如何在CSS中延迟触发2个转换?

在Firefox中使用keySplines时,SVG: <animateMotion>不起作用

实验的响应式屏幕尺寸

CSS "overflow"不能显示整个单词

BeautifulSoup用名称列表的findall无法找到另一个目标后面的目标

HTML画布放大/缩小算法与CSS(图像处理)

如何使用动画拆分和对齐文本块

如何在没有容器的情况下沿基线将 div 中的元素居中?

如何使用 html 和 css 为卡片创建此背景框架

绝对定位的 div 与另一个静态定位的 div 的边距顶部一起移动

所有幻灯片上的 Quarto RevealJS 标题