过渡不适用于svg

Question

我试图在svg上添加属性，目标已经在css上设置了转换。当我尝试使用css悬停时它工作正常。

不知怎的，我想用squg在jvery上添加as属性。它也起作用，问题是目标失去过渡效应的原因。

＆＃13;

＆＃13;

By removing last column width or setting last column width to '*' will resolve the issue.
But the whitespace problem arises if we resize the last column. 
So to avoid whitespace problem you have to approaches:
1)You have to disable resizing on the last column 

$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'*',enableColumnResizing:false}
    ]
};

Or
2) set the width of the previous column to '*' dynamically.


$scope.gridOptions = {
enableColumnResizing: true,
    columnDefs : [
        {displayName : "Name", field : "name", width : '200'}, 
        {displayName : "Gender", field : "gender" , width:'300'},
        {displayName :"Address",field:"address",width:'*'}
    ]
};

If you want to resize the last column set the width of "gender" column to '*' using some JS snippet.

＆＃13;

$(document).ready(function(){
	$('#Layer_1').hover(function(){
			$(this).find('.groupAni').attr('transform','rotate(180)');
		},function(){
			$(this).find('.groupAni').removeAttr('transform');
	});
});

＆＃13;

		.container{
			width: 1170px;
			margin: auto;
		}
		.box{
			width: 200px;
			height: auto;
			background-color: yellow;
		}
		.groupAni{
			transition: all 300ms ease-in-out;
		}
    /*		#Layer_1:hover .groupAni{
			cursor: pointer;
			transform: rotate(360deg);
		}*/

＆＃13;

＆＃13;

＆＃13;