CODEWITHSUNDEEP
javascriptgoogle-chromegraphicssvgscale
dostende
dostende

Reputation: 253

Entire SVG scaling with JavaScript

I'm experimenting with the idea of making a web-based game with SVGs for graphics. I have one parent SVG element in my HTML file, and I dynamically insert SVGs loaded from other files with JavaScript. Internally, my game uses meters instead of pixels, and so pixel-wise, the graphics are quite large. Is there any way I can scale entire SVG elements? Or do I have to iterate through their graphical elements and scale them each individually?

In Google Chrome, explicitly setting currentScale doesn't seem to do anything; it's completely controlled by the browser's zoom level.

Upvotes: 2

Views: 1062

Answers (1)

Erik Dahlström
Erik Dahlström

Reputation: 60966

Set a viewBox attribute on the root svg element, that way you won't have to scale individual elements. Or leave them as is and allow zoom&pan. You can set a viewBox to show only part of the graphic too.

Without an example of how you use currentScale it's impossible to say if it's used correctly, but it should zoom the svg.

Upvotes: 2

Related Questions