mirror of
https://github.com/svemagie/blog-eleventy-indiekit.git
synced 2026-05-14 22:48:50 +02:00
fix: add explicit width/height attributes to sparkline SVG
SVGs with only a viewBox and no width/height attributes use intrinsic sizing that can override CSS width:100%. Adding width="100%" height="100%" and preserveAspectRatio="none" on the SVG element itself ensures the sparkline fills its container div. Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
This commit is contained in:
+1
-1
@@ -834,7 +834,7 @@ export default function (eleventyConfig) {
|
||||
// Closed polygon for gradient fill (line path + bottom corners)
|
||||
const fillPoints = `${points} ${w},${h} 0,${h}`;
|
||||
return [
|
||||
`<svg viewBox="0 0 ${w} ${h}" class="sparkline" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Posting frequency over the last 12 months">`,
|
||||
`<svg viewBox="0 0 ${w} ${h}" width="100%" height="100%" preserveAspectRatio="none" class="sparkline" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Posting frequency over the last 12 months">`,
|
||||
`<defs><linearGradient id="spk-fill" x1="0" y1="0" x2="0" y2="1">`,
|
||||
`<stop offset="0%" stop-color="currentColor" stop-opacity="0.25"/>`,
|
||||
`<stop offset="100%" stop-color="currentColor" stop-opacity="0.02"/>`,
|
||||
|
||||
Reference in New Issue
Block a user