✔ svg-Elemente zentrieren

[DealeyLama]

Hallo

Ist es möglich - per css-Anweisung zum Beispiel - svg-Elemente automatisch zu zentrieren?
Ich habe trotz längerer Suche dazu nichts im Netz gefunden, was mich doch einigermaßen verblüfft hat...

Vielen Dank im voraus und schönen Abend noch...

Alexander Schell

 

[Maik]

Dies lässt sich für das object-Element regeln:

<object data="[SVG-Datei-URI]" type="image/svg+xml"></object>

• CSS-Code für eine horizontale Zentrierung:
  

object {
margin: 0 auto;
width: 400px;
height: 200px;
display: block;
border: 1px solid #000;
}

• CSS-Code für eine horizontale und vertikale Zentrierung:
  

object {
position: absolute;
left: 50%;
margin-left: -200px; /* negative Hälfte von width:400px */
width: 400px;
top: 50%;
margin-top: -100px; /* negative Hälfte von height:200px */
height: 200px;
display: block;
border: 1px solid #000;
}

Der Thread wandert ins CSS-Forum.

 

[DealeyLama]

Hallo...

Danke erst einmal für die Antwort, allerdings ist das nicht ganz das, was ich meinte...
Wahrscheinlich hab' ich mich zu ungenau ausgedrückt...
Ich meinte eher: wie kann ich ein svg-Objekt im svg-Bereich zentrieren? also nicht: wie kann ich ein 'object'-Objekt im html-Code zentrieren?
Für 'text' habe ich mittlerweiele eine Lösung über ein Style-Attribut namens 'textAnchor' gefunden..peinlicherweise kurz nachdem ich die Frage gestellt habe.
Eine gute Erklärung findet man hier: http://www.w3.org/Graphics/SVG/Test/20011026/text-textAnchor-BE-05.html

Aber trotzdem bleibt mein Problem der Zentrierung andereer Objekte, wie 'rect' oder 'circle' und so weiter und so fort...
Ich würde mich sehr freuen wenn mir dabei Jemand helfen könnte...ich bin nämlich kurz davor das mit JavaScript zu machen, also beim starten breite und höhe des svg-Bereichs auslesen, und dann mit den ermittelten Werten positionieren.
Aber ich hasse JavaScript und viel schlimmer: es hasst mich...

Vielen Dank im voraus und schönen Tag noch...

Alexander Schell

 

[Quaese]

Hi,

wenn eine feste Grösse des Elementes gegeben ist, kannst du es über x=50% zentrieren.
Mit Hilfe von transform="translate(-Hälfte der Breite y-Wert)" kannst du es um den negativen
Wert zurückverschieben.

<rect x="50%" y="0" transform="translate(-15 0)" width="30" height="30" style="fill: #f70; stroke: #369; stroke-width: 4;" />

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[DealeyLama]

Hallo...

Vielen Dank für den Tipp; allerdings hat mein Element - ein <rect> - keine feste Größe.
Es soll sich über die gesamte Breite des svg-Bereichs erstrecken - also 'width=100%' - allerdings nicht ganz bis an die Seiten reichen, sondern bis drei, vier Pixel davor. Ich habe die Stroke-Dicke geändert und wenn ich es über 100% reichen lasse liegen Teile der Außenlinien außerhalb des darstellbaren Bereichs.
Entschuldigung, aber ich kann es leider nicht besser erklären...

Schönen Abend noch

Alexander Schell

 

[Quaese]

Hi,

dann versuch es mal mit einer Prozentangabe von 98% und lasse das Rechteck bei 1% in x-Richtung beginnen.

<rect x="1%" y="10%" width="98%" height="10%" style="fill: #f70; stroke: #369; stroke-width: 4;" />

Kannst es ja auch mal mit 99% Breite und 0.5% x-Richtung versuchen - klappt bei mir zumindest im IE.

<rect x="0.5%" y="80%" width="99%" height="10%" style="fill: #f70; stroke: #369; stroke-width: 4;" />

Ciao
Quaese

 

[DealeyLama]

Hallo...

Vielen Dank für das Interesse...
Ich hab' das Problem dann letztendlich ähnlich wie von dir beschrieben gelöst. Allerdings finde ich das so nicht unbedingt befriedigend. Schön wäre zum Beispiel sowas gewesen: width="100% - 5px"...
Aber das geht ja leider nicht...
Vielleicht bau' ich mir mal bei Gelegenheit 'ne JavaScript-Lösung dafür; eine 'center(Element, point)'-Funktion oder so...

Schönen Tag noch...

Alexander Schell