使用jQuery SVG更改(或动画)路径
使用jQuery SVG更改(或动画)路径
提问于 2013-02-16 02:36:36
我基于jQuery SVG插件创建了一些示例代码，用于显示路径上的文本。现在，当我单击文本时，我想要更改路径(例如，从[50,50,100,100]改为[50,50,200,300])。我还想知道如何使用动画应用此更改。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.svg.min.js"></script>
<script src="jquery.svgdom.min.js"></script>
<script>
jQuery(function($){
$('#debugsvg').svg({onLoad: function(svg) {
var path = svg.createPath();
var text = svg.text("");
var defs = svg.defs();
svg.path(defs, path.move(50, 50).line(100, 100), {id: "myPath"});
svg.textpath(text, '#myPath', "foo bar");
$(text).click(function(e) {
alert("Animate me please!");
});
}});
});
</script>
</head>
<body>
<div id="debugsvg" style='height="600px", width="600px"'>
</div>
</body>
</html>回答 1
Stack Overflow用户
发布于 2013-02-23 02:04:49
我创建了一些代码来解析路径的'd‘属性，并将该属性替换为一个新值，如下所示。动画似乎是不可能的，因为只有certain attributes可以用JQuery SVG来制作动画。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="jquery.svg.min.js"></script>
<script src="jquery.svgdom.min.js"></script>
<script src="jquery.svganim.min.js"></script>
<script>
jQuery(function($){
$('#debugsvg').svg({onLoad: function(svg) {
var path = svg.createPath();
var text = svg.text("");
var defs = svg.defs();
var path = svg.path(defs, path.move(50, 50).line(100, 100), {id: "myPath"});
svg.textpath(text, '#myPath', "foo bar");
$(text).click(function(e) {
var d = $(path).attr('d');
var re = new RegExp("([^,]+),([^L]+)L([^,]+),([^,]+)", "");
var m = d.match(re);
var dNew = m[1] + "," + (m[2] - 20) + "L" + m[3] + "," + (m[4] - 40);
$(path).attr({d: dNew});
});
}});
});
</script>
</head>
<body>
<div id="debugsvg" style='height="600px", width="600px"'>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14901204
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号