widget on svg image background

HoloViews
1

I am looking for creating widgets on a svg image in panel. I tried using Gridspec but it simply overrides the svg image (and does not overlap it). I want to create multiple widgets on 1 single svg image background. Is there a way to do that?

2

Using negative margin probably

3

Apologies for late reply.
Thanks for the idea, the negative margin works to overlap widgets on svg image.

However, I still feel there might be a better way to do this. By better, I mean that widgets should be placed anywhere I want just by dragging. Or may be, some other way.

Once again, thanks for this idea.

4

Hi @utkarshs1994

One way to solve this is to use ReactiveHTML.

image
image1704×1251 101 KB 

import panel as pn
import param

pn.extension(sizing_mode="stretch_width", template="fast")

class SVGBackground(pn.reactive.ReactiveHTML):
    object = param.Parameter()
    svg = param.String()

    attachment = param.Selector(default="inherit", objects=["fixed", "inherit", "initial", "local", "revert", "scroll", "unset"])
    position = param.Selector(default="center center", objects=[
        "bottom",
        "center center",
        "inherit",
        "initial",
        "left top",
        "left center",
        "left bottom",
        "revert",
        "right",
        "top",
        "unset",
    ])
    repeat = param.Selector(default="no-repeat", objects=["no-repeat", "inherit", "initial", "repeat", "repeat-x", "repeat-y", "revert", "round", "space", "unset"])
    size = param.Selector(default="contain", objects=["auto", "contain", "cover", "initial", "revert", "unset"])


    _template = """
    <div id="pn-component" style="height:100%;width:100%">
        <div id="background" style="background-image: url(${svg});background-repeat: ${repeat};background-attachment: ${attachment};background-position: ${position};background-size: ${size};height:100%;width:100%">
        ${object}
        </div>
    </div>
    """
button = pn.widgets.Button(name="Click me!", button_type="primary")
layout=pn.Row(pn.Spacer(), pn.Column(pn.Spacer(height=300), *[button.clone() for i in range(10)]), pn.Spacer())
svg_background = SVGBackground(object=layout, svg="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg", height=1000).servable()
pn.Param(svg_background, parameters=["repeat", "attachment", "position", "size"]).servable(area="sidebar")