We Keep Coding

There is a way to rotate SVG and / or it's VIEBOX?

I'm wondering if there is a way to Rotate SVG (not its elements) or apply a transformation, which has a rotation angle?
Basically what I want to do is to have TWO (probably nested) elements in the screen: container and image, where the image won't be visible out of container boundaries. Kind of Overflow hidden....
Any idea?
Tnx

Put the svg inside a div or figure then give that a class like rotate, use
.rotate {
transform: rotateZ(50deg);
}
in your CSS

tooltips of a scaled jquery flot chart appear in wrong position

I'm using the flot library
How do I get the correct tooltips if I scale the chart with this css rule: transform: scale(0.7);
flot source uses the function findNearbyItem to find hovered items.
[FIDDLE] that demonstrates both cases - scale(1), and scale(.7)

taking your fiddle as source of the question, there is actually several problems to take care of:
the tooltip doesn't work correctly, if you hover over the tooltip, it disappears (starts flickering). Check the updated fiddle, which now hides the tooltip if you move away from the bar and stays if you hover over the tooltip itself.
scaling issue: just scale the canvas wrapper.
<div id="placeholder2" style="width:420px;height:210px;margin-top:40px;"></div>
scales the canvas to the same size like the css transform
<div id="placeholder2" style="transform:scale(.7)"></div>
but maintains the correct bar values and shows the tooltip in the correct position.

Display X through div of different sizes

Problem
How would you go about displaying an X through div's of different sizes so it hits all four corners? I want one solid 1px black line to go from the top left to the bottom right of the div, and another solid 1px black line to go from the top right to the bottom left.
Example
If you're not following what I'm talking about, check out my mockup here.
Thoughts
The only solution I can think of for this problem, isn't a solution at all, but just a starting point for thinking about how to implement it. I figure I'd have two solid 1px black lines in the center of the div, and then use CSS to transform: rotate (45deg) on one line, and transform: rotate (-45deg) the other. Of course this isn't a solution that will work with any size div, since the rotation of 45 degrees will only work for a square <div>. I have a feeling I'm going to need some javascript to calculate the rotation angles. I'd really prefer a pure CSS solution, but I'm not sure CSS would be able to achieve this.
Code
Here is the code I currently have. The X is going to be placed through the .overlay class.
Edit
Edit #1: If it helps, all of my images are the same width.
Edit #2: Is there a way to use HTML Canvas lineTo() to reference corners of divs as values?

I think one possible solution for this is a CSS linear-gradient:on the background:. You create a gradient with two color breaks positioned near 50%. Se the middle break to black, and the rest to transparent. This leaves a thin black line for us to angle however we want. Then you just replicate the gradient it and mirror the angle. Something like the CSS below:
.image:hover .overlay {
//your other exising styles
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent)),
-webkit-gradient(linear, right top, left bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent));
}
EXAMPLE DEMO FIDDLE
The only remaining issue is that since your images vary in aspect ratio, you can't have your "X" always hit the corners of your image. You'll need to standardize the ratio of your images, or code some javascript that will dynamically do it for each image.
Hope that helps.

Changing opacity on Mouseover

The ultimate goal of my project is to make my image of circle chart interactive on mouseovers. I want the pieces of the circle to change opacity to .5 (from 1) when the user hovers them. I have an image of the chart but I'm not sure how to make areas of one single image change opacity on hover. I have tried several things:
I image mapped the chart with each piece in its own map, but I wasn't sure how to change opacity of an area of one single image (css)(if its even possible)
My second approach was that i sliced the chart up into individual pieces and made their opacity .5 and saved them all separately. Then, I image mapped the single image of the chart and tried to load the individual piece on hover (css)
My final approach was saving each piece of the chart as individual images and when the image is hovered, change the opacity to .5 with css. This works perfectly except i am not sure how to position the pieces to form a perfect circle in dreamweaver.
Any direction or advise is greatly appreciated. I am willing to learn javascript or jquery to help get this done.
Thank you
EDIT Image of the chart is now attached
http://i.stack.imgur.com/KwIfY.jpg

I'm not sure if I understood the question right regarding the current answers but if you want to make the parts of the chart interactive I have 2 approaches:
To achieve the effect with pure CSS I guess you need to divide the chart in individual images as you already mentioned. The positioning is quite simple. I've used in my demo below one image an let it rotate. In your case you can cut each part of the chart individually and get the right place for them with absolute positionig.
Again as you already mentioned you can use map area to define the parts of the chart. With a plugin like this: ImageMapster you can achieve what you want. I've used this once for the following map. It's again very simple, when hovering any part of the map it's background will be replaced by another background. In your case you could save the chart with full opacity and display on hover an image of the chart with 50% opacity.
Demo
The Demo is not very clean as I didn't spent much time in position the parts perfectly but you can see how it works.
transform: rotate(45deg);

I don't know if CSS3 transition will fit to you:
http://www.w3schools.com/css/css3_transitions.asp
.chart-item { opacity: 0.5; transition:opacity 2s; }
.chart-item:hover { opacity: 1; }
Check documentation for browser support.

Maybe create a div and put each image as the background or content of one div (in order), then create a listener for the div class to change opacity upon mouseenter or mouseleave using jQuery.
Here's a simple example (pardon any mistakes):
jQuery:
$( ".somedivclass" )
.mouseenter(function() {
$(this).fadeTo(200, 0.5);
})
.mouseleave(function() {
$(this).fadeTo(200, 1);
});
Here's more info on $.mouseenter(). Here's some for $.fadeTo().

Check this demo. Hover your cursor exactly on the eyes of the owl, and you will see the opacity changing. It will not change if you hover on the rest of the image.
http://jsfiddle.net/q6d57/14/
$('.eye1').on('mouseenter mouseleave', function(e) {
$('.box2').stop(true, false).fadeToggle(1500)
});

I suggest using svg. Here is an implementation of exactly what you are trying to do, because I felt like learning d3.js today:
http://jsfiddle.net/6m26k/1/
You don't need to make the chart through code though, because you can just load the svg onto the page with html5 and use css similar to mine:
.arc.filled:hover {
opacity: .8;
cursor: pointer;
}

Javascript element opacity situation

Let's say i have a div element which opacity is set to 0.5 .
I have a script which function is to draw a rectangle over the div based on the first time the user clicks with the left mouse button on the div element and the way he drags the mouse over the div.
I am trying to figure out how to make the rectangle the user draws to not be affected by the opacity of the div container element.
For example if you upload a photo to google+ there is an option to crop some part of the image so only your face is visible. Thay have this kind of functionality i am looking for. When you draw the part over the image you'd like to crop the image opacity is set to 0.5 for example but the region you are drawing is clearly showing the original style of the image.

the opacity of a wrapping element is inherited by all containing elements,
you could simply solve this by creating a png-image with your desired opacity with size 1x1px and make this as background-image and repeat x and y

I think what you are trying to do is called masking, it can be achieved atleast with svg. You could have one layer with specific opacity and a mask with the rectangle properties to "burn a hole" in the opacity at a desired location.
Take a look at this:
http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property