transparente Farbe in svg

[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?

[Sirius3]

Du hast nachgelsen, wie man in svg Transparenz macht? Ob das gut aussieht, ist eine andere Frage.

[Pitwheazle]

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.

[__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.

[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?

[__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>