transparente Farbe in svg

Django, Flask, Bottle, WSGI, CGI…
Antworten
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

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:
Bild
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?
Sirius3
User
Beiträge: 17710
Registriert: Sonntag 21. Oktober 2012, 17:20

Du hast nachgelsen, wie man in svg Transparenz macht? Ob das gut aussieht, ist eine andere Frage.
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

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.
Benutzeravatar
__blackjack__
User
Beiträge: 13003
Registriert: Samstag 2. Juni 2018, 10:21
Wohnort: 127.0.0.1
Kontaktdaten:

@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.
“Most people find the concept of programming obvious, but the doing impossible.” — Alan J. Perlis
Pitwheazle
User
Beiträge: 869
Registriert: Sonntag 19. September 2021, 09:40

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.
Bild
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?
Benutzeravatar
__blackjack__
User
Beiträge: 13003
Registriert: Samstag 2. Juni 2018, 10:21
Wohnort: 127.0.0.1
Kontaktdaten:

@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>
“Most people find the concept of programming obvious, but the doing impossible.” — Alan J. Perlis
Antworten