如何从 SVGJS 3 中的外部文件加载 SVG？答案

【问题标题】：How can I load an SVG from an external file in SVGJS 3?如何从 SVGJS 3 中的外部文件加载 SVG？
【发布时间】：2020-06-05 01:37:21
【问题描述】：

如何在 SVGJS 3 中从外部文件加载 SVG？ 2.7 版有很多示例，但我找不到任何适用于 SVG.JS 3 的方法。即使是文档中的那个也不适合我：

文档中的示例是：

var use = draw.use('elementId', 'path/to/file.svg')

所以在我的示例中使用这个，我假设以下代码可以工作：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.16/svg.min.js"></script>
</head>
<body>

<div id="svgimage" style="width: 1000px;height:1000px"></div>

<script>
    $(document).ready(function () {

        var draw = SVG();
        var image = draw.use('svgimage', 'image.svg')

    });
</script>

</body>
</html>

但是我可以看到 Chrome 加载了“image.svg”文件，但它似乎没有做任何事情，并且 JS 控制台上没有错误。

如果我在 F12 中检查 DOM，我看不到 SVG 的任何迹象。

我做错了什么？

【问题讨论】：

标签： javascript svg svg.js

【解决方案1】：

此代码在 2.x 中也不起作用。看来您应该阅读<use> 元素。如果您可以操作它，“使用”不会将图像加载到 Dom 中。它用于镜像现有元素。因此，当您调用“使用”时，您会传入要镜像的元素的 ID。但是，您也可以从外部 svg 镜像元素。因此，您提供了第二个参数，您可以传入一个 URL。但是，您不能像那样操作 svg，因为“使用”会创建一个阴影 Dom 来显示元素，因此它是不可编辑的。如果这已经是您想要的，您可以将 svg 图像加载到“img”标签中。但是，如果您真的想在加载图像后对其进行操作，则必须发出 Ajax 请求并将 svg 物理放入 Dom 以便 svg.js 可以访问它。

以您的示例为例：正如所指出的，“使用”不是您想要的。然而，还有第二个错误。您永远不会将 svg 文档附加到 Dom。快速浏览一下 Dom 检查器应该会告诉你这一点。你想要做的是使用SVG().addTo('#someId')。但是，如上所述，您很可能希望将外部 svg 放入 Dom。因此，要使用已经在 Dom 中的 svg.js 获取 SVG，请使用 SVG(ID)

【讨论】：