nicht angemeldet einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
einsiedler
Hallo liebe Forumer, Ich bin gerade dabei einen Text (eine Überschrift) in einer SVG vertikal zu positionieren UND, das dann im IE auch die eigentümliche Breite beibehalten wird. Mir hatte der Rolf auch schon ein wenig weitergeholfen (DANKE dafür!) ABER im IE wird diese Überschrift verkleinert und irgendwie komisch dargestellt. Nungut, jetzt habe ich von einem paddin-bottom-hack gelesen, das ich nun angewendet habe. Hier mein Quellcode:
`<h1 class="scaling-svg-container"
style="padding-bottom: 24.0385%">
<svg viewBox="0 0 50 208" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg">
<path id="verticalPath" fill="none" stroke="none" d="M37.05,208 V0"/>
<rect x=4 y=4 width=42 height=200 stroke-width="3" stroke="#ff6e00" fill="none"/>
<text x="104.3" text-anchor="middle" fill="#ff6e00">
<textpath href="#verticalPath">Meine Überschrift</textpath>
</text>
</svg>
</h1>`
UND mein CSS
h1 {
display: flex;
flex: 0 0 3em;
min-height: 5em;
flex-direction: column;
justify-content: center;
align-content:center;
font-family: 'Variable-Bold';
font-size: 1.6em;
line-height: 1;
letter-spacing:0;
margin-right: 0.6em;
border: 6px dotted yellow;
}
.scaling-svg-container {
position: relative;
width: 100%;
padding: 0;
padding-bottom: 100%;
}
h1 svg {
display: inline-block;
height: 100%;
max-height: 13em;
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
Soweit so gut, IM IE wird die Breite JETZT genauso wie in allen anderen Browsern beibehalten/dargestellt.
NUR was ich jetzt (im IE) komisch finde, es sieht momentan so aus:
Die Überschrift wird innerhalb des Bereiches mit (orangenem) Border ab der Mitte (hier mit gelbem Strich angedeutet) nach oben hin angezeigt! WARUM bitteschön DAS DENN?? Warum wird die Überschrift nicht von ganz unten nach oben hin angezeigt? Was ist hier im Quelltext falsch? Und DAS nur im IE!
B) In allen anderen Browsern wird die orange umrandete Überschrift jetzt nicht mehr (vertikal) Mittig (im hochkanten gelben, dotted Bereich) dargestellt, das display flex; und flex-direction: column; justify-content: center; align-content:center; , alldass funktioniert jetzt wohl nicht mehr, nehme mal an das hat mit der position: relative; / position: absolute; zu tun. Mit welcher Möglichkeit kann ich nun in (beiden) Richtungen (was halt justify-content: center; align-content:center; besorgen) diese Überschrift (mittig) positionieren? Wie macht man das nun?
Achja: Ein Beispiel kann man hier angucken (Ich ändere hier aber die Aufteilung!)
Und hier noch Rolfs Fiddle, der mir geholfen hat: Fiddle
DANK, für Eure Hilfe!
Der Misanthrop
Hallo einsiedler,
Ich bin gerade dabei einen Text (eine Überschrift) in einer SVG vertikal zu positionieren UND, das dann im IE auch die eigentümliche Breite beibehalten wird.
Habe es jetzt nicht weiter prüfen können, aber ändere die Element-Schreibweise von textpath -> textPath.
Grüße,
Thomas
Danke Dir, werde es ausprobieren.
Gruß der misanthrop
Hallo Thomas,
habe es ausprobiert und mein Quelltext ist:
`<h1>
<svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="verticalPath" fill="none" stroke="none"
d="M40,250 V0 Z"/>
</defs>
<use xlink:href="#verticalPath" fill="none" stroke="none" />
<text x="125" text-anchor="middle">
<textpath xlink:href="#verticalPath">Meine Überschrift</textpath>
</text>
<rect x=4 y=4 width=42 height=242 stroke-width="5" stroke="orange" fill="none"/>
</svg>
</h1>`
Bei Opera , Chrome und im Firefox sieht es recht ordentlich aus: Test-Umgebung
Nur im Edge irgendwiue befremdlich: 
Woher kommt das? Was ist da noch falsch?
MFG der misanthrop
Hallo einsiedler,
textPath sollte auch im IE grundsätzlich funktionieren.
Ich würde hier eher den Text rotieren, wenn es SVG sein soll:
<svg>
<rect x="0" y="0" width="50" height="300" stroke-width="5" stroke="orange" fill="none"/>
<text x="40" y="150" text-anchor="middle" font-size="36"
transform="rotate(-90,40,150)">Meine Überschrift</text>
</svg>
Grüße,
Thomas
Ist ja ganz hübsch.
Aber eine nachfrage, wie ist es damit ob alle Browser auch transform-rotate kennen? Wie sieht es da aus?
Habe nun folgendes:
<h1>
<svg viewBox="0 0 50 250" preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg">
<rect x="4" y="3" width="42" height="242" stroke-width="5" stroke="orange" fill="none"></rect>
<text x="66" y="148" text-anchor="middle" font-size="35"
transform="rotate(-90,40,150)">Tassilo Sturm</text>
</svg>
</h1>
Chrome , opera und Firefox machens obwohl die Schriftgröße unterschiedlich ist, aber egal.
Im edge und 10er machens, aber bei edge muss man einmal auf den Schriftzug klicken dann erscheint er erst, weiß nicht was das wieder ist.
Link zur Demoversion in der Test-Umgebung
Im 10er macht er es auch, den 9er kann man glaub ich vernachläßigen, oder? Ansonsten könnte der Schriftzug hier in den Fall horizontal erscheinen oder gibt es da auch ein -ms-transform ?
Hmmmmmm.... aber Danke!
der misanthrop
Also das mit der Schriftgröße hat sich von selbst gelöst, g öfters mal das cache leeren.
Nur das halt im Edge ein leeres Feld angezeigt wird wenn man mit dem cursor kurz darauf tippt (wo eigentlich der schriftzug ist) dann wird er sichtbar, sehr seltsam das. Muss ich das jetzt akzeptieren?
Nunja, gute n8
der misanthrop
Hallo einsiedler,
Nur das halt im Edge ein leeres Feld angezeigt wird wenn man mit dem cursor kurz darauf tippt (wo eigentlich der schriftzug ist) dann wird er sichtbar, sehr seltsam das. Muss ich das jetzt akzeptieren?
Da beißt sich irgendwie etwas mit dem Flex-Gedöns. ;)
Grüße,
Thomas
Und was mach ich dagegen? Altmodisch eine Tabelle nehmen? Gruß der misanthrop
Inzwischen habe ich folgendes herausgefunden:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/10691117/
Dort hatte Shashank H. folgendes gepostet:
Workarounds
Some solutions I found online were that I set svg elements to do svg {position: absolute}
I’ve also figured out that setting the wrapper element as inline-block also prevents the crash .svg-wrapper {display: inline-block}
Bitte hilf mir wie das nun in meinem Fall aussähe, wo müsste im Fall a) position absolute gesetzt werden , aber dann müsste doch auch irgendwo vorher position relative gesetzt werden. Wie sähe soetwas aus.
im Fall b) Wie bringe ich nun einen wrapper mit {display: inline-block} ins Spiel. Wie sähe das aus.
bitte unterstütze mich.
MFG der misanthrop
Zuallererst, es ist möglich diesen IE Crash mithilfe von display: inline-block; zu verhindern. Ich habe das in meiner Struktur nun angewendet.
Eine Frage, aber ist es möglich mein SCG zu skalieren, wenn zum Beispiel das Fenster nur in der Höhe zusammengestaucht wird?
Ich habe nun folgendes: DEMO Website
Mein svg das sich in einer <header> - Box befindet hat allerdings eine feste Höhe von 100vh um es immer mittig zu zentrieren.
Wäre das für mich irgendwie möglich?
der misanthrop