SVG的defs标签中添加的Dynamicall无法正确显示

Question

svg的defs标签的动态添加无法正确显示

静态：

静态定义可以正常工作： http://jsfiddle.net/89toem1x/1/

$("svg").find('#rect').addClass('highlight');

.highlight{
	animation: highlight 2s infinite;
}

@keyframes highlight {
    0%   {
		filter: '';
	}
    50%  {
		filter: url('#invertFilter');
	}
    100% {
		filter: '';
	}
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<svg width="400" height="180">
  <defs>
  <filter id="invertFilter"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter>
  </defs>
  <rect id="rect" x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

使用JS动态：

动态定义不起作用并且完全不显示形状 http://jsfiddle.net/86yemr7x/1/

$('svg').find('defs').append('<filter id="invertFilter"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter>')
$("svg").find('#rect').addClass('highlight');

.highlight{
	animation: highlight 2s infinite;
}

@keyframes highlight {
    0%   {
		filter: '';
	}
    50%  {
		filter: url('#invertFilter');
	}
    100% {
		filter: '';
	}
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<svg width="400" height="180">
  <defs></defs>
  <rect id="rect" x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>