Ошибка объявления функции в svg - FireBug Mozilla

222

05 апреля 2017, 16:10

Использую вот такую конструкцию для динамической смены значений в SVG-файле:

window.svgload_html = function(evt) { 
  var svg = evt.target, //Вот он, корневой узел DOM SVG 
      f = false, fig1 = svg.getElementById("fig1"), fig2 = svg.getElementById("fig2"); 
  setInterval(function() { 
    f = !f; 
    fig1.attributes["fill"].value = f ? "black" : "red"; 
    fig1.attributes["stroke"].value = f ? "red" : "black"; 
    fig2.attributes["fill"].value = f ? "red": "black"; 
    fig2.attributes["stroke"].value = f ? "black" : "red"; 
  }, 1000); 
};

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1"  
		viewBox="0 0 200 100"  
		preserveAspectRatio="xMidYMid meet"  
		onload="svgload_svg(evt);"  
		xmlns:xlink="http://www.w3.org/1999/xlink"  
		xmlns:ev="http://www.w3.org/2001/xml-events"  
		xmlns="http://www.w3.org/2000/svg"> 
 
<defs> 
<script type="application/ecmascript"><![CDATA[ 
function svgload_svg(evt) { 
 
  var w = window, w0 = null; 
  while (w && !w.svgload_html && w != w0) { 
    w0 = w; 
    w = w.parent; 
  } 
  if (w) 
 
  // вот на эту строку ссылается Mozilla, считая её ошибочной 
  w.svgload_html(evt); 
} 
]]></script> 
</defs> 
 
<rect id="fig1" x="10" y="10" width="80" height="80" fill="red" stroke="black" stroke-width="10" /> 
<circle id="fig2" cx="150" cy="50" r="40" fill="black" stroke="red" stroke-width="10" /> 
</svg>

Всё прекрасно работает в двух браузерах - CHROME и OPERA, но MOZILLA снова отличился. Выкидывает ошибку: TypeError: w.svgload_html is not a function ссылаясь на эту строку: w.svgload_html(evt); и стопорит дальнейшее исполнение скрипта:

Друзья, как обойти эту проблему? Спасибо...

P.S. Попробовал объявить функцию выше, но ничего не вышло и вот почему. Решил в отладчиках браузеров сравнить вывод svg-файла, в котором и объявляется функция w.svgload_html(evt); и оказалось, что Mozilla попросту не отображает, вырезает содержимое. Поэтому и ругается на функцию, потому что попросту её нет. Как тут побороть? Посоветуйте...

Answer 1

Нашёл решение самостоятельно - просто сгенерировал элемент:

// Генерируем и вставляем элемент 
var object = document.createElement('object'); 
document.getElementById('monitor_svg').appendChild(object); 
 
object.setAttribute( 'type', 'image/svg+xml' ); 
object.setAttribute( 'width', '420' ); 
object.setAttribute( 'height', 'auto' ); 
object.setAttribute( 'data', '//.../file.svg' ); 
 
// Объявляем функцию 
window.svgload_html = function(evt) { 
  var svg = evt.target, //Вот он, корневой узел DOM SVG 
      f = false, fig1 = svg.getElementById("fig1"), fig2 = svg.getElementById("fig2"); 
  setInterval(function() { 
    f = !f; 
    fig1.attributes["fill"].value = f ? "black" : "red"; 
    fig1.attributes["stroke"].value = f ? "red" : "black"; 
    fig2.attributes["fill"].value = f ? "red": "black"; 
    fig2.attributes["stroke"].value = f ? "black" : "red"; 
  }, 1000); 
};

<!-- вставляем элемент object в div --> 
<div id="monitor_svg" class="uk-text-center"></div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите пожалуйста решить задачку [требует правки]

http://1zvdru/provekra-1 вот пример, не могу связать все 3 карусели, работают но криво, помогите решить проблему

228

javascript

Вывод div'ов через цикл for

Есть функцияВ данной редакции она выводит три примера на сложение (+) с результатом не больше 10

232

javascript

Как задать заголовок Content-Length в Express.js

Пытаюсь разобраться с этой документациейhttps://developer

223

javascript

Задание из Codebra JS

дальше не смог свойства задать для объекта

294