Question

我有一个SVG接口，我想加载各种用户选择的SVG地图。用户通过单击按钮启动加载地图。一旦加载到其蒙版区域，地图将是可拖动的（如果您愿意，可以平移）并且可能是可缩放的。

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

似乎＆＃34;使用＆＃34;命令可能是答案的一部分，但我发现的例子如下：

<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将完成您想要的任务。< / p>

首先，您要使用SVG image元素来保存您正在加载的外部svg。这可以是静态image元素，也可以在SVG＆＃34;按钮＆＃34;的鼠标向上事件期间创建它。

创建image并相应地设置其属性后，通过将其附加到svg标记将其附加到DOM。我注意到你有rect名为＆＃34; target＆＃34;，我认为你打算用它作为容器或占位符来插入外部svg。但是，由于您可以设置x的{{1}}和y属性，因此无需拥有image。

要从评论中回答您的问题 - 通过js动态添加rect元素没有固有的优势。相反，您可以将其静态添加到image标记内的标记，也可以将其默认大小设置为（0,0）。触发鼠标按下事件后，您只需设置其他属性，例如要加载的特定svg的{{1}}。

这是调整鼠标向上事件处理程序。请注意，它正在检查是否已添加xlink:href元素并重新使用它。这可能是也可能不是你的意图。基于您具有静态位置和尺寸的事实，我会说您可以重复使用相同的.svg元素。我在image坐标的赋值中添加了一些逻辑，以根据单击的按钮给出正在更改的image元素的可视指示。

将外部SVG加载到SVG中

1 个答案: