點擊更改圖像（svg）

我正在嘗試拉斐爾+ 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），但問題是如何用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); 
    }); 
});

來源

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();創建charBody從文件，該文件顯示在頁面加載內容的子SVG元素。

我會說，而不是調用vectron，你可以直接將svg元素字符串的內容添加到你想添加SVG的div的innerHTML。

vectron最近更新一年前，所以我沒有從它寄予厚望。除此之外，您只需更改buttonclick上的圖標即可輕鬆完成，無需使用vectron。

來源

2013-05-21 19:19:39 user568109

點擊更改圖像（svg）

回答

相關問題