Czy istnieje „łatwy” sposób DOM na uzyskanie przekształconej pozycji grupy (środek lub początek) i obwiedni (szerokość, wysokość)?

<g> jako logiczny tag kontenera nie ma atrybutów geometrycznych poza transform, których używają jego dzieci.

let o = document.getElementById("o");
let g = document.getElementById("g");

o.textContent += "rect  x = " + r.x.baseVal.value + "\n";
o.textContent += "group x = " + g.x.baseVal.value + "\n";  // TypeError: g.x is undefined
svg{background-color:#f3f3f3}
<svg viewBox="0 0 200 200" width="200">
<g id="g" transform="translate(100,100)" >
  <rect id="r" width="100" height="100" ></rect>
</g>
</svg>
<div id="o"></div>

Więc prawdopodobnie wymagane jest iterowanie wszystkich dzieci i obliczenie sumy ich obwiedni (w tym transformacji)?


Poniższe polecenie zwraca obwiednię grupy bez transformacji:

let o = document.getElementById("o");
let g = document.getElementById("g");

o.textContent += "getBBox().x = " + r.getBBox().x + "\n";
o.textContent += "getBBox().y = " + r.getBBox().y + "\n";
o.textContent += "getBBox().width = " + r.getBBox().width + "\n";
o.textContent += "getBBox().height = " + r.getBBox().height + "\n";
svg{background-color:#f3f3f3}
<svg viewBox="0 0 200 200" width="200">
<g id="g" transform="translate(100,100)" >
  <rect id="r" width="100" height="100" ></rect>
</g>
</svg>
<div id="o"></div>
0
handle 19 grudzień 2019, 12:43
1
Zadzwoń do getBBox. Działa to na , a także na poszczególnych elementach liścia.
 – 
Robert Longson
19 grudzień 2019, 12:52
Dzięki, teraz wystarczy zmienić wynik - czy Ty też znasz na to metodę?
 – 
handle
19 grudzień 2019, 13:02
1
Utwórz element nadrzędny i pobierz obwiednię tego elementu.
 – 
Robert Longson
19 grudzień 2019, 13:41

1 odpowiedź

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox

Funkcja SVGGraphicsElement.getBBox() pozwala nam określić współrzędne najmniejszego prostokąta, w którym mieści się obiekt. Zwracane współrzędne odnoszą się do bieżącej przestrzeni svg, tj. po zastosowaniu wszystkich atrybutów geometrii na wszystkich elementach zawartych w elemencie docelowym.

Ale również:

Zwróconą wartością jest obiekt SVGRect, który definiuje obwiednię skrzynka. Ta wartość jest niezależnie od jakiejkolwiek transformacji atrybutu zastosowane do niego lub elementów nadrzędnych.

0
2 revs 19 grudzień 2019, 12:59