Seite 1 von 1
transparente Farbe in svg
Verfasst: Dienstag 16. August 2022, 21:20
von Pitwheazle
In der Mitte fehlen Würfelchen immer nur in der obersten Etage, das kann man aber nicht mit Sicherheit sehen, daher hätte ich gerne die Würfelchen transparent. Das gelingt mir nicht:

Der Code der Würfelchen:
Code: Alles auswählen
<g id="wuerfelchen">
<polygon points="0,26 20,26, 20,6, 0,6 " style="stroke:black;stroke-width:1;fill: yellow"/>
<polygon points="0,6 20,6 26,0 6,0" style="stroke:black;stroke-width:1;fill: blue"/>
<polygon points="20,26 26,20 26,0 20,6" style="stroke:black;stroke-width:1;fill: red"/>
</g>
... geht das überhaupt so, dass man die einzelnen Würfelchen tranparent bekommt?
Re: transparente Farbe in svg
Verfasst: Dienstag 16. August 2022, 21:34
von Sirius3
Du hast nachgelsen, wie man in svg Transparenz macht? Ob das gut aussieht, ist eine andere Frage.
Re: transparente Farbe in svg
Verfasst: Dienstag 16. August 2022, 21:57
von Pitwheazle
Sirius3 hat geschrieben: Dienstag 16. August 2022, 21:34
Du hast nachgelsen, wie man in svg Transparenz macht? Ob das gut aussieht, ist eine andere Frage.
Nun ja, ich habe es mit fill-opac: 50 probiert - also z.B.
Code: Alles auswählen
<polygon points="0,26 20,26, 20,6, 0,6 " style="stroke:black;stroke-width:1;fill: yellow; fill-opac:50"/>
.. da passiert nix. Ich kann mir auch vorstellen, dass das nicht so wird, wie ich hoffe - dazu müsste ich aber halt erst mal irgenwas transparent bekommen.
Re: transparente Farbe in svg
Verfasst: Mittwoch 17. August 2022, 09:06
von __blackjack__
@Pitwheazle: Wo hast Du denn her, dass es `fill-opac` geben würde? Das heisst `fill-opacity`. Such Dir eine bessere Dokumentation für SVG. Und der Wert 50 ist falsch. Entweder muss das zwischen 0 und 1 liegen, also 0.5, oder man muss die ”Einheit” angeben, also 50%.
Mir ist auch aufgefallen, dass Du a) sehr viel mit dem `style`-Attribut arbeitest und b) viel von diesen Werten immer wiederholst. Ich würde da mal über CSS nachdenken und/oder auch nicht die gleichen Werte auf jedem kleinen Zeichnungsteil wiederholen, wenn man die auch übergeordnet, in diesem Fall für alle Polygone die die Würfelchen darstellen, verwenden kann.
Re: transparente Farbe in svg
Verfasst: Mittwoch 17. August 2022, 16:35
von Pitwheazle
Oh Mann! Ich bin wirklich ein Pfuscher! Das mit dem opacity war im Original mal richtig aber das mit den 50% und 0.5 habe ich falsch gemacht. Auf der Seite von wiki.selfhtml.org habe ich zwar gelesen "Beachten Sie: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt." ... aber den Rest habe ich wieder nicht ordentlich gelesen. Jetzt sieht es ganz putzig aus, ich bin aber noch nicht sicher, ob ich damit sicherstellen kann, dass man erkennt, dass die Löcher in der Mitte nicht "über zwei Etagen" nach unten gehen.

Zum zweiten Hinweis: Es stimmt, um CSS habe ich mich noch etwas rumgedrückt, da muss ich mich wohl tiefer einarbeiten. Zur Zeit mache ich das noch viel mit Trial and Error. Aber ich dachte, wenn ich das Würfelchen unter den defs ablege wäre das schon übergeordnet und jede Seite hat ja eine andere Farbe. Die einzige Gemeinsamkeit ist ja hier der Style der Linien. ... oder habe ich da was übersehen?
Re: transparente Farbe in svg
Verfasst: Mittwoch 17. August 2022, 17:05
von __blackjack__
@Pitwheazle: Die Farbe unterscheidet sich, die anderen Eigenschaften aber nicht, die könnte man auf die Gruppe verschieben. Beziehungsweise auch auf den Container der am Ende alle Würfelchen enthält.
Code: Alles auswählen
<g id="wuerfelchen" style="stroke: black; stroke-width: 1; fill-opacity: 0.5;">
<polygon points="0,26 20,26, 20,6, 0,6" style="fill: yellow;"/>
<polygon points="0,6 20,6 26,0 6,0" style="fill: blue;"/>
<polygon points="20,26 26,20 26,0 20,6" style="fill: red;"/>
</g>