我正在尝试 Raphael + vectron,并且我正在尝试通过单击按钮来更改 svg 图像。
这(当然)是不可能的,因为当渲染 svg 时,它会呈现为路径:
<path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path>
下面是代码,如果我使用普通图像(如 .png),该代码可以工作,但问题是如何使用 Raphael(和 vectron)更改 svg 图像。
html:
<div id="container">
<div id="avatarBox" class="bgBox_blue">
<div id="charBody" class="svg-file" data-svg="img/body1.svg"></div>
</div>
<div id="toolBox">
<div class="toolboxArea">
Byt kropp<br/>
<button id="moveLeftBtn"><</button>
<button id="moveRightBtn">></button>
<div class="clear"></div>
</div>
js:
$('.svg-file').vectron({
scale: 1
}).ajaxSuccess(function(){
$('svg').attr({
'height': ($('svg').attr('height')*120)/100,
'width': ($('svg').attr('width')*110)/100,
});
var paper = $('.svg-file').data('vectron').paper;
var unicorn = paper.top;
$('.bodyBg').live('click', function(){
unicorn.attr({
fill: $(this).val(),
cx: 100
});
});
});
var moveRightBtn = $('#moveRightBtn');
moveRightBtn.on('click', function(){
var newImage = 'body' + (AvatarGenerator.eyes + 1) + '.svg';
$('#charBody').attr('data-svg','img/' + newImage);
});
});
最佳答案
您可以将路径包装在 svg 标签内。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path>
</svg>
它将表现为 svg 元素。我在 Chrome 和 IE 上测试了它。
因此,在您的情况下,给定一个包含以下行的 HTML 文件:
<div id="charBody" class="svg-file" data-svg="img/body1.svg"></div>
调用 $('.svg-file').vectron();
为 charBody
创建一个子 svg 元素,内容从文件加载,显示在页面。
我想说,您可以直接将 svg 元素字符串中的内容添加到要添加 SVG 的 div 的 innerHTML
中,而不是调用 vectron。
vectron 上次更新是在一年前,所以我对它不抱太大希望。此外,您只需要在单击按钮时更改 svg,无需使用 vectron 即可轻松完成。
关于jquery - 单击时更改图像 (svg),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16623516/