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

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

本文关键字：变量 转换 改变 何使用 jQuery SVG      更新时间：2023-09-26

像这样:

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

它不能工作?我怎么把变量放进去呢?

试试下面的

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

希望能有所帮助

我建议在节点上使用.change函数而不是.configure 

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

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

相关文章：