Power By 专否社区

svg clone only shape of a scaled group

Go To StackoverFlow.com

0

I created a group and then scaled.I want only copy the shape of the scaled group not other attributes.Especially I want to get rid of transformed matrix.I need a new group independent of the scaled one. I don't know if it is possible to do this? Here the code:

Group for the car:

<svg id="game" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" onload="loadFunction()" >
    <!-- Car -->
    <g id="exCar" x="50" y="500"   transform="" >
        <path id="front" d="M 40 500  Q 110 450 110 500 L 40 500" fill="pink" stroke="black" />
        <path id="window" d="M 40 500 L 50 530 L 100 530 L 110 500 L 40 500 "stroke="black" />
        <path id="sides" d="M 40 500 L 40 580 L 50 560 Q 55 550 50 530 L 40 500 M 110 500 L 110 580 L 100 560 Q 95 550 100 530 L 110 500" fill="pink" stroke="black" />
        <path id ="back" d="M 40 580 L 100 560  L 40 580" fill="pink" stroke="blue" />
        <path id="wheels" d="M 40 475 L 30 475 L 30 500 L 40 500 z M 110 475 L 120 475 L 120 500 L 110 500 z M 40 545 L 30 545 L 30 570 L 40 570 z" fill="yellow" stroke="black" />
        <image id="carpicture2" x="50" y="455" xlink:href="img.jpg"></image>
        <text id="carName" x="50" y="575"></text>
    </g>
</svg>

Button to call the function :

<rect x="120" y="600" width="80" height="30" stroke:#FF0066"  onclick="cloning()"/>

Function to copy :

function cloning() {
    var newCar = document.getElementById("exCar").cloneNode(true);
    newCar.setAttribute("x", 400);
    newCar.setAttribute("y", 600);
    document.getElementById("game").appendChild(newCar);
    alert("!!!!");
};

Scaling :

document.getElementById("exCar").setAttribute(
        "transform",
        "matrix(" + result / 100 + ",0,0," + result / 100 + ","
                + (x - (result / 100 * x)) + "," + (y - (result / 100 * y))
                + ")");

(result is calculated from slider bar )

2012-04-03 23:07
by Ecrin
@mihai please dont be slept: - Ecrin 2012-04-03 23:19
hi, can you show how you are doing the scaling as well - mihai 2012-04-04 09:37
I have edited for scalin - Ecrin 2012-04-04 10:00

0

Ok I think I understand the problem now, you are doing the cloning on click, so the exCar is already scaled at that point.

I guess the only option is to clear the trasnformation matrix inside the cloning function:

newCar.setAttribute("transform", "matrix(1,0,0,1,0,0)");

And make a translation:

newCar.setAttribute("transform", "translate(350,100)");

http://jsfiddle.net/mihaifm/ZR4r8/5/

2012-04-04 11:02
by mihai
still I it is over the exCar inspite of changed x,y coordinate - Ecrin 2012-04-04 11:09
agreed :)) You are setting the x, y coords for the group, but the path data remains the same. You need to do a translation (answer edited - mihai 2012-04-04 11:17
but I will move new car with arrows and I dont want a transformed matrix.Now if I transform it again,what will be its difference from the exCar? Wont it create a transformed matrix - Ecrin 2012-04-04 11:21
Also I dont know why but the newCar is not the scaled size.It is the first size of exCa - Ecrin 2012-04-04 11:29
Ok, then you need to do the translation via js methods, not setAttribute. I'll try to set up a jsfiddle later on - mihai 2012-04-04 11:29
ok.thank u for all hel - Ecrin 2012-04-04 11:30
Added jsfiddle. I don't know how you're doing the scaling and why that doesn't work - mihai 2012-04-04 12:05
let us continue this discussion in chatmihai 2012-04-04 13:01
Ads