If a CSS variable is invalid, it will default to using the SVG fill

Question

If a CSS variable is invalid, it will default to using the SVG fill

In my SVG, there are several rectangles that change their fill color in a gradient effect as they move down the SVG. Users have the option to choose a solid fill color to customize their experience, which replaces the gradient color of the rectangles. I am accomplishing this using CSS variables.

However, I am facing an issue where I want the rectangles to default back to the original fill color defined in the SVG if no theme color is chosen by the user. In such cases, the CSS variable is set to '', making it invalid. Unlike other elements where I can set a default value for fallback, each rectangle in the SVG has a unique fill color. When I tried removing the default value, the fill reverted to its initial CSS value, which is transparent.

For example, if I have a rectangle with the code

<rect id="rect" fill="#000000" x="0" y="0" width="200" height="50" rx="6"></rect>

and the following CSS:

rect { fill: var(--preview-primary); }

, I would expect the rectangle to be black when --preview-primary is invalid, but instead, it appears transparent.

I am looking for a solution to address this issue. Any help would be greatly appreciated. Thank you.

css svg css-variables

Answer 1

Answer №1

Unfortunately, there is no direct way to fallback to the fill attribute.

If a valid CSS rule for fill is present, it will always take priority over the fill attribute. For CSSOM, using var(--anything) will always be considered a valid rule. In case the calculation of the var() function fails, it will default back to the specified value. The default value for fill is set to black.

In order to tackle this issue, you have several options to choose from:

If altering the SVG is not an option, you can activate user-selected rules only when a non-empty value is provided:

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
  // toggle a class so we know we have to handle it
  document.documentElement.classList
    .toggle('user-selected-color', sel.value !== "");
};

.user-selected-color rect {
  fill: var(--selected-color);
}
select{vertical-align:top}

<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red"/>
  <rect x="90" y="90" height="80" width="80" fill="black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>

If possible, you can individually set each element's CSS color property and then fall back to the CSS value currentColor:

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
};

rect {
  fill: var(--selected-color, currentColor);
}
select{vertical-align:top}

<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green" style="color:green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue" style="color:blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red" style="color:red"/>
  <rect x="90" y="90" height="80" width="80" fill="black" style="color:black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>

Answer 2

Unfortunately, there is no direct way to fallback to the fill attribute.

If a valid CSS rule for fill is present, it will always take priority over the fill attribute. For CSSOM, using var(--anything) will always be considered a valid rule. In case the calculation of the var() function fails, it will default back to the specified value. The default value for fill is set to black.

In order to tackle this issue, you have several options to choose from:

If altering the SVG is not an option, you can activate user-selected rules only when a non-empty value is provided:

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
  // toggle a class so we know we have to handle it
  document.documentElement.classList
    .toggle('user-selected-color', sel.value !== "");
};

.user-selected-color rect {
  fill: var(--selected-color);
}
select{vertical-align:top}

<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red"/>
  <rect x="90" y="90" height="80" width="80" fill="black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>

If possible, you can individually set each element's CSS color property and then fall back to the CSS value currentColor:

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
};

rect {
  fill: var(--selected-color, currentColor);
}
select{vertical-align:top}

<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green" style="color:green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue" style="color:blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red" style="color:red"/>
  <rect x="90" y="90" height="80" width="80" fill="black" style="color:black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>

Answer 3

Answer №2

Update the SVG code by removing the fill style and adding a default "fallback" color in the CSS to handle cases where the variable is not defined.

rect {
  fill: var(--preview-primary, 000);
}

rect {
  fill: var(--preview-primary, black);
}

.red {
  --preview-primary: red;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect class="red" x="10" y="10" height="100" width="100"/>
</svg>

Answer 4

Update the SVG code by removing the fill style and adding a default "fallback" color in the CSS to handle cases where the variable is not defined.

rect {
  fill: var(--preview-primary, 000);
}

rect {
  fill: var(--preview-primary, black);
}

.red {
  --preview-primary: red;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect class="red" x="10" y="10" height="100" width="100"/>
</svg>

If a CSS variable is invalid, it will default to using the SVG fill

Answer №1

Answer №2

Similar questions

Display the button on a separate row for smaller screens in Bootstrap 4, but ensure it remains in the same row for larger screens

What unique capabilities does canvas offer that are not available with SVG?

Update the CSS classes exclusively for the specified ID

Transform three-dimensional models created with three.js into scalable vector graphics (SVG)

Tips on customizing the appearance of mat-card-title within a mat-card

Unexpected quirks in Canvg conversion: Strange behavior observed while utilizing a fill URL

Struggling to import SVG files in Gatsby's TypeScript project? Error message: "Element type is invalid: expected a string"?

What could be the reason for my ul hover effect not functioning as expected?

Is there a way to position this Flex-Box Item beside the image?

Utilizing Bootstrap to arrange table cells in a shifted manner

Command field in Javascript

Does the entire window fade before the URL is loaded?

Rotate the mat-select arrow when the dropdown opens (moving in both upward and downward directions)

Show MaterialUI Dialog in fullscreen mode

Guide on aligning two boxes in the center with HTML, CSS, and Bootstrap

Difficulties encountered with CSS transitions when using the background

Is it feasible to have fixed headers adopt the width property?

Conceal tab content by clicking outside of the tab or its contents

Bootstrap CSS: image is overlapping text inside a div

Center the background image and adjust it vertically up or down as needed