CODEWITHSUNDEEP
javascriptjquerysvg
Pin Rob
Pin Rob

Reputation: 43

How to use jQuery SVG to change the transformation with the variables

like this:

svg.configure({viewBox: '0 0 100 100'}, true);
svg.configure({transform:'translate(100,200)'},true);

it works ok! But how do I put the variable to the setting? like this:

var X=100;
var Y=200;
var width=500;
var height=400;
var newX=100;
var newY=200;
svg.configure({viewBox: 'X Y wdth height'}, true);
svg.configure({transform:'translate(newX,newY)'},true);

it can't work? How do I put the variables in?

Upvotes: 0

Views: 4134

Answers (2)

Puneet
Puneet

Reputation: 603

I Suggest .change function on the node instead of .configure

svg.change(Node, { transform: 'translate(' + newX + ',' + newY + ')' });
//Node can be any of the svg nodes from Eric's solution

the last parameter if set to true removes all other attributes hence i guess .change would work better.

Upvotes: 2

Eric LaForce
Eric LaForce

Reputation: 2151

Try the following

<html>
<head>
    <link href="jquery.svg.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.svg.min.js"></script>
    <script type="text/javascript">

        $(document).ready( function(){
            $('#svgbasics').svg({onLoad: drawInitial});
        });

        function drawInitial(svg) {
            var X=0;
            var Y=0;
            var width=500;
            var height=600;
            var newX=100;
            var newY=100;
            svg.configure({viewBox: X + " " + Y + " " + width + " " + height}, true);


            var circle = svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
            var g = svg.group({stroke: 'black', 'stroke-width': 2});
            var line = svg.line(g, 15, 75, 135, 75);
            var line2 = svg.line(g, 75, 15, 75, 135);

            svg.configure(line, {transform:'translate(' + newX + ',' + newY + ')'},true);
        }

    </script>
</head>

<body>
<div id="svgbasics"></div>
</body>
</html>

This will create a new string via concatenation with the values of newX and newY such that the javascript interpreter will see

'translate(100,200)'

Hope this helps

Upvotes: 2

Related Questions