Изменить изображение (svg) по клику

Я пробовал Raphael + vectron, и я пытаюсь изменить изображение svg нажатием кнопки.Изменить изображение (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), но вопрос в том, как изменить изображение svg с помощью Raphael (и vectron).

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>

ЯШ:

$('.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); 
    }); 
});

источник

2013-05-18 holyredbeard

Вы можете обернуть путь внутри тега 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(); создает SVG дочерний элемент для charBody с содержанием загруженного из файла, который отображается на странице.

Я бы сказал, вместо того, чтобы называть vectron, вы можете напрямую добавить контент из строки элемента svg в этот div innerHTML, где вы хотите добавить SVG.

vectron был обновлен год назад, поэтому у меня нет больших надежд от него. Кроме того, вам нужно только изменить svg на buttonclick, который можно легко сделать без vectron.

источник

2013-05-21 19:19:39 user568109

Изменить изображение (svg) по клику

ответ

Смежные вопросы