Any more info/tutorial on how to use different paths/layers of svg for multiple lights?

[kerhbal]

Hi there, so I've followed the tutorial and made the examples work.
Although I found that in the examples, the element is either

• another small svg(light in home example)
• or a path of a different layer(floor planner home example)
  and for this particular tutorial, the layer is just filled with some dark color, and we change the opacity with css and rules. There is only one image in the svg.

I'm trying to find a solution that can involve 2 images so that the dark/light effect is more realistic.

So I'd like to know how to use an svg with 2 layers with 1 image in each of them, and adjust the opacity for a part in one layer so that the part of image in that layer is visible or not?
The structure I tried is below:

• layer 1
  • dark image
  • path1
  • path2
  • ...
• layer 2
  • light image

so far no good, I cannot change the visibility of that part of image just by simply change opacity of that path.

Hope anyone is trying the same thing or has done something similar. Thanks!

[OzGav]

Not sure if I understand the issue. The floor planner example shows how to alter opacity as you have noted. If you have your base layer as dark (for example) then you should find you can overlay a lighter image and adjust the opacity of that image with opacity. If you are trying to fade out one image whilst simultaneously fading in another then that is a different issue but in my experience not required.

Maybe this discussion will help as well particularly the CSS the OP uses for light-on and -off #154 (reply in thread)

[kerhbal]

Great idea! I also found a solution, clip-path. basically I can clip the image by a path, so that the image interacts with user can have a weird shape!
And I think your way requires more steps but is more powerful. since your image and touch point is decoupled, I assume you can show a bigger image with smaller touch point, in such way you will see some scattered light in living room that is coming from kitchen lamp, and while you are touching the living room, it will not accidentally trigger kitchen lamp.

[OzGav]

Yes the scattered light in other rooms is one reason I use this technique. The other reason I use it is I have icons outside my rooms to control fans, bedside lights and aircon. I can touch those circles and effects in the room will change.

[OzGav]

If you are happy your queried is answered it would be great if you could mark it as such. Happy New Year!

[kerhbal]

Oh yeah for sure. Thank you so much for this! I didn’t realize that the touch element and the element we change class setting can be different!

[kerhbal]

Happy new year!