Question

我有这个svg，而且多边形有id＆＃39; uno＆＃39;

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="1641px" height="820px" viewBox="0 0 1641 820" enable-background="new 0 0 1641 820" xml:space="preserve">
    <polygon id="uno" fill="#ff6600" fill-opacity="0" stroke="" stroke-miterlimit="10" points="350,228 579,102 603,240 713,292 722,343 744,354 650,433 
        651,482 633,496 592,477 541,516 473,465 462,420 399,383 358,236 "/>

如果我这样做，我可以更改属性

    $("#uno").on({mouseenter: function(){
    this.style.stroke = '#FF6600'; 
    this.style['stroke-width'] = 3;
    this.style['fill'] = '#ff6600';
    this.style['fill-opacity']=.5;
    } 
});

但是如果我这样做，为什么它不起作用

  $('#uno').style.stroke = '#FF6600'; 
  $('#uno').style['stroke-width'] = 3;
  $('#uno').style['fill'] = '#ff6600';
  $('#uno').style['fill-opacity']=.5;

目标是在选择器是动态的时候有一个功能。例如。

$("#dos").on({mouseenter: function(){ animar(#uno);     } 
});

    function animar(a){
    a.style.stroke = '#FF6600'; 
    a.style['stroke-width'] = 3;
    a.style['fill'] = '#ff6600';
    a.style['fill-opacity']=.5;
}

Answer 1

this是javascript对象，而$(this)是jquery。

这样做会有效。

function animar(a){
    a.style.stroke = '#FF6600'; 
    a.style['stroke-width'] = 3;
    a.style['fill'] = '#ff6600';
    a.style['fill-opacity']=.5;
}

// if you can add clas
$(".js-svg-anmiate").on('mouseenter' function(){
      animar(this); 
});

// if you cant add class
$("#uni, #doit").on('mouseenter' function(){
      animar(this); 
});

从选择器更改属性svg

1 个答案: