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.
Related
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
I resize the paper size by moving model :
paper.on('cell:pointermove',
function(cellView, evt, x, y) {
if((x+cellView.model.prop('size/width'))>=650 &&(y+cellView.model.prop('size/height'))>=200)
paper.setDimensions(x+cellView.model.prop('size/width'), y+cellView.model.prop('size/height'));
}
Is there any way I can change the property of paper just like element.prop(properties)?
You can get the width/height of the paper with paper.options.width and paper.options.height. Paper is a view, not a model so it does not have set()/get()/prop()/attr() methods but you can always store properties to it just like to any other object if you want: paper.foo = 'bar'
Why don't you just call paper.fitToContent()?
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.
I am trying to scale and translate an SVG image in Batik.
To do the zooming I use
AffineTransform at= new AffineTransform();
at.scale(sx, sy);
at.translate(tx, ty);
canvas.setRenderingTransform(at, true);
That works quite fine (after I found out, that the sx, sy, tx and ty values must be screen coordinates, not SVG coordinates.
But I want to allow multiple scaling operations.
The problem is: I do not manage to "add" another transformation to the existing one.
I tried it by first reverting the old transformation and then appying the new one. But that gets me to another problem: The reversion doesn't work! It leads to an image that is smaller than the original one (thus zooming out).
I experimented a bit and tried to apply a transformation, then apply the inverse and then apply the original one again:
final AffineTransform at= new AffineTransform();
at.scale(zoom.sx, zoom.sy);
at.translate(zoom.tx, zoom.ty);
canvas.setRenderingTransform(at, true);
...
final AffineTransform reverseAt = at.createInverse();
canvas.setRenderingTransform(reverseAt, true);
...
final AffineTransform reverseBackAt= reverseAt.createInverse();
canvas.setRenderingTransform(reverseBackAt, true);
The first transformation is correct. The second one leads to rubbish, but appying the original one (or the inverse of the inverse) again, leads to the correct result.
So actually, there are two questions:
What is the best way, to apply multiple zooming operations?
Why is the result of the inverse transformation not what I expected?
To answer your first question, use AffineTransform.concatenate():
AffineTransform firstTransform = new AffineTransform();
at.scale(sx, sy);
at.translate(tx, ty);
// Example: double all sizes
AffineTransform secondTransform = AffineTransform.getScaleInstance(2, 2)
secondTransform.concatenate(firstTransform);
canvas.setRenderingTransform(secondTransform, true);
I am trying to define my own namespace inside a SVG so I can use my own tags and attributes. If I understand correctly, the SVG should look like this:
<svg xmlns:myns="http://www.example.com/whatever/">
<g myns:mycustomattr="123">
...
I am adding root SVG element through D3, but adding a namespace to it with attr fails:
var svg = d3.select("#container")
.append("svg")
.attr('xmlns:myns', 'http://www.example.com/whatever/')
The code above results in: NamespaceError: An attempt was made to create or change an object in a way which is incorrect with regard to namespaces
What would be the correct way to add namespace to SVG using D3.js?
You just set d3.ns.prefix
d3.ns.prefix.myns = "http://www.example.com/whatever/";
Then use it:
var svg = d3.select("#container")
.append("svg")
.attr('myns:someAttribute', 'some value');