nicht angemeldet
SVG-Maske erstellen ?
Schönen Abend,
ich hoffe ich schaff' es mein Problem anschaulich darzulegen.
Gegeben sei folgende skizzierte Seiten-Struktur:
<style>
#blog{
background: url(img/timeline.png) repeat-y 50%;
}
</style>
<div id="blog">
<div class="post post-left">
<div class="arrow-left"></div>
<!-- POST CONTENT -->
</div>
<div class="post post-right">
<div class="arrow-right"></div>
<!-- POST CONTENT -->
</div>
</div>
Das Ganze sieht dann in etwa folgendermaßen aus: die Timeline in der Mitte und die einzelnen Posts, die links und rechts sich mit einem Pfeil an diese Timeline dranhängen.
MEIN PROBLEM: Dass die Pfeile der Posts scheinbar die Timeline unterbrechen und einen Punkt in der Timeline einfügen funktioniert nur, weil sich die Pfeile auf einem gleichmäßigen Hintergrund befinden. Die Hintergrundfarbe ist bekannt, deshalb funktioniert der Trick.
Ich möchte dies aber mit einem fixen Hintergrundbild realisieren und benötige dazu eine Art Transparenz-MASKE. Die Pfeile sollen die Timeline unterbrechen und man soll das Hintergrundbild trotzdem durchschimmern sehen.
Leider kenn ich mich mit SVG kein bisschen aus. Die Tutorials dazu sind sehr umfangreich und, bevor ich mich da reinknie, wollte ich fragen ob :
1. dies mit SVG überhaupt möglich ist ?
2. jemand evtl. einen Lösungsvorschlag OHNE SVG hat ?
lg
mark
-
Um mein Problem anschaulicher darzustellen:
Die Seite, die ich verlinkt habe hat das selbe Problem: Ändert man die Hintergrundfarbe des <body> auf #000 funktioniert der "Trick" nicht mehr.
-
svg ist ein Grafikformat. Damit kannst du skalierbare Grafiken erstellen, die auch beim Vergrößern/Verkleinern nicht pixelig werden.
Mit deinem Vorhaben hat das allerdings nicht zu tun.
Dazu müsstest du die Timeline in einzelnen Stückchen zeichnen und dafür müsstest du wissen wie lang diese Stückchen sein müssen. Das kannst du aber nicht wissen, da das in jedem Browser unterschiedlich aussehen kann.Das einzige was ich mir vorstellen könnte wäre was mit JavaScript, mit dem du die Positionen der Unterbrechungspunkte berechnest und dann nachträglich anhand dieser Werte die Einzelstückchen der Timeline positionierst.
Ich würde das aber nicht tun, denn das wird wahrscheinlich ein elendes Gefrickel und wenn jemand kein JS eingeschaltet hat, sieht die Seite nicht mehr ansprechend aus.
Dann doch lieber auf die Unterbrechung verzichten und stattdessen nur Punkte auf eine durchgängige Linie setzen.-
svg ist ein Grafikformat. Damit kannst du skalierbare Grafiken erstellen, die auch beim Vergrößern/Verkleinern nicht pixelig werden.
Mit deinem Vorhaben hat das allerdings nicht zu tun.Da widerspreche ich, SVG bietet meinen bescheidenen Kenntnissen zufolge doch entschieden mehr als bloß Vektorgrafiken.
Dann doch lieber auf die Unterbrechung verzichten und stattdessen nur Punkte auf eine durchgängige Linie setzen.
Ja, wenn mir keine andere Lösung einfällt werd ich wohl kapitulieren müssen, aber bis dahin kämpf ich noch 'n bisschen.
-
Da widerspreche ich, SVG bietet meinen bescheidenen Kenntnissen zufolge doch entschieden mehr als bloß Vektorgrafiken.
Im ersten Link gehts um CSS, SVG wird hier nur als Beispiel zitiert, von dem man Clipping kennen könnte.
Im zweiten wird beschrieben wie man in SVG Clipping einsetzen kann, um Teile von Objekten auszublenden. Also ein Weg um teilweise sichtbare Objekte im Bild zu realisieren. Aber was dabei rauskommt ist letztendlich trotzdem ein Bild, wie auch gif oder png oder sonstiges, nur eben anders erstellt. Das ganze hilft dir nicht weiter, da du nach wie vor nicht weißt WO du in deiner SVG Grafik die Linie unterbrechen musst.Als Notlösung könntest du die Einträge an im Voraus bekannte Positionen setzen, die zu einer Grafik mit fest eingebauten Lücken passen. Da würde ich aber lieber für den Anfang ein Symbol verwenden das die Linie völlig überdeckt, ohne sie transparent zu schalten.
-
Da widerspreche ich, SVG bietet meinen bescheidenen Kenntnissen zufolge doch entschieden mehr als bloß Vektorgrafiken.
Im ersten Link gehts um CSS, SVG wird hier nur als Beispiel zitiert, von dem man Clipping kennen könnte.In dem Artikel wird auch erklärt, wie man in den jeweiligen CSS-Eigenschaften auf SVG-Elemente referenziert.
-
Das eigentliche Problem bleibt ja trotzdem bestehen.
Auch wenn SVG an sich Transparenz und Clipping unterstützt, es kommt praktisch auch nur ein festes Bild dabei raus, in das keine weitere Intelligenz mehr von außen eingebracht werden kann. Sprich es kann nicht durch den Aufbau der Seite beeinflusst werden. Der Fragesteller braucht die Information vom Browser, wo die Grafik transparent sein soll. Und die hat er nicht. Oder anders gesehen selbst wenn er sie hätte, er kriegt sie nicht im Nachhinein so in das Bild hinein dass dieses an die aktuelle Situation angepasst werden kann.Mich würde aber trotzdem interessieren ob es doch noch eine Lösung gibt, mark bitte informiere uns :-)
-
Mich würde aber trotzdem interessieren ob es doch noch eine Lösung gibt, mark bitte informiere uns :-)
Da hab ich leider nicht viel anzubieten. Ich hab das jetzt mal kurtfristig so gelöst, dass die Artikel ( links und rechts neben der Timeline ) diese nicht unterbrechen.
Das sieht bei mir dann so aus:
Glücklich bin ich damit nicht. Wenn ich eine Lösung mit Transparenz finde melde ich mich.
...
Ich glaube wir haben uns in einem Punkt missverstanden? Ich will NICHT die Timeline selbst an gewissen Stellen transparent machen, sondern die Pfeilgrafik als MASKE die DURCH die Timeline hindurch "scheint".
Also, die Pfeile sollen die Timeline mit einer Maske transparent machen.
Die Homepage ist folgendermaßen gelayert:
3. #artikel mit Pfeilen die an der Timeline andocken
2. #blog mit Timeline
1. body mit backgroundimageich hätte nun gerne, dass die Grafik der Pfeile aus EBENE 3 eine Maske bilden die auf EBENE 1 durchscheint und somit die Timeline transparent wird.
Eine Layer-Maske würde man das in Flash nennen.-
Ich glaube wir haben uns in einem Punkt missverstanden?
Das kann natürlich sein.
Ich will NICHT die Timeline selbst an gewissen Stellen transparent machen
Ok Timeline nicht transparent.
Also, die Pfeile sollen die Timeline mit einer Maske transparent machen.
Timeline also doch transparent??
ich hätte nun gerne, dass die Grafik der Pfeile aus EBENE 3 eine Maske bilden die auf EBENE 1 durchscheint und somit die Timeline transparent wird.
Eine Layer-Maske würde man das in Flash nennen.Dass also ein Element sich auf ein anderes auswirkt. Wenn das wirklich gehen würde, das wär ja absolut geil. Bin kein CSS-Guru, nur hab ich von sowas bisher noch wirklich absolut nie was gehört. Aber ausgeschlossen ist es ja nicht.
Was meint Google? Ist vielleicht ne dumme Frage, aber mit den passenden Suchwörtern?
-
-
-
-
-
-
-
Ich möchte dies aber mit einem fixen Hintergrundbild realisieren und benötige dazu eine Art Transparenz-MASKE. Die Pfeile sollen die Timeline unterbrechen und man soll das Hintergrundbild trotzdem durchschimmern sehen.
Wozu die Mühe? Mach’ doch einfach die entsprechenden Bereiche der Originalgrafik transparent.
-
Hallo,
ein wesentliches Problem sehe ich darin, dass du die Timeline, also die vertikale Linie, außerhalb des SVG-Bereichs definierst. Wäre die Linie auch Teil eines SVG-Dokuments, so könntest du den Filter-Effekt feComposite [mdn] benutzen. Siehe auch den Wikipedia-Artikel zu Porter-Duff-Komposition, dort ist anhand von Beispielgrafiken anschaulich erklärt, welche Effekte sich wie auswirken.