firefoxでsvg> pattern> imageを回転できません

Question

firefoxでsvg> pattern>イメージを回転できません。私のコードは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>

Answer 1

あなたの上transform属性を使用してCSSを使用してから変更する必要があります。すなわち、「15.8」の値は（10％* 58）+（50％* 20）になります。 Firefoxで

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>