Question

我无法在firefox中旋转svg＆gt; pattern＆gt;图片。我的代码适用于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

您需要从使用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>

Answer 2

您可能不需要为用例定义模式，但是我发现了这个问题，希望找到如何转换模式的方法。对于如何转换模式的一般问题，我将添加另一个选项。

您可以使用patternTransform来定义模式上的变换。

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%"
    patternTransform="rotate(90, 15.8,15.8)
  >
    <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>

我使用的旋转编号与the answer by Paul LeBeau相同，因此结果可能与OP所寻找的不完全相同。我只是在尝试显示patternTransform的替代方案。

有关the docs的更多信息

无法在Firefox中旋转svg＆gt;模式＆gt;图像

2 个答案: