CSS Zoom不影响Javascript添加的SVG元素

Question

We have an issue which appears to happen on old versions of WebKit (iOS5 for example) where adding svg + svgText elements using javascript, like so:

var box =  document.createElementNS("http://www.w3.org/2000/svg","svg");
var text = document.createElementNS("http://www.w3.org/2000/svg","text");

which is then inside a div with zoom set, the svgTexts are not scaled down or up by the zoom like every other element (including svg graphics etc).

I've confirmed that simply taking the generated html from the DOM and adding that directly results in the zoom being correctly applied, so its a problem in the way text elements are added by javascript not being affected by the zoom for some reason.

Has anyone encountered a similar problem & has any ideas?

Thanks for any thoughts!

Answer 1

I've come across the same problem. Simply updating the view box worked for me. My tests with different tablets have shown that this issue was fixed with WebKit version 535 or 536.

I'm using the following in Raphael: pPaper.setViewBox( 0, 0, pPaper.width, pPaper.height );

Since I'm using a slider for zooming and resetting the viewbox takes a lot of time, I'm checking the browser version and only apply it if necessary. You might want to write a feature check instead if you have the time.