SVGGraphicsElement: Methode getBBox()

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Methode getBBox() des Interfaces SVGGraphicsElement gibt das kleinste Rechteck zurück, das das Element enthält. Das Rechteck wird im Benutzerkoordinatensystem des Elements gemessen, wobei die Geometrieattribute des Elements und seiner Nachfahren berücksichtigt werden.

Standardmäßig umfasst das Rechteck nur die Form des Elements. Mit dem Parameter options können Sie zusätzlich die Kontur und die Marker einbeziehen sowie das Rechteck auf den Teil des Elements beschränken, den sein Clipping-Pfad sichtbar lässt.

Hinweis: getBBox() gibt den Begrenzungsrahmen zum Zeitpunkt des Aufrufs zurück, auch wenn das Element noch nicht gerendert wurde. Außerdem werden Transformationen, die auf das Element oder seine Elternelemente angewendet wurden, nicht berücksichtigt.

Hinweis: getBBox() gibt andere Werte zurück als getBoundingClientRect(), da Letzteres Werte relativ zum Viewport zurückgibt.

Syntax

getBBox()
getBBox(options)

Parameter

options Optional

Ein Objekt, das steuert, welche Teile des Elements in den Begrenzungsrahmen einbezogen werden. Es kann die folgenden Eigenschaften haben:

fill Optional: Ein boolescher Wert, der angibt, ob die Form des Elements in den Begrenzungsrahmen einbezogen wird. Der Standardwert ist true. Die Form wird auch dann einbezogen, wenn das Element keine Füllung hat, sodass ein Element mit auf none gesetztem fill dennoch zum Begrenzungsrahmen beiträgt.
stroke Optional: Ein boolescher Wert, der angibt, ob die Kontur des Elements zusammen mit ihren Linienkappen und Linienverbindungen in den Begrenzungsrahmen einbezogen wird. Der Standardwert ist false. Dies hat keine Auswirkung, wenn die Eigenschaft stroke auf none gesetzt ist.
markers Optional: Ein boolescher Wert, der angibt, ob die Marker des Elements in den Begrenzungsrahmen einbezogen werden. Der Standardwert ist false. Jeder Marker trägt die darin gezeichneten Formen bei, nicht jedoch den gesamten Bereich, der durch seine Attribute markerWidth und markerHeight definiert wird.
clipped Optional: Ein boolescher Wert, der angibt, ob der Begrenzungsrahmen auf den Teil des Elements beschränkt wird, den sein clip-path sichtbar lässt. Der Standardwert ist false.

Rückgabewert

Ein DOMRect-Objekt, das den Begrenzungsrahmen im Benutzerkoordinatensystem des Elements beschreibt, unabhängig von Transformationen, die auf das Element oder seine Elternelemente angewendet wurden.

Hinweis: Browser geben derzeit ein in SVG 1.1 definiertes SVGRect-Objekt zurück, das dieselben Eigenschaften x, y, width und height besitzt, aber keine DOMRect-Instanz ist.

Beispiele

Begrenzungsrahmen vergleichen

Dieses Beispiel umrandet dasselbe <g>-Element zweimal. Die grüne Umrandung ist ein SVG-<rect>, das mit dem von getBBox() zurückgegebenen Rechteck positioniert wird, und die rote Umrandung ist ein absolut positioniertes <div>, das mit dem von getBoundingClientRect() zurückgegebenen Rechteck positioniert wird. Beide Umrandungen umfassen denselben Text, aber die darunterstehenden Werte unterscheiden sich: getBBox() gibt Benutzereinheiten an, während getBoundingClientRect() CSS-Pixel relativ zum Viewport angibt.

HTML

html

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <g id="greeting">
    <text x="5" y="16" transform="scale(2, 2)">Hello World!</text>
    <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">
      Hello World Again!
    </text>
  </g>
  <rect id="bbox" stroke="green" stroke-width="2" fill="none" />
</svg>

<div id="client-rect"></div>
<ul id="legend"></ul>

CSS

css

svg {
  max-width: 400px;
}

#client-rect {
  position: absolute;
  box-sizing: border-box;
  border: 2px dashed red;
}

