将外部SVG加载到SVG

我有一个SVG界面，我想要加载各种用户选择的SVG地图。用户通过单击按钮启动加载地图。一旦加载到它的蒙面区域，地图将是可拖动的（如果你愿意，可以拖动），并且可能是可缩放的。我的心智模式，我知道可能会阻碍，是Flash AS loadMovie（）命令，它将外部.swf加载到舞台上的命名对象中。外部.swf然后继承属性，包括名称目标对象的，）将外部SVG加载到SVG

它出现在“使用”命令可能是答案的一部分，但我发现的例子是这样的：。

<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架构？每评论

来源

2016-01-09 Bill Gregg

修订的答案和另外的参考文件

我误解了最初的问题。如果您想要加载一组要重复使用的资源然后您可能需要查看use元素，但看起来image会完成您想要的操作。

首先，您需要使用SVG image元素来存放您要加载的外部svg。这可以是一个静态的image元素，也可以在SVG“按钮”的鼠标移动事件中创建它。

在创建image并相应地设置其属性后，将它附加到DOM，并将其附加到svg标记。我注意到你有一个名为“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); 
}

来源

2016-01-09 06:47:52

感谢Eric的帮助。我做错了，虽然......没有加载。测试文件是在这里如果你关心看看吧： http://billgregg.net/loadtest/externalloadtest3.svg 应该是加载该文件在同一目录下： HTTP：/ /billgregg.net/loadtest/art-b.svg 另外，在动态创建目标对象时是否有任何特别的优势，而不是拥有反复加载文件的持久对象？ –

@BillGregg我更新了我的回答，以反映您的意见 –

谢谢！今天早上我终于有时间玩了，你的代码工作完美： http://billgregg.net/loadtest/externalloadtest4.svg 我稍微修改它，以加载两个不同的SVGs取决于点击的按钮，在var语句（“var x = mode ==='a'？40：60;”）中用行人if-this-else-that替换看起来像switch switch的操作符： http：// billgregg。 net/loadtest/externalloadtest7.svg 我很感激帮助。 –

将外部SVG加载到SVG

回答

相关问题