这是我的代码：如何在元素框中单击时仅旋转带有角度的svg-arrow？
<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
<md-card-content layout="row" layout-align="start center">
<img src="../assets/icons/cd-icon-arrow.svg" class="buildrag-toggle">
<h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
<md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)">
<md-icon>add_circle_outline</md-icon>
</md-button>
</md-card-content>
</md-card>
解决方法
单击按钮时,使用ng-class切换类.然后在css中使用此类来旋转图像.
<md-card class="header" style="margin: 0 0 4px 0;" ng-mousedown="toggleCollapse('source')">
<md-card-content layout="row" layout-align="start center">
<img src="../assets/icons/cd-icon-arrow.svg" ng-class="{'rotate': rotateImg}" class="buildrag-toggle">
<h2 class="md-title no-top-margin no-bottom-margin" flex style="padding-left: 10px;">Data</h2>
<md-button class="md-icon-button header-button" ng-mousedown="addDataSource($event)" ng-click="rotateImg = !rotateImg">
<md-icon>add_circle_outline</md-icon>
</md-button>
</md-card-content>
</md-card>
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome,Safari,Opera */
transform: rotate(90deg);
}
