Выберите и измените элемент SVG внутри тега <object>с помощью внешнего JavaScript

Question

Я работаю над картой Африки: в моем main.html элементе объекта, который содержит внешний файл 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 мне удается выбрать SVG внутри тега <object>, чтобы изменить, например, цвет какой-либо страны:

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.

Но если я добавлю ту же функцию в тег <script> в моем SVG-файле, он будет работать отлично.

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

Может кто-нибудь объяснить, почему эта функция не работает в моем внешнем js-файле?