javascript - 单击事件更改复杂的 SVG (Meteor)

Question

因此，我使用 <img src="/svg.svg"> 添加了一些自定义 SVG 图标到我的 Web 应用程序中.

然后我决定添加 toggleClass()显示点击状态。这让我找到了一个小的 jQuery 片段，它将 IMG 转换为完整的 svg:

jQuery('img.svg').each(function(){
      var $img = jQuery(this);
      var imgID = $img.attr('id');
      var imgClass = $img.attr('class');
      var imgURL = $img.attr('src');

      jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image's ID to the new SVG
                if(typeof imgID !== 'undefined') {
                  $svg = $svg.attr('id', imgID);
                }
                // Add replaced image's classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                  $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

              }, 'xml');

    });

结果是我最终得到了一个相当复杂的 SVG 对象，其结构如下:

1. 父级:SVG
2. G
3. 路径/多边形

我想要的是通过单击事件定位整个 SVG 并更改填充。

    Template.tabsOne.events({
      'click .replaced-svg': function(){
         $(this).attr('fill', 'blue);
      }
    })

不幸的是，我尝试了点击处理程序的几种变体，但我的 svg 拒绝更改其填充。有什么建议吗？

编辑:这是一个例子:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="209.217px" height="209.216px" viewBox="0 0 209.217 209.216" style="enable-background:new 0 0 209.217 209.216;" xml:space="preserve" class="svg custom-icon replaced-svg">
<g>
    <polygon points="104.605,124.953 54.991,124.953 54.991,84.259 104.605,84.259 154.217,84.259 154.217,124.953  "></polygon>
    <rect y="84.259" width="44.24" height="40.694"></rect>
    <rect x="164.968" y="84.259" width="44.243" height="40.694"></rect>
    <polygon points="209.217,73.509 159.593,73.509 109.98,73.509 109.98,22.174 209.217,22.174  "></polygon>
    <polygon points="0,22.174 99.229,22.174 99.229,73.509 49.615,73.509 0,73.509  "></polygon>
    <polygon points="0,135.704 49.615,135.704 99.229,135.704 99.229,187.042 0,187.042  "></polygon>
    <polygon points="209.217,187.042 109.98,187.042 109.98,135.704 159.593,135.704 209.217,135.704  "></polygon>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

这是另一个:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="512px" height="640px" viewBox="0 0 512 640" enable-background="new 0 0 512 640" xml:space="preserve" class="black svg custom-icon replaced-svg">
<path d="M165.438,474.562c49.922,49.922,131.031,49.922,180.969,0c49.906-49.922,49.906-131.047,0-180.961L165.438,474.562z   M448,0.32L64,0C28.641,0,0,28.641,0,64v512c0,35.359,28.641,64,64,64h384c35.359,0,64-28.641,64-64V64  C512,28.641,483.359,0.32,448,0.32z M192,64c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S174.398,64,192,64z M96,64  c17.602,0,32,14.398,32,32s-14.398,32-32,32s-32-14.398-32-32S78.398,64,96,64z M256,576c-106.078,0-192-85.922-192-192  s85.922-192,192-192s192,85.922,192,192S362.078,576,256,576z" fill="#000000"></path>
</svg>

Answer 1

类似这样的东西(您需要更改<path>元素上的填充属性):

$(document).ready(function(){
    $('svg').click(function(e){
       $(this).find('path').attr('fill', '#cc0000');
    });
});

参见this fiddle一个运行的例子

因此，在您的示例中，此更改应该可以做到:

Template.tabsOne.events({
     'click .replaced-svg': function(){
        $(this).find('path').attr('fill', 'blue');
     }
 })