Айнымалы мәндермен айналдыру үшін jQuery SVG пайдалану

Бұл сияқты:

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? Бұл сияқты:

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

ол жұмыс істей алмайды? Айнымалы мәндерді қалай қосуға болады?

0

2 жауаптар

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

true параметріне орнатылған соңғы параметр, барлық басқа атрибуттарды жояды, сондықтан .change деп ойлаймын.

2
қосылды

Келесі әрекеттерді орындап көріңіз

<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 мәндерімен concatenation арқылы жаңа жол жасайды, сонда JavaScript аудармашы көреді

'translate(100,200)'

Бұл көмектеседі деп үміттенемін

2
қосылды
Мен толық мысал келтірдім. Егер сіз трансформацияны түсіндіріп берсеңіз, онда бірінші жол пайда болады. Бір нәрсені анықтай алмадым, неге трансформация желіні экранды өшіреді, бірақ бұл жеке мәселе.
қосылды автор Eric LaForce, көзі
ол әлі де кодпен жұмыс істей алмайды: svg.configure ({transform: 'translate (' + newX + ',' + newY + ')'), true); ол айнымалы мәндерді ұстай алмайды (newX және newY), жай ғана әдепкіді (0,0) пайдаланыңыз. Веб-сайттағы анықтаманы тексеремін, бірақ шешім таба алмайсыз! keith-wood.name/svgRef.html#configure
қосылды автор Pin Rob, көзі
Мен svg.configure ({viewBox: '0 0 100 100', шын деп ойлаймын); svg.configure ({transform: 'translate (0, 10)'}, шын) сияқты => viewBox = '0 0 100 100' сияқты жұмыс істейді; бұл => translate = «'translate (0, 10)' (бұл '' дұрыс емес) ретінде жұмыс істей алмайды, бірақ translate =» translate (0, 10) «болуы керек, бірақ кодты svg.configure ({ transform: translate (0,10)}), ол әлі де жұмыс істей алмайды, jQuery SVG қате ме?
қосылды автор Pin Rob, көзі
Ол желіде жұмыс істейді. Мен жұмысын пайдаланамын. Ол сәтсіз болды. тегіне қолданылатын «түрлендіруді» қате жіберемін. Бұл тек емес, басқа элементте қолданыла алады. Сіздің көмегіңіз үшін көп рахмет!
қосылды автор Pin Rob, көзі