单击时更改图像（svg）答案

【问题标题】：Change image (svg) on click单击时更改图像（svg）
【发布时间】：2013-05-13 11:25:39
【问题描述】：

我正在尝试 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);
    });
});

【问题讨论】：

标签： jquery image svg onclick raphael

【解决方案1】：

您可以将路径包装在 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 上次更新是一年前，所以我对它不抱太大希望。此外，您只需在 buttonclick 上更改 svg，无需 vectron 即可轻松完成。

【讨论】：