Javascript 如何从SVGJS 3中的外部文件加载SVG？_Javascript_Svg_Svg.js

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

javascript svg

Javascript 如何从SVGJS 3中的外部文件加载SVG？,javascript,svg,svg.js,Javascript,Svg,Svg.js,如何从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/

如何从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>


$（文档）.ready（函数（）{
var draw=SVG（）；
var image=draw.use（'svgimage'，'image.svg'）
});

然而，我可以看到Chrome加载了“image.svg”文件，但它似乎对它没有任何作用，而且JS控制台上也没有错误

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

我做错了什么？

这段代码在2.x中也不起作用。似乎您应该仔细阅读

元素。“使用”不会将图像加载到Dom中，前提是您可以对其进行操作。它用于镜像现有元素。因此，当调用“use”时，传入要镜像的元素的ID。但是，也可以从外部SVG镜像元素。因此，您给出了第二个参数，即您可以传入URL。但是，您不能像这样操作svg，因为“use”创建了一个阴影Dom来显示元素，因此它不可编辑。如果这已经是您想要的，您可以将svg图像加载到“img”标记中。但是，如果您真的想在加载图像后对其进行操作，则必须发出Ajax请求并将svg实际放入Dom中，以便svg.js能够访问它

举个例子：正如前面指出的，“使用”并不是你想要的。然而，还有第二个错误。您永远不会将svg文档附加到Dom。快速查看Dom检查器应该会发现这一点。您要做的是使用

SVG（）.addTo（'#someId'）

。但是，如上所述，您很可能希望将外部svg放入Dom中。因此，要使用已经在Dom中的SVG.js获取SVG，请使用

SVG（ID）