css - 无法在Firefox中旋转SVG>样式>图像

我无法在Firefox中旋转svg> pattern> image。我的代码可以在Chrome，Opera和Safari中运行，而我没有在IE中尝试过。

这是例子：

function svgClick() {
  document.getElementById('circle-image').style.transform = "rotate(180deg)"
}

body {
  background-color: black
}
.circle {
  stroke-width: 2.1;
  stroke-dasharray: 200 200;
}
#circle-image {
  transform-origin: 50% 50%;
  transform: rotate(90deg);
}
h1 {
  font-size: 20px;
  color: white;
}

<svg width="58px" height="58px" onclick=svgClick()>
  <pattern id="image" height="100%" width="100%">
    <image x="10%" y="10%" width="20" height="20" id="circle-image" xlink:href="http://cliparting.com/wp-content/uploads/2016/05/Free-arrows-clipart-free-clipart-graphics-images-and-photos-image-2.png">
  </pattern>
  <linearGradient id="gradient">
    <stop offset="0%" stop-color="   #40fffb " />
    <stop offset="100%" stop-color="  #33468b" />
  </linearGradient>
  <circle cx="27.2" cy="27.2" r="17" fill="url(#image)" stroke="url(#gradient)" class="circle"></circle>
</svg>
<h1>Click on circle to rotate arrow to 180deg<h1>

最佳答案

您将需要从使用CSS改为使用transform属性。即：

<image ... transform="rotate(90, 15.8,15.8)"/>

“ 15.8”值来自（10％* 58）+（50％* 20）。

function svgClick() {
  document.getElementById('circle-image').setAttribute("transform", "rotate(180, 15.8,15.8)");
}

body {
  background-color: black
}
.circle {
  stroke-width: 2.1;
  stroke-dasharray: 200 200;
}
h1 {
  font-size: 20px;
  color: white;
}

<svg width="58px" height="58px" onclick=svgClick()>
  <pattern id="image" height="100%" width="100%">
    <image x="10%" y="10%" width="20" height="20" id="circle-image" xlink:href="http://cliparting.com/wp-content/uploads/2016/05/Free-arrows-clipart-free-clipart-graphics-images-and-photos-image-2.png" transform="rotate(90, 15.8,15.8)"/>
  </pattern>
  <linearGradient id="gradient">
    <stop offset="0%" stop-color="   #40fffb " />
    <stop offset="100%" stop-color="  #33468b" />
  </linearGradient>
  <circle cx="27.2" cy="27.2" r="17" fill="url(#image)" stroke="url(#gradient)" class="circle"></circle>
</svg>
<h1>Click on circle to rotate arrow to 180deg<h1>