Entire SVG scaling with JavaScript - 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.

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.

Related

Center SVG's viewBox on an element

I need to render one element from an SVG to an image. It needs to be like it appears in the SVG, without further transforms.
The only way I can think of to achieve this, is to set the SVG's viewbox on the target element. To do this, I need to compute the element's bounding box relative to the SVG viewBox.
I've tried to use getBBox(), but I don't think it can work. Its coordinates are relative to the transformed element: the transforms of the element and its parents aren't applied. It's not possible to apply those transforms to the bbox since the transformed-bbox might not contain the object anymore: for example think what would happen if the bbox need to rotate by 45 degrees.
An alternative could be getBoundingClientRect(). However it represents the bounding box of the element relative to the screen coordinates and again it might not be enough to apply the transforms from the screen to the SVG viewport, since they could transform the bounding box in a way that breaks it.
The last idea I have is to create a new <svg> element (with no transform), place in it one (or more) <g> whose function is to apply all the transform from the original SVG's viewBox to the target element's, then place (a copy of) the target element into it and eventually call getBBox() on the newly created SVG element: if I'm not mistaken, the resulting bbox should be what I need and I can set it as the viewBox of the original SVG. Although it might not work if the target element contains some <use> elements or similar stuff. I think it'll take quite some time to implement this and I'm afraid it will be wasted time since it won't work for whatever reason.
Are there other ways to obtain an element's bounding box relative to the SVG viewBox? Otherwise other ways to correctly render one element from an SVG to an image?

Javascript: Is it possible to force re-render of vector graphics in 3d transformations?

In javascript/Html5 I can zoom into a div in two ways:
- using transform:scale(n)
- using transform:translate3d(0px,0px,nnnpx)
the div Im zooming has text and svg images, but
if I use the "scale" method fonts and images are re-rendered and shown very well
while if I use "3d" method is like the browser "freezes" the div and then magnifies it but in the original resolution, so I get text and images blurred...
is there any way to force the browser to re-render the div?
thanks

SVG image animated slider

I tried to make an image slider using JavaScript and since I needed a complex mask/clip-path for images, I used SVG for clipping the slider(images).
Everything works fine in Firefox, but since I am using SVG for clipping only, and images are in HTML, the clipping clipPath in SVG refers to a HTML DOM element (<img> tag outside the SVG, not to SVG's <image>).
Chrome, IE and Opera doesn't support SVG effects like clip-paths to non-SVG elements.
My questions:
Is there any way to make images slide and being clipped by the SVG object (cross-browser)?
Are there any good SVG-related JavaScript libraries that would ease the solution?
Is this is possible with CSS and PNG graphic? I might change the SVG approach, although the masking/clipping image is really complex.
Thanks in advance

How to detect the color of any position of an SVG area

Within an SVG Area (not canvas) I need to determine the color of a specific coordinate (x,y) position using javascript. Overall something like this:
getColor (mySvgArea, x, y);
Normally in html links are drawn in a different colour if they have been visited than if they haven't. Such a thing is possible in SVG too of course and it was long ago realised that if you could figure out what the colour was it was a privacy leak and much effort was put into fixing that.
If you were allowed to read the colour at a general co-ordinate it would reopen the privacy leak so there will never be a way for you to do that outside of images.
The image way is to have your SVG in an <image> tag and then load it into a canvas. Browsers can prevent the privacy leak either by a) tainting the canvas so you can't read from it once SVG data has been loaded into it (Webkit currently) or b) resticting SVG image capability so they don't leak privacy by disabling things like link colouring (Firefox)
There is already a stackoverflow answer for with an example that shows copying an SVG into canvas. If you used Firefox you could then read the colour off.
I know this is old topic, but there's another way to do it depending on your case. With SVG you can get an element using Document.elementFromPoint as well as you can get all underlying elements by hiding the top element and invoking elementFromPoint again. Color as well as other properties can be get from there. It doesn't really give you a color per se, but it's faster than canvas and works just fine for selected cases.

Can I use something like Raphael.js to draw vectors above the HTML window?

There are a lot of questions regarding drawing on the canvas element and using things like Raphael.js (which is pretty awesome), but I'd like to know if there is a way I can draw some vectors (mostly diagonal lines) above the DOM document rendered in a html doctype webpage.
I haven't done much with the canvas element but I think it might be possible to do something like this with perhaps:
getting / monitoring the window size with javascript
creating / resizing a canvas element that takes up the whole page
somehow setting transparency on the canvas element
drawing the vectors that I want
When you use a clear .gif you can't click on or interact with the things underneath it - I would like to still be able to interact with the webpage normally. I would also like scrolling to move up and down the page normally so the vectors would scroll with the DOM elements.
Am I heading in the right direction with this?
How can I draw vectors above the HTML / DOM in a standard webpage?
Here's an example of Raphael.js drawing on top of text in a div http://raphaeljs.com/spin-spin-spin.html
Some more background on Raphael:
Raphael draws on an SVG canvas. If you give that a transparent
background and position it over the window (z-index), then you can get
the appearance you seek.
https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/SAPCl_UMNco

Categories

Resources