Как использовать jQuery SVG для изменения преобразования с помощью переменных - PullRequest
Новая
       0

Как использовать jQuery SVG для изменения преобразования с помощью переменных

0 голосов
/ 29 октября 2011

как это: 

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

работает нормально! Но как мне поставить переменную в настройку? как это: 

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);

это не может работать? Как поместить переменные в?

Ответы [ 2 ]

2 голосов
/ 13 августа 2012

Я предлагаю .change функцию на узле вместо .configure

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

последний параметр, если установлено значение true, удаляет все остальные атрибуты, следовательно, я думаю, .change будет работать лучше.

2 голосов
/ 29 октября 2011

Попробуйте следующее 

<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>

Это создаст новую строку путем конкатенации со значениями newX и newY, так что интерпретатор javascript увидит 

'translate(100,200)'

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...