Good day! When searching for the greatest height of the path elements in svg for some reason, the height is zero. I do not understand what could be the case, perhaps the object does not have time to load ... Any idea why this is so?

<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>
  • Have you tried to debug the code in rows? - Kromster
  • Try wrapping the whole code in $ ('# graph'). On ('load', function () {.....}); - Talleyran
  • @Talleyran did not help - Silentium
  • @Kromster tried, but didn’t understand what the problem was, I saw that in the each function at path all values ​​= 0 for some reason - Silentium

1 answer 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);

This works in FireFox, but since The object tag creates an attached document from base64, Chrome swears on origin.

In the case of inline svg, everything will work fine.