SVG-Positionierung

203

Ich spiele mit SVG und habe ein paar Probleme mit der Positionierung. Ich habe eine Reihe von Formen, die im gGruppen-Tag enthalten sind. Ich hatte gehofft, es wie einen Container zu verwenden, damit ich seine x-Position festlegen konnte und dann alle Elemente in dieser Gruppe sich ebenfalls bewegen würden. Das scheint aber nicht möglich zu sein.

Wie positionieren die meisten Leute eine Gruppe von Elementen, die Sie zusammen bewegen möchten?
Gibt es ein Konzept für die relative Positionierung? zB relativ zu seinem Elternteil

svg position grouping ChrisInCambo
quelle

276

Alles im g-Element ist relativ zur aktuellen Transformationsmatrix positioniert.

Um den Inhalt zu verschieben, fügen Sie einfach die Transformation in das g-Element ein:

<g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
</g>

Links: Beispiel aus der SVG 1.1-Spezifikation

Aaron Digulla
quelle

73

Es gibt eine kürzere Alternative zur vorherigen Antwort. SVG-Elemente können auch durch Verschachteln von SVG-Elementen gruppiert werden:

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="10">
    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000;fill: #0000ff"/>
  </svg>
  <svg x="200">
    <rect x="10" y="10" height="100" width="100" style="stroke:#009900;fill: #00cc00"/>
  </svg>
</svg>

Die beiden Rechtecke sind identisch (abgesehen von den Farben), aber die übergeordneten SVG-Elemente haben unterschiedliche x-Werte.

Siehe http://tutorials.jenkov.com/svg/svg-element.html .

Kağan Kayal
quelle

33

Richtig, das SVG-Element kann auch ein Gruppierungselement sein. Ich wollte darauf hinweisen, dass das SVG-Element standardmäßig Clipping implementiert (zumindest im Moment in Chrome). Dies bedeutet, dass kein Überlauf sichtbar ist. Im Gegensatz zum "g" -Element. Setzen Sie einfach overflow = "sichtbar" und Sie sind wieder im Geschäft, wenn dies Sie beißt.

Bladnman

1

Es ist nützlich, wenn Sie eine Gruppe von Elementen mit Prozentsätzen übersetzen möchten: stackoverflow.com/a/17103928/470117

mems

14

Gibt es Nachteile bei der Verwendung von svg anstelle von g?

Grabantot

34

Wie im anderen Kommentar erwähnt, ist das transformAttribut für das gElement genau das, was Sie wollen. Verwenden Sie transform="translate(x,y)"diese Option , um die gUmgebung und die Dinge innerhalb des gWillens in Bezug auf die Bewegung zu bewegen g.

codedread
quelle

22

Es gibt zwei Möglichkeiten, mehrere SVG-Formen zu gruppieren und die Gruppe zu positionieren:

Der erste, der <g>mit transformAttributen verwendet wurde, wie Aaron schrieb. Sie können jedoch nicht einfach ein xAttribut für das <g>Element verwenden.

Die andere Möglichkeit besteht darin, ein verschachteltes <svg>Element zu verwenden.

<svg id="parent">
   <svg id="group1" x="10">
      <!-- some shapes -->
   </svg>
</svg>

Auf diese Weise ist die # group1 svg in #parent verschachtelt und die x=10relativ zur übergeordneten svg. Sie können jedoch kein transformAttribut für ein <svg>Element verwenden, was im Gegensatz zum <g>Element ganz im Gegenteil steht .

Fengshuo
quelle

13

Warum hat <g> kein ax- und y-Attribut, während alle anderen svg-Tags es haben? es bedeutet, dass die Position in einer <svg> immer absolut ist ... keine relative Position,

läuft

2

Open-Source-Komitees sind so.

Muhammad Umer

Ich stimme zu ... es scheint eine schlechte Wahl für das Design zu sein. Um die X-Transformation einer Gruppe einfach zu

erhöhen

9

@ user1952009: Es besteht die Möglichkeit - nur eine Chance -, dass Sie die Designentscheidungen, die in SVG getroffen wurden, nicht wirklich verstehen.

Paul D. Waite

2

<g> dient zur Gruppierung. Es stellt keine Form für sich dar, daher wäre es nicht sinnvoll, einen Ort oder eine Größe zu haben. Es ist jedoch sinnvoll, ein Transformationsattribut zu haben , das Sie wie "Diese Transformation auf die gesamte Gruppe anwenden" lesen können.

AlQafir

SVG-Positionierung

Antworten: