How to change SVG attribute with user input

Discussion Ask a question
,
1

Hi all! I’m trying to get this code to work:

//Using a vector image with an id "hp"

var src = '<svg width="40" height="312" style="fill:rgb(133,31,36);"><rect width="40" height="312"/></svg>'; 

$w.onReady(function () {
    $w("#hp").src  = src; 
}
 
export function hp_click(event) {
    src = '<svg width="40" height="312" style="fill:rgb(133,31,36);"><rect width="40" height="31"/></svg>';
    console.log("height changed: "+src);
}

Basically console.log would return src as the right string, but the vector art wouldn’t reflect the change. Any ideas?

2

bump

3

You are not setting the svg component. You need to do something like this:

export function hp_click(event) {
    $w("#hp").src = '<svg width="40" height="312" style="fill:rgb(133,31,36);"><rect width="40" height="31"/></svg>';
    console.log("height changed: "+src);
}
4

Thanks Yisrael that worked for me!

1 Like