nicht angemeldet
Frage zum Wiki-Artikel „SVG/Farben/Verläufe“
Matthias ScharwiesGuten 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.
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. 😀
-
Servus!
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; }EDIT: Fehler gefunden. 😀
Was war's denn, der Rand ( border: 1px solid black;) ?
Herzliche Grüße
Matthias Scharwies
--
"I don’t make typos. I make new words." -
hallo
Dummerweise wird mein SVG Verlauf Links- und Kopf-seitig von einem schwarzen Rand (Background des SVG Selektors) umgeben.
Nein, du siehst durchaus den svg-Bereich. Dein SVG hat die Koordinaten 0/0, dein Rect beginnt bei 10/10.
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?
- dein css border addiert 2px
- rect hat normalerweise eine stroke-width von 1px, deren Hälfte jeweils inner und ausserhalb der Korrdinaten gezeichnet wird, ergo wird hier 1px addiert.
Sofern dein svg rein dekorative Funktion hat, würde ich es ersetzen durch css gradiente.