Question

像这样：

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

它不能工作？如何将变量放入？

Answer 1

尝试以下

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

希望这有帮助

Answer 2

我在节点上建议.change功能，而不是.configure

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

如果设置为true，则最后一个参数会删除所有其他属性，因此我猜.change会更好。

如何使用jQuery SVG来改变变量的转换

2 个答案: