Having fun with SVG - playing with light sources

Share Your Projects
21

I'm pulling the image from a directory. And now I'm thinking if I did it the correct way?

<div class="contain-demo">
  <svg width="100%" height="100%" viewBox="0 0 250 150" enable-background="new 0 0 250 250">
    <image id="background" width="100%" height="100%"  href="/public/images/snapshot_22-11-2022.svg" fill = "white"/>
  </svg>
</div>
22

I think you are using uibuilder? If so, you probably want to load the SVG into the background rather than the foreground but it shouldn't affect the way it looks.

This is from the uibuilder SVG demo:

        <h2>My House, Ground Floor</h2>
        <div id="floorplan"
            style="position:relative; width:100%; height:50em; background:url(./background.svg);">
            <bulb id="a" :color="isona ? 'red' : 'grey'" :glow="isona" :clickable="false" x="100" y="100"
                @bulbclicked="myClick" title="A: This one does not respond to clicks">
                <desc>Here we use a component slot to insert some more custom svg</desc>
            </bulb>
            <bulb id="b" :color="isonb ? 'red' : 'grey'" :glow="isonb" :clickable="true" x="270" y="120"
                @bulbclicked="myClick" title="B">
                <circle cx="50" cy="50" r="50" />
            </bulb>
            <bulb id="c" :ison="isonc" :clickable="true" x="650" y="120" @bulbclicked="myClick" title="C"></bulb>
            <bulb id="d" :ison="isond" :clickable="true" x="250" y="270" @bulbclicked="myClick"
                :title="'D: ' + (isond ? 'ON' : 'off')"></bulb>
        </div>
23

I don't even have UIbuilder installed :slight_smile:

24

Clearly you confused me with your other thread:

25

Sorry I was searching for a way to make the floorplan and I have confused the threads

26

Found the problem. Stupid me. I used your example for a starting point and I forgot to change the viewBox parameter.

viewBox="0 0 1280 900"
27

I have another question about manipulating SVG images.
How do I change a color of a rectangle in the image itself?
For example my image contains a white rectangle

<rect
                 vector-effect="non-scaling-stroke"
                 style="fill:#fff;"
                 width="118"
                 height="20"
                 x="0"
                 y="-10"
                 class="anchor"
                 transform="matrix(1,0,0,0.8448,0,0)"
                 id="rect11192" />

I would like to change the color of fill to red ( style="fill:#f00 )
Can your node maniplate this inside the SVG image?

28

I think this wiki page will solve your question.
Please start next time a new discussion, because this one is about "light sources" in svg.
Otherwise it becomes totally unreadable for people that are reading this discussion, to learn here about light sources...

2 Likes