Question

我在引导程序选项卡中显示了一些SVG对象

<object
 className="test_card"
 type="image/svg+xml"
 data={"http://127.0.0.1:8000/static/images/card_layout.svg"}>
    Your browser does not support SVGs
</object>

问题在于，每当我更改活动标签时，在显示SVG图像之前会有短暂的延迟，就像页面正在加载它们一样。

如果我使用<img/>显示SVG，它们会在我激活选项卡时保持加载并立即显示，但我需要能够动态修改某些SVG内容，所以我不能使用它

如何保存SVG图片？

Answer 1

svg图片和图标很慢。您需要在web fonts中转换它们以提高性能。有关更多详细信息，请查看此文章。 http://frozeman.de/blog/2013/08/why-is-svg-so-slow/

Answer 2

我想出了一个解决方案。我将svg文件加载到一个字符串中，而不是对象，并在我的html中动态内联它。

我通过jquery AJAX调用得到 SVG 字符串：

$.get("/static/images/cardLayout.svg?",
            (data) => {
                svgString = new XMLSerializer().serializeToString(data.documentElement);
            }
        );

这给了我代表SVG的字符串。

从那里开始，我正在使用：

<div dangerouslySetInnerHTML={{__html: svgString}} />

使用<object>显示相同的内容，但svg现在已内联，并且每次更改活动标签时都不会卸载。

如果您没有使用React

我没有测试它，但是使用纯JS我认为你可以使用这个问题的答案将字符串转换为dom元素：Converting HTML string into DOM elements?

更改活动选项卡时，Bootstrap选项卡中的SVG对象将被卸载

2 个答案: