0

Добрый день! При поиске наибольшей высоты у элементов path в svg почему-то высота равна нулю. Не пойму в чем может быть дело, возможно object не успевает загружаться... Есть идеи почему так?

 <object id="graph" name="graph" type="image/svg+xml" data="data:image/svg+xml;base64,..."></object>
    <script>
      var a = document.getElementById("graph");
      a.addEventListener("load",function() {
        var svgDoc = a.contentDocument;
        var path = svgDoc.getElementsByTagName('path');
        var maxHeight = 0;

        $(path).each(function (i) {
          var rect = path[i].getBoundingClientRect();
          if (rect.height > maxHeight) {
            maxHeight = rect.height;
          }
        });

        $("#graph").height(maxHeight );

        console.log(maxHeight); // 0

      }, false);
    </script>
4
  • Вы пробовали отлаживать код по строкам?
    – Kromster
    Commented 25 янв. 2017 в 10:56
  • Попробуйте обернуть весь код в $('#graph').on('load', function() { ..... });
    – Talleyran
    Commented 25 янв. 2017 в 12:04
  • @Talleyran не помогло
    – Silentium
    Commented 26 янв. 2017 в 8:12
  • @Kromster да пытался, но так и не понял в чем проблема, увидел что в функции each у path все значения = 0 почему-то
    – Silentium
    Commented 26 янв. 2017 в 8:13

1 ответ 1

1
var maxHeight = 0;

$('#graph').contents().find('path').each(function () {
    var height = $(this)[0].getBoundingClientRect().height;
    if (height > maxHeight) {
       maxHeight = height;
    }
});
$("#graph").height(maxHeight);
console.log(maxHeight);

Это работает в FireFox, но, т.к. тег object создает вложенный документ из base64, Chrome ругается на origin.

В случае с inline svg все будет работать отлично.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.