5

我有两个 SVG 图像，它们总共有大约 8000 行，并且由几个带有渐变的形状组成。没有图案、过滤器、文本，只有带有笔触、简单或渐变填充的基本图形元素。

目前它们在生成 HTML 时被内联注入，因此源代码变得非常庞大。这是否会降低动画的性能，因此最好以不同的方式嵌入 svg？

嵌入 svg 时是否有一般的经验法则？

问候菲利普

4

1 回答 1

1

如果您使用 HTML5 SVG 标签嵌入 SVG 内联，这不仅会增加 html 文件的大小，还会让 DOM 和您的浏览器渲染器保持忙碌。

如果您使用 iframe，您实际上并不知道它何时被加载或呈现，至少不是所有浏览器都如此。

HTML5 为您提供 JavaScript，这可能是解决方案。只需等待主体加载，然后注入 SVG。

您可以使用body-onLoad或 jQueries ready()-funktion

以下是它在 jQuery 中的实现方式：

<!DOCTYPE html>
<html>
<body>
<div id="svg-01" class="placeholder"></div>
<script src="path/to/jQuery.js"></script>
<script>
$(document).ready(function(){
    $("#svg-01").replaceWith('<svg><!--// some svg //--></svg>');
    });
</script>
</body>
</html>

我什至会更进一步，而是使用 iframe 和gziped SVG 替换它，如此处所述。

于 2013-05-02T14:23:52.263 回答