无法在 Firefox 中旋转 svg>模式>图像答案

【问题标题】：can't rotate svg>pattern>image in firefox无法在 Firefox 中旋转 svg>模式>图像
【发布时间】：2020-06-22 01:32:11
【问题描述】：

我无法在 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>

【问题讨论】：

Firefox 中的模式目前仅支持变换属性，不支持 CSS 变换样式。
你能建议我可以做些什么来旋转它吗？

标签： css firefox svg rotation

【解决方案1】：

您需要从使用 CSS 更改为在 .即：

<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>

【讨论】：

【解决方案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

【讨论】：