Svg viewbox

Wappler General Need Help
1

Hello I am trying to render an svg graphic. It is a simple box and want to be able to manipulate the viebox values.
Currently the html code is

<svg style="background-color:#eee;" id="second_box" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -80 100 100" preserveAspectRatio="none">
	<rect width="100" height="100" style="fill:#cccccc" />
</svg>

What I would like is to be able to use something like the below
dmx-bind:viewBox="0 {{inputOne.value}} 100 100" but this is not working (it is actually not adding the viewbox attribute.

Thank you

2

You should be able to tweak you code to:
dmx-bind:viewBox="'0 '+inputOne.value+' 100 100'"

3

Please try using:

dmx-bind:viewBox="'0 ' + inputOne.value + ' 100 100'"
1 Like
4

Sorry forgot to remove the curly brackets… edited response. You will however need the spaces after the 0 and before the 100 100

1 Like
5

First off all thank you for your responses.
Yes you were right about the syntax but still not working.
Even with static values ex dmx-bind:viewBox="'0 ' '0 ' 100 100'"
the viewBox attribute does not render at all.

Thank you!!

6

The static values would be simply:
dmx-bind:viewBox=" '0 0 100 100' "

7

The easiest way of thinking about things like dmx-bind is that the value your are assigning is a JavaScript variable. Strings need to be enclosed in ' ' and to join strings or variables together, you need to use a +

8

I will check it out a bit more. Maybe I need to dmx-bind more values since it might affect the way page is rendered. I cant seem to make the viewBox attribute to even render in the page (does not exist in the code).

Thank you!

9

I think the issue is with the viewBox attribute using uppercase letters. It’s being converted to viewbox when used with dmx-bind: which is causing the issue:

Screenshot_26
Screenshot_261290Ă—455 156 KB

Not sure if this can be done in this case. Probably @patrick can help here.

10

It is not possible to set svg attributes like that. They need a special way of setting, the normal setAttribute method doesn’t work there since they are in a separate NameSpace. I can take a look at the dmx-bind and see if I can update it to use setAttributeNS for these special cases.

11

That would be great but again if its too much of work let it go. Thanks!

13

Hey @patrick, without any pressure or anything else. You think is possible to update easily? Or should I look another way to implement this?
Thank you!

14

I experimented with it and it is more difficult then expected. So don’t expect something soon, if you have an other way to implement it then use that.

15

Thank you Patric!

16

Hello, just an update on this. I made it possible using d3.js
Also created a video demonstrating how you can combine D3.js and Wappler.
It is a very basic example but can help you get started with SVG graphics.

Thank you!

5 Likes