The versatile custom Swiss Army Knife card for Home Assistant allows you to create your unique visualization using several graphical tools, styling options and animations.
You can see the local class definition in the <defs> section, and the usage of this class in the <path class="cls-1"> definition.
Furthermore, the cls-1 class is used in every pollen SVG, and thus overwrites this class every time it is injected. Each SVG should use a unique class, and unique CSS variables to specify the color.
Additional background:
Related Issues (if any)
(Optional): Suggested Solution
The class and styling problems can be solved by:
using a unique class per pollen type and state
using a unique color per pollen type and state
The pollen_tree_very_hig.svg looks like this, and can be styled, and can be injected.
It contains the following id/class/style definitions using BEM naming:
id =pollen_tree__very_high
class = pollen_tree--very-high
CSS var = --pollen_tree-color--very-high with default color #e73f10
So now we can:
style the pollen SVG with a dedicated class, which at least defines the color CSS variable
style the fill directly using the styles section of the SVG by defining the CSS variable
If you specify nothing, it will use the default color
Furthermore, some of the pollen SVGs are made up of different parts. The pollen grass SVG shows this. By using multiple class definitions, one can style each part separately:
pollen_grass--high class for both parts
pollen_grass_left--high class for the left part
pollen_grass_right--high class for the right part
pollen_grass-color--high CSS var
pollen_grass_left-color--high CSS var for the left part
pollen_grass_right-color--high CSS var for the right part
The fill style for the left part would become: var(--pollen_grass_left-color--high, var(--pollen_grass-color--high, #ef7f01))
The Problem To Be Solved
With the working SVG Injector, SVGs should be stylable now.
The Pollen SVGs contain local styling definitions, which can not be overridden from the parent SVG container.
Using the online SVG Viewer, the
pollen_grass_high.svglooks like this:You can see the local class definition in the
<defs>section, and the usage of this class in the<path class="cls-1">definition.Furthermore, the cls-1 class is used in every pollen SVG, and thus overwrites this class every time it is injected. Each SVG should use a unique class, and unique CSS variables to specify the color.
Additional background:
Related Issues (if any)
(Optional): Suggested Solution
The class and styling problems can be solved by:
The
pollen_tree_very_hig.svglooks like this, and can be styled, and can be injected. It contains the following id/class/style definitions using BEM naming:pollen_tree__very_highpollen_tree--very-high--pollen_tree-color--very-highwith default color#e73f10So now we can:
Furthermore, some of the pollen SVGs are made up of different parts. The pollen grass SVG shows this. By using multiple class definitions, one can style each part separately:
pollen_grass--highclass for both partspollen_grass_left--highclass for the left partpollen_grass_right--highclass for the right partpollen_grass-color--highCSS varpollen_grass_left-color--highCSS var for the left partpollen_grass_right-color--highCSS var for the right partThe fill style for the left part would become:
var(--pollen_grass_left-color--high, var(--pollen_grass-color--high, #ef7f01))(Optional): Alternative Solutions