在悬停时添加svg的新路径

时间:2016-11-07 16:18:13

标签: javascript jquery svg

我在svg上空盘旋,想在我悬停的特定部位上添加一个形状。

我尝试了以下代码,方法是将path形状附加到svg上悬停的路径上,但这不起作用。希望下面的代码能让我清楚地了解我遇到的问题。如果需要更多细节请告诉我。

$(document).on('mouseenter', '.city', function(e) {
  $(this).append('<path class="st0" d="M59.4,0H10.6h-0.5c-5.7,0-12,5.7-9.6,11.7c1.4,3.6,3.9,7.2,5.8,10.7c1.2,2.2,2.4,4.3,3.5,6.5h0.4l3.5-6.3c1.3-2.3,2.8-4.6,4-7h41.6c4.3,0,7.8-3.5,7.8-7.8l0,0C67.1,3.5,63.7,0,59.4,0z"/>')
  console.log(this)
});

this然后看起来像这样:

<path class="city" d="M653.3,209.8c3.2,0,6.2,3.2,4.9,6.4c-0.8,1.8-2,3.6-3,5.4c-0.6,1.1-1.2,2.2-1.8,3.3h-0.2   c-0.6-1.2-1.2-2.2-1.9-3.4c-1-1.8-2.3-3.7-3-5.6C647.1,212.7,650.3,209.8,653.3,209.8"><path class="st0" d="M59.4,0H10.6h-0.5c-5.7,0-12,5.7-9.6,11.7c1.4,3.6,3.9,7.2,5.8,10.7c1.2,2.2,2.4,4.3,3.5,6.5h0.4l3.5-6.3c1.3-2.3,2.8-4.6,4-7h41.6c4.3,0,7.8-3.5,7.8-7.8l0,0C67.1,3.5,63.7,0,59.4,0z"></path><path class="st0" d="M59.4,0H10.6h-0.5c-5.7,0-12,5.7-9.6,11.7c1.4,3.6,3.9,7.2,5.8,10.7c1.2,2.2,2.4,4.3,3.5,6.5h0.4l3.5-6.3c1.3-2.3,2.8-4.6,4-7h41.6c4.3,0,7.8-3.5,7.8-7.8l0,0C67.1,3.5,63.7,0,59.4,0z"></path></path>

0 个答案:

没有答案