how do i get the current rotation in degrees of a element in snap.svg?
I can set a tranform but i find no easy way of getting a value.
A typical group looks like this.
<g transform="matrix(0.5154,0.5154,-0.5154,0.5154,64.3512,5.239)"><text x="0" y="0" style="font-size: 12px;">Change text</text></g>
You can access elements matrices via the transform() function (with no parameters).
That will provide localMatrix which is probably what you want (if there are no nested transforms or anything). Then there is a function split() which will show the different parts of the matrix.
Using your SVG code above, access would look like this.
var g = Snap('g');
var matrixObj = g.transform().localMatrix.split()
alert( matrixObj.rotate );
jsfiddle
Related
Given the following rect in SVG.
<rect xmlns="http://www.w3.org/2000/svg" x="72.036" y="156.473" transform="matrix(0.1727 -0.985 0.985 0.1727 -83.7081 215.7814)" style="fill:none;stroke:#020202;stroke-width:0.5;stroke-miterlimit:10;" width="29.129" height="2.498"/>
Above rect would like to render accordingly in KonvaJS as a Konva.Rect
https://konvajs.github.io/api/Konva.Rect.html
Based on decomposition of the matrix the following should be applied:
translate(-83.7081, 215.781)
rotate(-80.0554125754873)
scale(1.0000251446838724)
As I understand rotation, scale and skew can be applied but how to apply translate values?
Should they be added to x and y or to offsetX/offsetY instead?
Or is there a way to apply Transform class to the Rect?
Thank you.
You should use {x,y} properties.
Or is there a way to apply Transform class to the Rect?
No, public API doesn't allow this.
I have been trying to pass the ID of a SVG element generated by ng-repeat.
each one has a cx, cy, and an id:
$scope.circles = [
{cx:25, cy:40, id:1},
{cx:55, cy:40, id:2},
{cx:75, cy:40, id:3}];
These are interpolated in the HTML with this code:
<circle ng-repeat= "c in circles"
ng-attr-cx={{c.cx}}
ng-attr-cy={{c.cy}}
ng-attr-id={{c.id}}
r="6" stroke="black" stroke-width="3" fill="red"
ng-mouseover ="changeR(this)" />
There is a "base" SVG template in which these placed, and they appear in the appropriate locations.
When I examine the page elements, the ids are present. At the end of the SVG definition the ng-mouseover function should take the id, and allow for the modification of the circle... all of my attempts to pass the interpolated id attribute to the back end function seem to fail. I example I followed was here: fiddle, and it produced alerts in some permutations, but the id was either "undefined" or "[object Object]"...
My function in the back end is currently set up as
$scope.changeR= function (id){
alert(id);
var circleChange = document.getElementById(id);
circleChange.setAttribute("r", "20");
}
This produces an alert with "[object Object]", though I think I have stuck to the pattern in the fiddle, which works in the fiddle, bringing through the id as text in the alert window. When I pass the function the interpolated id numbers directly it works fine changing the radius like I wanted (I get the element by a hard coded ID and the radius changes on that one circle...)
How to I pass this ID to the back end so I can get the element and have it modify its own attributes effectively? If it is an issue of the page loading and somehow not registering the IDs in a timely way, why would the mouse-over event not be dealing with the fully loaded page?
What is paper and set in Raphael.js
Is it some external library reference..?
What is its use and how to use it..?
A Paper is a Raphael reference to its main SVG element that it uses, a bit like a container (you can have several). It also has extra methods and variables, so its not 'just' an SVG element, but you can sort of think of it a bit like the main SVG element.
A Set is like an Array, thats used to store Raphael elements.
When its useful, is iterating over a large amount of Raph elements.
So you may do something like.
var mySet = paper.set();
mySet.push( myCircle, myRect, myOtherShapeCreatedEarlier);
mySet.forEach( function( el ) { doSomethingWithEachElement() } );
Also you may do something like...
var mySet = paper.selectAll('path');
mySet.attr({ opacity: "0" });
Which would make all the paths vanish.
So really a set is just a way of dealing with elements in an easy way.
I want to change the height of rect
<clipPath xmlns="http://www.w3.org/2000/svg" id="svge-1">
<rect fill="none" x="0" y="0" width="761" height="231" />
</clipPath>
According to this, http://tutorials.jenkov.com/svg/scripting.html#changing-attribute-values, it should be easy but the problem is the rect here does not have an id.
How can I add an id to it or access the height of rect here?
There are several other ways to retrieve the element using DOM.
You can use getElementById('svge-1') to get the parent element, and get the elements named rect using getElementsByTagName in the context of that element. This will give you the first (and only) rect element:
var clipPathElement = document.getElementById("svge-1");
var rectElement = clipPathElement.getElementsByTagName("rect")[0];
You could also use DOM attributes to get the child elements ignoring their name with children. This will give you the first element, which is rect:
var rectElement = clipPathElement.children[0];
You could also use childNodes, but you would have to get the second object(childNodes[1]), since it contains all nodes (not only elements) which includes the whitespace text node before the tag.
From there you can change any attribute you want:
rectElement.setAttribute("height", "100");
Here is a JSFiddle with a working example.
I have a SVG map of france in my webpage and every district is a polygon, I need that when I click a district the color change and stay that way until I click it again
this is my code
function init(evt) {
if ( window.svgDocument == null ) {
svgDoc = evt.target.ownerDocument;
}
function update(district){
$(this).find("path, polygon, circle").attr("fill", "#0d0");<- what is wrong
}
this is one of my polygons
<path id="14" d="M82.387,173.009L109.168,141h2.42l3.33-5.965l20.425,8.818l5.296,0.475l-
1.876,31.861l5.236,7.5v8.018 l-15.6-1.701l
0.273-3.599C128.127,186.407,99.635,180.95,82.387,173.009z" fill="#CCCCCC"
onclick="update('14')">
as you can see Im getting the onclick event the problem is I cant get the polygon to change color.
thanks in advance.
Check what this holds. A console.log(this) will make your life so much more easier
I'll answer 1. This will point to the window object when a function is called. So doing a $(this).attr will find the attributes in the window object and not in the object that you expect.
Since you're passing the object id in the function, you can use that to find the element in your document. You can do something like:
$('#'+ubicacion).attr("fill","blue")
Fiddle here.