getBoundingClientRect() nicht wieder die Höhe und Breite des SVG rect

Brauche ich ein paar frische Augen, um mir zu zeigen was ich falsch mache.

Ich will height und width und verwenden Sie Sie, um die position von einem anderen element.

HTML

<g>
    <rect
        class="graphic"
        draggable="data"
        ng-attr-x="{{ data.x }}"
        ng-attr-y="{{ data.y }}"
        ng-attr-height="{{ data.height }}"
        ng-attr-width="{{ data.width }}"
    ></rect>
</g>

Funktion für die Rückgabe Werte möchte ich

function getSVGRectDimensions(element) {
    //logging
    console.log('firstChild', element[0].firstElementChild);
    console.log('firstChild.Clientrect', element[0].firstElementChild.getBoundingClientRect());

    var viewportOffset = element[0].firstElementChild.getBoundingClientRect();
        if (!element.jquery) {
            element = angular.element(element);
        }
        return {
            left: viewportOffset.left,
            height: viewportOffset.height,
            top: viewportOffset.top,
            width: viewportOffset.width
        }
    }

, Wie ich die Funktion verwenden

var svgElement = getSVGRectDimensions(data.element);

In der Konsole bekomme ich

getBoundingClientRect() nicht wieder die Höhe und Breite des SVG rect

Aus den Protokollen können Sie sehen, dass height und width von rect > 0.

<rect class="graphic" draggable="data" ng-attr-x="{{ data.x }}" ng-attr-y="{{ data.y }}" ng-attr-height="{{ data.height }}" ng-attr-width="{{ data.width }}" x="1033.78" y="364" height="46.22000000000003" width="106.8900000000001"></rect>

Und doch, wenn ich rufen Sie die Funktion mit getBoundingClientRect(), height und width = 0.

firstChild.Clientrect ClientRect {} bottom: 60.999996185302734 height: 0 left: 681.1538696289062 right: 681.1538696289062 top: 60.999996185302734 width: 0 __proto__: ClientRect

Warum passiert das?

Ich habe auch versucht, um loszuwerden firstElementChild Ergebnisse, die bei der Rückkehr g statt rect aber noch height und width = 0.

InformationsquelleAutor U r s u s | 2015-09-17
  1. 4

    Laut https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect getBoundingClientRect gibt vier Werte: oben, Links, unten, rechts.
    In der Konsole können Sie sehen, dass diese vier Werte vorhanden sind. Die Berechnung der Breite und Höhe aus diesen Werten ist trivial

    Verwendung:

    var viewportOffset = element[0].firstElementChild.getBoundingClientRect();

    gibt eine DOMRect und dann später:

    return {
        left: viewportOffset.left,
        height: viewportOffset.height,
        top: viewportOffset.top,
        width: viewportOffset.width
    }

    wie gesagt, viewportOffset ist ein DOMRect die nicht Eigenschaften Breite und Höhe. Statt Sie haben rechts, unten.

    so zu arbeiten, Ihre Breite und Höhe, Ihre Rückkehr-code sollte wie folgt Aussehen:

    return {
        left: viewportOffset.left,
        height: viewportOffset.bottom - viewportOffset.top,
        top: viewportOffset.top,
        width: viewportOffset.right - viewportOffset.left
    }
    • Aber viewportOffset.bottom - viewportOffset.top geben würde height als 0 noch.
    InformationsquelleAutor Holger Will
Schreibe einen Kommentar