Da Ignaz: Frage zum Wiki-Artikel „SVG/Farben/Verläufe“

Beitrag lesen

SELF-Forum

Frage zum Wiki-Artikel „SVG/Farben/Verläufe“

Da Ignaz (Versionen)
– Informationen zu den Bewertungsregeln

problematische Seite

Guten Morgen,

ich habe ein (Verständnis-)Problem des Artikels "Der lineare Farbverlauf". Den Quelltext des Beispiels lasse ich mal weg, den findet Ihr ja. Nun zu meinem Code.

Mein SVG-Selektor innerhalb des CSS-Files sieht so aus.

svg {
    background: black;
    border: 1px solid black;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    height: 208px;
    margin: 0;
}

Innerhalb der HTML-Datei wird SVG wie folgt definiert.

    <body>
        <main>
        <svg viewbox="0 0 100% 208">
            <defs>
                <linearGradient id="verlauf" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="#5C5C5C" />
                    <stop offset="41%" stop-color="#5C5C5C" />
                    <stop offset="67%" stop-color="#767776" />
                    <stop offset="100%" stop-color="#5C5C5C" />
                </linearGradient>
            </defs>
            <rect id="eins" x="10" y="10" width="100%" height="208" fill="url(#verlauf)" />
        </svg>
        </main>
    </body>

Dummerweise wird mein SVG Verlauf Links- und Kopf-seitig von einem schwarzen Rand (Background des SVG Selektors) umgeben.

SVG Verlauf

Die Viewbox bzw. der Bildausschnitt ist 211 Pixel hoch, obwohl 208 Pixel festgelegt wurden. Was erzeugt denn die drei Pixel, die den schwarzen Rand bildet?

EDIT: Fehler gefunden. 😀

Beitrag melden
–
Informationen zu den Bewertungsregeln