ul {
  padding-inline-start: 1em;
  font-family: monospace;
  line-height: 1.5;
}

JavaScript

const greeting = document.querySelector("#greeting");
const legend = document.querySelector("#legend");

const bbox = greeting.getBBox();
const outline = document.querySelector("#bbox");
outline.setAttribute("x", bbox.x);
outline.setAttribute("y", bbox.y);
outline.setAttribute("width", bbox.width);
outline.setAttribute("height", bbox.height);

const clientRect = greeting.getBoundingClientRect();
const overlay = document.querySelector("#client-rect");
overlay.style.left = `${clientRect.x + window.scrollX}px`;
overlay.style.top = `${clientRect.y + window.scrollY}px`;
overlay.style.width = `${clientRect.width}px`;
overlay.style.height = `${clientRect.height}px`;

for (const [label, rect] of [
  ["getBBox()", bbox],
  ["getBoundingClientRect()", clientRect],
]) {
  const item = document.createElement("li");
  item.textContent = `${label} → ${rect.x.toFixed(1)}, ${rect.y.toFixed(1)}, ${rect.width.toFixed(1)}, ${rect.height.toFixed(1)}`;
  legend.append(item);
}

Ergebnis

Optionen für Begrenzungsrahmen

Dieses Beispiel zeichnet einen Pfad mit einer dicken Kontur, einem Marker an jedem Ende und einem Clipping-Pfad. Jeder Aufruf von getBBox() aktiviert eine weitere Option, und jedes resultierende Rechteck wird in einer anderen Farbe umrandet: die Form allein in Rot, die hinzugefügte Kontur in Grün, die hinzugefügten Marker in Orange und das zugeschnittene Ergebnis in Schwarz.

HTML

html

<svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerUnits="userSpaceOnUse"
      markerWidth="30"
      markerHeight="30">
      <circle cx="5" cy="5" r="5" fill="rebeccapurple" />
    </marker>
    <clipPath id="clip">
      <rect x="40" y="40" width="120" height="80" />
    </clipPath>
  </defs>

  <path
    id="chevron"
    d="M 50 100 L 100 50 L 150 100"
    fill="none"
    stroke="cornflowerblue"
    stroke-width="20"
    marker-start="url(#dot)"
    marker-end="url(#dot)"
    clip-path="url(#clip)" />

  <g fill="none" stroke-width="1">
    <rect id="fill-box" stroke="red" />
    <rect id="stroke-box" stroke="green" />
    <rect id="markers-box" stroke="orange" />
    <rect id="clipped-box" stroke="black" />
  </g>
</svg>

<ul id="legend"></ul>

CSS

css

svg {
  max-width: 400px;
}

ul {
  padding-inline-start: 1em;
  font-family: monospace;
  line-height: 1.5;
}

JavaScript

const chevron = document.querySelector("#chevron");
const legend = document.querySelector("#legend");

const variants = [
  { id: "fill-box", label: "getBBox()", options: {} },
  {
    id: "stroke-box",
    label: "getBBox({ stroke: true })",
    options: { stroke: true },
  },
  {
    id: "markers-box",
    label: "getBBox({ stroke: true, markers: true })",
    options: { stroke: true, markers: true },
  },
  {
    id: "clipped-box",
    label: "getBBox({ stroke: true, markers: true, clipped: true })",
    options: { stroke: true, markers: true, clipped: true },
  },
];

for (const { id, label, options } of variants) {
  const box = chevron.getBBox(options);

  const outline = document.querySelector(`#${id}`);
  outline.setAttribute("x", box.x);
  outline.setAttribute("y", box.y);
  outline.setAttribute("width", box.width);
  outline.setAttribute("height", box.height);

  const item = document.createElement("li");
  item.style.color = outline.getAttribute("stroke");
  item.textContent = `${label} → ${box.x.toFixed(1)}, ${box.y.toFixed(1)}, ${box.width.toFixed(1)}, ${box.height.toFixed(1)}`;
  legend.append(item);
}

Ergebnis

Spezifikationen

Spezifikation
Scalable Vector Graphics (SVG) 2 # __svg__SVGGraphicsElement__getBBox

Browser-Kompatibilität

Siehe auch

getBBox im SVG Primer

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden