Lights Example into my SVG

[RossP4ge]

Hi,

I'm really enjoying learning floorplan and have come a long way considering that I have 0 coding experience and have never touched CSS before. The examples and help i've received have been really useful. I'm nearly at a point where I am happy with my floorplan but i'm missing one final feature - matching the light of my rgbw smart bulbs to the floorplan as in the 'lights' example on the wiki.

I've copied over the code and the solid colour matches the state of the bulb. However, the gradient does not change:

I figure it must be something wrong with the SVG but i'm struggling to understand what I'm missing. I've uploaded a slightly edited version of my SVG (just to remove some personal details) and the relevant yaml section to the repository linked below:

https://github.com/RossP4ge/floorplan_help

The lights in question are the ones with a blue circle with a red gradient, the other ones are not of the same type.

Oh and also if someone has a method of altering the light 'off' colour and opacity that would be super useful too!

I'd really appreciate some help.

[exetico]

I won't provide the full example for you, cause the one in the docs should fit your needs. Have you checked if both the fill and stop-colors are updated as it should, by using the debug-tool in your browser?

However... By gradient, do you mean the shadows, or?

One other way to address your problem, could be to use a filter instead. Maybe that's easier for you, do navigate around?
The CSS-shadows are added with the following code: filter: drop-shadow( 15px 15px 40px rgba(255, 0, 0, 0.7));

Maybe that's a bit easier, than trying to change the gradient/shadow, within the SVG file. But that's up to you.

[RossP4ge]

This is where my lack of coding shows!

There is alot more data when I inspect the object when compared to the example.

They appear to match... I'm really struggling to see what I'm doing wrong!

I want to match the light color, as oppose to using a fixed shadow if possible.

[RossP4ge]

So the mistake I was making was not naming the gradient 'stop values' in inkscape using the XML editor.