html5 svg实现不规则形状图片触发事件

html5 svg实现不规则形状图片触发事件
<pre>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" class="dds" />
</svg>
<script src="/moban/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.dds').on('click',function(){
$(this).attr('fill','green');
})
})
</script>
</body>