Hello. I make a slider to change the size of the SVG. Does not work in IE11 and FireFox. Can you please tell me how to fix the code?

function sizePic() { var size = document.getElementById("size").value; var img = document.querySelector('svg'); img.style.width = size; } 
 <html> <body> <section> <input type="range" min="50" max="760" id="size" onchange="sizePic()" value="760"> <div> <svg width="200" height="200" style="width: 100%; height: 100%;" viewBox="0 0 200 200"> <g> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </g> </svg> </div> </section> </body> </html>

    1 answer 1

    You have some kind of hellish mix of styles and attributes in the SVG itself, so I cleaned it up a bit.

    If the width is not changed via style.width , but through setAttribute('width', width) , then everything works. Tested in the last firefox.

     window.onload = sizePic; document.getElementById("size").addEventListener('input', sizePic); function sizePic() { var size = document.getElementById("size").value; var img = document.querySelector('svg'); img.setAttribute('width', size) } 
     <html> <body> <section> <input type="range" min="50" max="760" id="size" value="760"> <div> <svg viewBox="0 0 200 200"> <g> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </g> </svg> </div> </section> </body> </html>

    • Just for good reason added this hellish mixture of styles, because in my version it is present in SVG, because it is created dynamically by a script and there is no possibility to change these styles. Therefore, this option does not fit, the field of the picture expands in it, and it remains in place. And it doesn't work in IE11 - Anatol