根据变量包含 svg 代码

Question

我想在 html 中注入 svg 代码以用于动画目的。使用 img、embed、object 或 iframe 标签链接 svg 对我不起作用，因为动画考虑了精确的页面定位。如果我直接输入代码，它就可以工作，但是要加载的代码取决于一个名为“name”的 url 变量。根据该变量，我显示了一个港口旋转的小地图，动画是让一艘小船沿着路线移动。

我看到的唯一选择是使用 javascript 使用 innerHTML 注入 svg 代码，但我必须选择正确的 javascript 文件，具体取决于“名称”url 变量。我将为每个服务提供一个单独的 js。

为了调用图像，我使用以下脚本：

document.write("<img class ='svc-image' src='images/" + getUrlVars()["name"].replace(/\s+/g, '_').toLowerCase() + ".jpg' style='position:absolute;left:370px;top:185px;'>");

那么svg代码是这样的：

<svg style="position:absolute;left:385px;top:175px;z-index:2;height:900px;">
<defs>
<path id="curve" d="M204,98c0,0-8-42-40-48s-57.3,68-57.3,77.3s4,18,4,26.7
s-8.7,58-11.3,69.3c-2.7,11.3-28,120-28.7,124.7c-0.7,4.7-6,24-5.3,36.7c0.7,12.7,1.3,22,10.7,21.3s21.3-8.7,28.7-13.3" 
stroke="black" fill="none" stroke-width="5" />
</defs>
<image xlink:href="images/vsl.png" x="0" y="0" height="42" width="60">
<animateMotion dur="10s"
rotate="auto" fill="freeze" repeatCount="indefinite" >
<mpath xlink:href="#curve"/>
</animateMotion>
</image>
</svg>

我正在尝试使用以下 js 加载它：

var anim = document.getElementById("anim");
document.addEventListener('DOMContentLoaded', function(){
anim.innerHTML = "<svg style='position:absolute;left:385px;top:175px;z-index:2;height:900px;'><defs><path id='curve' d='M204,98c0,0-8-42-40-48s-57.3,68-57.3,77.3s4,18,4,26.7,s-8.7,58-11.3,69.3c-2.7,11.3-28,120-28.7,124.7c-0.7,4.7-6,24-5.3,36.7c0.7,12.7,1.3,22,10.7,21.3s21.3-8.7,28.7-13.3' stroke='black' fill='none' stroke-width='5' /></defs><image xlink:href='images/vsl.png' x='0' y='0' height='42' width='60'><animateMotion dur='10s' rotate='auto' fill='freeze' repeatCount='indefinite' ><mpath xlink:href='#curve'/></animateMotion></image></svg>"; 
});

我希望将 js 文件（在上面的示例中称为 ame.js，（美国的服务））注入到 html 中，但不使用（脚本 src），因为我希望 url 根据url 变量。

类似：

<script src="js/" + getUrlVars()["name"].replace(/\s+/g, '_').toLowerCase() + ".js" type="text/javascript">

我知道它不起作用，但这就是我需要的。将js文件的url设为变量。

几个问题：

1. 这可能吗？

2. 是否有另一种注入 svg 的方法，而不必为每个服务创建一个单独的 js 文件，可以在 anim.innerHTML 中放置一个文件名，然后使用 getUrlVars 更改该 url？

感谢您的帮助

Answer 1

您可以制作一个 ajax 从其他文件中检索 SVG：

WORKING DEMO

var url = getUrlVars()["name"].replace(/\s+/g, '_').toLowerCase();
var anim = document.getElementById("anim");
document.addEventListener('DOMContentLoaded', function(){
  var client = new XMLHttpRequest();
  client.onreadystatechange = function(){
    anim.innerHTML = this.response; 
  };
  client.open("GET", url);
  client.send();
});