Question

我正在研究main.html中的非洲地图：object元素，其中包含一个外部SVG文件。

<object id="afrika" data="Africa Map.svg" type="image/svg+xml"></object>

在非洲Map.svg中，每个国家都有一个id="country_name"和onmouseover="displayName('country_name')"。

在svg文件的底部，</svg>标记之前，有<text>元素，当鼠标悬停在特定国家/地区上时，我想在其中打印country_name。

<text class="label" id="country-name" x="5" y="200"> </text>

通过我的外部js文件，我想在<object>标签内选择一个SVG来更改例如某个国家/地区的颜色：

window.addEventListener("load", function() {
  var a = document.getElementById("afrika"); 
  var svgDoc = a.contentDocument; 
  var svgItem = svgDoc.getElementById("Algeria"); 
  svgItem.setAttribute( "fill", "lime");
});

但是当我尝试使用函数在country_name中添加<text>

window.addEventListener ("load", function displayName(name) {
  var a = document.getElementById("afrika");
  var svgDoc = a.contentDocument;
  var svgName = svgDoc.getElementById("country-name");
  svgName.firstChild.data = name;

我遇到错误displayName is not defined。

但是，如果我在svg文件的<script>标记中添加了相同的功能，则效果很好。

 <script type="text/javascript">
   <![CDATA[  
      function displayName(name) {
        document.getElementById('country-name').firstChild.data = name;
      }
   ]]>
</script>

有人可以向我解释为什么该功能在我的外部js文件中不起作用吗？

使用外部JavaScript选择并更改<object>标记内的SVG元素

0 个答案: