javascript - Safari 浏览器在旋转变换后渲染 SVG 两次

Question

在浏览器中呈现切换框时，点击标题应该打开/关闭切换内容区域，同时将 SVG 箭头旋转 180 度。这适用于除 Safari 以外的所有浏览器(包括移动设备和桌面设备)。它似乎同时呈现两个版本的 SVG 箭头。

i {
    position: absolute;
    right: 0;
    margin-right: 12px;
}

.active i { 
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari 3-8 */
}

此 fiddle 中提供的示例代码:https://jsfiddle.net/e6gbdkaL/1/

Answer 1

和SVG转换有点关系。

您需要定义 transform-origin并将旋转应用于 <g>元素。

i > svg > g {
  transform-origin: 50% 50%;
  transform: rotate(0deg);
}
.active i > svg > g {
  transform: rotate(180deg);
}

请参阅此 fiddle 以获得可行的解决方案:https://jsfiddle.net/df75g16k/