CODEWITHSUNDEEP
javascriptsvg
Shahid
Shahid

Reputation: 105

How to get the height and width of SVG polyline element?

<g class="new class" id="polyline" style="pointer-events: inherit;" opacity="1">
  <polyline id="svg_43" points="268.4,469.4 230.3,469.4 230.3,431.3 268.4,431.3 268.4,469.4" />
</g>

How can we know the height and width of svg polyline element in JavaScript?

Upvotes: 1

Views: 460

Answers (1)

Bharata
Bharata

Reputation: 14175

You have to use the function getBBox() (which is the part of SVG 1.1) like follows:

var polylineBBox = document.querySelector('polyline').getBBox();
console.log(polylineBBox.width);
console.log(polylineBBox.height);
<svg width="100" height="100" viewBox="0 0 100 100">
    <g class="new-class" style="fill:#6c0">
        <polyline points="69, 69
                        30, 69
                        30, 30
                        69, 30
                        69, 69"/>
    </g>
</svg>

Upvotes: 3

Related Questions