I'm working on an SVG an I want to add a scale and rotation transform. The rotate value is dynamic and the scale value is constant.
I tried like this:
boxElem.setAttribute("transform", "rotate(" + rotation + "), scale(0.9)");
It is not working. Only the scale value is having an effect. Can anyone tell me how to add multiple properties inside transform in JS.
setAttribute will result in adding the attribute transform like this :
<div transform="rotate(rotation) scale(0.9)"></div>
you need to update the style of the element :
boxElem.style.transform = "rotate(" + rotation + ") scale(0.9)";
Related
I want to animate the background-position X axis but leave the Y axis as 'bottom'.
I have been able to animate the X axis using:
$('#imageholder').animate({'background-position' : mousePosX});
However, this resets the Y position which on my CSS file is set as bottom.
I have tried combining mousePosX and bottom, eg:
$('#heroimageholder').animate({'background-position' : mousePosXPercent + " bottom"});
or:
var bgpos = mousePosXPercent + " bottom";
$('#heroimageholder').animate({'background-position' : bgpos});
With no results.
Is there a way to make .animate() work with multiple css values?
I found this particular issue could be remedied using background-position-x, eg:
$('#imageholder').animate({'background-position-x' : mousePosX});
Is there a short way of adding the translate to the text's transform attr without removing the rotation?
currently I add rotation when the text is created:
.attr('transform', rotate(270 xValue, yValue);
Note that this is done in a for loop since there are numerous texts
but later on the user should be able to drag the text horizontally. Dragging one text should move all the texts across. Doing the following removes the rotate attribute from above:
svgContainer.selectAll("text").attr("transform", "translate(" + [tx, ty] + ")");
is there a short way where I can select all the text and just append the translate attr to the rotate? Or do I need to loop through all the Texts and manually change each one?
I have just came to a working solution:
I've placed all the text inside a "g" element. and then translated the "g" element.
I have created a fiddle of a bar chart, which is a part of a series of charts I'm creating using Raphael SVG. The other charts are vertically inverting perfectly using scale(1,-1). However, if you apply scale on this fiddle as given here:
SVGpaper.rect((-50 / 2), 0, 50, barHeight).attr({
transform: "t" + t1 + "," + t2 + "s1,-1",
"stroke-width": 1
});
and inspect the bars, the scale is working but the transform for the y-axis is changing and thus not creating any change in the SVG itself.
What is the problem here?
I think with Raph each rect is scaling around its own centre of origin, so in effect there is no visible difference. Whereas you want to scale around a specific centre. So if you use a specific centre of origin for them all like..
Swap
transform: "t" + t1 + "," + t2 + "s1,-1"
for
transform: "t" + t1 + "," + t2 + "s1,-1,0,0"
I think it will do what you are after, eg http://jsfiddle.net/Qru24/14/
Note: Please see demo code here: http://jsfiddle.net/ginja/5yp7D/
I have a set of objects that I rotate on the click of the blue square, which works fine. Each object in the set has a hover event attached that causes the object to animate a colour change and scale to give the impression of it growing and shrinking when the mouse enters and leaves. However as you can see from the demo, the scaling causes the object to reset to it's original position and also causes an interesting effect on rotate if the object was previously hovered on.
My question is can I rotate the set of objects and still have the scale effect of the object after a rotate without it resetting to it's original position, I assume that I have the incorrect transform in the mouseover and if someone could point me in the right direction I would be most grateful.
EDIT New fiddle link...
After some further research into this I think I understand the issue.
When you draw a path in Raphael it is a set position on the canvas, when we perform the rotate, it is an applied transformation on top of that set position. The hover event is triggered we apply a scale transformation, which clears any previous transformations and this is why the object returns to it's original location.
The solution that I have come up with is when we perform the hover animation, we need to also perform any current applied rotation and when rotating we need to make sure the scaling is reset. I've also noticed that while the rotation is occurring, if you hover over a block, some odd animation occurs and it may be necessary to disable the hover while rotating.
Please see the jsFiddle link http://jsfiddle.net/ginja/5yp7D/ for an updated code, below I've outlined my changes...
Rotate:
blocks.animate({ transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 1000);
Mouse Over:
this.animate({ fill: "#5CBFEB", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1.2" }, 200);
Mouse Out:
this.animate({ fill: "#cc0000", transform: "r" + stadRotate + " " + stadCX + " " + stadCY + "s1" }, 200);
I'm not sure if this is the right way to do this but if anyone has anything to add or a better solution please do post a comment or answer
I'm trying to get a SVG shape to rotate using the transform attribute and the transition method in D3. Here is the jsfiddle containing an example: http://jsfiddle.net/TJd2a/
I'm using two buttons, Left and Right, to rotate the rectangle by incrementing by its angle by 45 or -45 degrees. When the shape reaches either 180 or -180 degrees, the transition rotates the shape the opposite way, rather than moving linearly to the next angle. Using console logging, I've found there is nothing wrong with the angles that my code is generating. It appears to be how D3 is dealing the transition, as the generated XML does not show the same angle as the current (eg. when at 225 degrees, D3 gives the rectangle a rotation of -135 instead).
From what I've read and understand from the documentation, I need to use a custom Tween, but I 'm not sure where to start with a custom tween as I cannot find any examples specific or similar examples to help me understand how it works.
Correct; you can use a custom tween to change the interpolator. D3 has a special interpolator for transforms, but it's not doing the right thing in your case. (I think that's probably a bug which should be fixed, so I filed issue 661.) Here's an example using interpolateString instead:
d3.select("rect").transition().attrTween("transform", function(d) {
return d3.interpolateString(
"rotate("+ d.a +")",
"rotate(" + (d.a += 45) + ")"
);
});