SVG child element attribute grabbing

Hey guys, I am trying to get see if their is a way to grab the <polygon> height and width. Unfortunately, <path> and <polygon> do not seem to have them and I was wondering if there was a way to do it.

So far I have:

    <svg class="polu" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="300px" height="300px">
       <a class="polu2" xlink:href="deviantart.com" >
         <polygon class="polu3" fill="red" stroke="brown" points="45,2 2,45 45,88 88,45"/>
       </a>
     </svg>

Code (markup):

    (function(){

       "use strict";

       window.onload = function() {
         polygoChk();
       };

       function polygoChk() {
         var polu = document.getElementsByClassName('polu3')[0];
         
         var polyHeight = polu.getAttribute('width');
         
         console.log(polyHeight+ " polygon width");
       };

     })();

Code (markup):

returns null or 0 depending on what I use. So, I'm thinking if I can't get the <polygon> dimensions is there a way to grab the aspect box around the <polygon>?

 

Hi there everlive,

a possible solution has been posted here...

https://forums.digitalpoint.com/threads/using-display-block-on-svg-elements.2775137/#post-19301855​

​

coothead

 

Your problem is you're using px where there shouldn't be any: width="300px" height="300px">

Without the px (200x200):

https://jsfiddle.net/5mHjC/222/

Or you can do the same by giving css to the polu class (100pxx100px):

https://jsfiddle.net/5mHjC/225/