it-swarm.com.de

SVG-Positionierung

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

  1. Wie positionieren die meisten Leute eine Gruppe von Elementen, die Sie gemeinsam verschieben möchten?
  2. Gibt es ein Konzept der relativen Positionierung? z.B. relativ zu seinem Elternteil
174
ChrisInCambo

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

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

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

Links: Beispiel from die SVG 1.1-Spezifikation

245
Aaron Digulla

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 .

54
Kağan Kayal

Wie in dem anderen Kommentar erwähnt, ist das transform-Attribut für das g -Element das, was Sie wollen. Verwenden Sie transform="translate(x,y)", um das g zu verschieben, und die Objekte innerhalb des g werden relativ zum g verschoben.

30
codedread

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

Der erste, der <g> Mit dem Attribut transform verwendet, wie Aaron geschrieben hat. Sie können jedoch nicht einfach ein x -Attribut für das Element <g> Verwenden.

Die andere Möglichkeit ist die Verwendung eines verschachtelten Elements <svg>.

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

Auf diese Weise ist das Svg # group1 in #parent verschachtelt, und das x=10 Ist relativ zum übergeordneten Svg. Sie können jedoch das transform -Attribut nicht für das <svg> - Element verwenden, was im Gegensatz zum <g> - Element steht.

16
fengshuo