javascript - 将外部 SVG 加载到 SVG 中

Question

我有一个 SVG 界面，我想在其中加载各种用户选择的 SVG map 。用户通过单击按钮来启动 map 的加载。一旦加载到其 mask 区域， map 就可以拖动(如果您愿意，可以平移)并且可能可以缩放。

(我的心理模型(我知道这可能会妨碍我)是 Flash AS loadMovie() 命令，它将外部 .swf 加载到舞台上的命名对象中。然后，外部 .swf 继承属性，包括目标对象的名称。)

看来“use”命令可能是答案的一部分，但我找到的示例如下所示:

<svg viewBox="0 0 100 100">
   <use xlink:href="defs.svg#icon-1"></use>
</svg>

而我想到的更像是这个片段(缩写，而不是功能代码):

<polygon id="button" onmouseup="loadsvg(buttonname)"/>
function loadsvg(fileref) {
    [some code here referencing the external SVG and the object to load it into]
}

有人能给我提供一个像这样工作的交互式 SVG 示例吗？其中有一个按钮调用引用外部文件和目标对象的加载函数？或者我是否需要考虑一种不同的、受 ActionScript 影响较小的架构？

Answer 1

根据评论修改答案并添加引用文件

我误解了最初的问题。如果您想加载一组要重复使用的资源那么您可能需要查看use元素，但似乎image会完成你想要的。

首先，您需要使用 SVG image 元素来保存正在加载的外部 svg。这可以是静态 image 元素，或者您可以在 SVG“按钮”的鼠标松开事件期间创建它。

创建image并相应地设置其属性后，通过将其附加到svg标记将其附加到DOM。我注意到您有一个名为“target”的 rect，我认为您打算将其用作容器或占位符来插入外部 svg。但是，由于您可以设置 image 的 x 和 y 属性，因此不需要 rect 。

从评论中回答您的问题 - 通过 js 动态添加 image 元素没有固有的优势。相反，您可以将其静态添加到 svg 标记内的标记中，也许将其默认大小设置为 (0, 0)。当触发鼠标释放事件时，您只需设置其他属性，例如要加载的特定 .svg 的 xlink:href。

这里是调整后的鼠标松开事件处理程序。请注意，它正在检查 image 元素是否已添加并重用它。这可能是也可能不是您的意图。基于您具有静态位置和尺寸的事实，我想说您可以重复使用相同的 image 元素。我在 x 坐标的分配中添加了一些逻辑，以直观地指示根据单击的按钮而更改的 image 元素。

 function loadfile(mode) {
    console.log("mode is "+mode);

    var imageElement = document.querySelector("image");
    var x = mode === 'a' ? 40 : 60;

    if(imageElement === null) {
        imageElement = document.createElementNS("http://www.w3.org/2000/svg", "image");      
        imageElement.setAttribute("y",164);
        imageElement.setAttribute("width",707);
        imageElement.setAttribute("height",407);
        imageElement.setAttribute("fill","#d6d6d6");
        imageElement.setAttributeNS("http://www.w3.org/1999/xlink", "href", "art-b.svg");
        document.querySelector("svg").appendChild(imageElement);
    }


    imageElement.setAttribute("x",x);
}