Question

我想在html中注入svg代码以用于动画目的。使用img，embed，object或iframe标签链接svg对我来说没有用，因为动画考虑了精确的页面定位。它可以直接放入代码，但加载的代码取决于名为＆＃34; name＆＃34;的url变量。根据该变量，我会显示一个端口旋转的小地图，动画就是让一条小船沿着路线移动。

我看到的唯一选择是使用javascript来使用innerHTML注入svg代码，但我必须选择正确的javascript文件，具体取决于＆＃34; name＆＃34; 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。

几个问题：

这可能吗？
是否有另一种注入svg的方法，而不必为每个服务都有一个单独的js文件，可能在anim.innerHTML中放入一个文件名，并使用getUrlVars更改该URL？
< / LI>
感谢您的帮助

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();
});

根据变量包含svg代码

1 个答案: