SVG image animated slider - javascript

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

Related

Raphaƫl.js: How to scale a circle's fill image to fit the circle?

I'm trying to use Raphael's VML functionality for generating a circle with an image (fix for IE8 that lacks border-radius).
My problem is that if I use
circle.attr({fill: 'url(image.jpg)'});
and my image is larger than the circle the image is only partially showed and I can't find a way to downscale the image to the diameter of the circle.
How can I do this?
Are you serious about fixing IE8 border-radius with RaphaelJS?
I would suggest something like css3pie and there is even question in SO about usage.
But still, if you want to use RaphaelJS, you will need to use Element.transform to scale your image and only afterwards, set up rounded corners effect with another element.

get dimension of an svg including stroke

I want to place an svg precisely into the corner of a div. The svg has a dynamic generated stroke. If the shape of the svg is irregular or lets say a star, the distance to the outmost part of the border is hard to calculate.
The problem could be solved, if I would be able to get the dimensions of the svg including the stroke.
My idea is:
load the external svg
place it in the middle of the div
apply the desired stroke-width
get the outmost dimensions of the svg
place it in the corner
Can I get the width of the svg including the stroke? Any other ideas?
Thanks
getBoundingClientRect is the only way short of calculating it yourself from first principles. That method is only implemented in Firefox and IE9+ as far as I know though.
For example this returns 54 on Firefox.

Desaturate and blur <canvas> tag contents possible w/ javascript?

Is it possible using javascript/jquery to desaturate and also blur a tag contents where both effects are minimal in the center and max'd at the corners radially?
I have a canvas element with a parallax effect going on as you move the cursor around. I want to blur and desaturate the contents the farther from the center of the container (div or canvas) but still allow the parallax effect to go on underneath... how can I create this effect?
There's no built-in functionality for doing exactly what you want, but you do have the option of coding something to do this or using an existing library to give you similar functionality. With the HTML 5 canvas, you can alter images at the pixel level using javascript. Here's some reference:
Pixel Manipulation by Beej
A few interesting blur techniques
JS Library that includes blurring and desaturating

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.
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.

HTML/CSS drawing a square window in a css mask

So I have a grid of images (map tiles) and I draw a semi-transparent mask over it using an absolutely positioned div with width and height set to 100%.
I now want the user to be able to draw out a rectangle on the mask, with the mouse using mouse-down, drag, mouse-up. The rectangle would be drawn dynamically as the mouse moves, and the rectangle would be like a window through the mask displaying the map tiles underneath with no semi-transparency.
I'm currently looking at using 5 divs - one for the window and 4 for the mask which would be resized using javascript as I drag the mouse. Does anyone know an easier way to do this ? I'm using jquery and I need to support IE7 upwards so html5 only technology is out.
Cheers,
Colm
I think the jQuery Crop plugin does exactly what you need (Demo here).
Maybe it's possible to carve that part out from it.
You should try out SVG canvas instead. There's a SVG js library, good for beginner:
http://raphaeljs.com/, check it out
PLEASE NOTE THAT THIS HAS NOTHING TO DO WITH HTML5 (PLEASE DONT MIX UP WITH HTML5 CANVAS, THIS IS SVG)

Categories

Resources