在 SVG 变换比例上使用 CSS 过渡答案

【问题标题】：Using CSS transition on SVG transform scale在 SVG 变换比例上使用 CSS 过渡
【发布时间】：2014-08-08 00:45:12
【问题描述】：

我正在尝试在我的 SVG 上构建缩放选项。我想使用 CSS 过渡来更顺畅地进行缩放。由于某种原因，它不起作用。

 <style>
     #bbb {
    -webkit-transition: transform 0.5s;
        -moz-transition: transform 0.5s;
        -o-transition: transform 0.5s;
        transition: transform 0.5s;
     }
 </style>

 <svg version="1.1" id="myimage" baseProfile="full" currentScale="1" width="800" height="600" xmlns="http://www.w3.org/2000/svg" style="border:1px solid black;background-color:black;" viewBox="0 0 800 600">
   <g id="bbb" transform="scale(1) translate(0,0)">
  <rect width="100%" height="100%"  />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
  </g>
</svg>

<button onclick="setScale(4);">Test Scale</button>

<script>
   function setScale(scale) {
        document.getElementById('bbb').setAttribute("transform", 'scale(' + scale + ')');
   }
</script>

任何想法如何在 SVG 变换属性上使用 CSS 过渡？

(* 编辑了一个错字)

【问题讨论】：

我可以让变焦效果很好。但并不像我预期的那样顺利使用过渡。

标签： javascript html css svg transform

【解决方案1】：

transition 带有来自样式表的 CSS 规则，你要做的就是添加一个属性。

如果您通过样式表使用 CSS 过渡，我相信它可以正常工作：DEMO TEST via CSS & attribute

演示的 CSS

a:focus + svg #bbb {
  transform:scale(4);
}
#bbb {
  transition:1s;
}
svg {
  vertical-align:top;
}
a:focus {
  pointer-events:none;/* demo purpose*/
}

以及用于演示目的的 HTML。

<a tabindex="0"> toggle zoom circle CSS only </a> 
<svg version="1.1"

【讨论】：

感谢 GCyrillus 和 @user3750032。当我改变风格时它确实有效。但现在由于某种原因，它在 FF 上运行良好，但在 Chrome 上却不行。它适用于 scale() 但不适用于 translate(,) - 知道为什么吗？
@aviv 我更新了代码笔：codepen.io/gc-nomade/pen/pLzxc。添加了 prefixfree.js 和 translate()。为确保它正常工作，您可以在 CSS 中将变换属性的初始值设置为 0。
GCyrillus，你是说这只有在过渡通过 css 时才有效。以编程方式修改转换时有没有办法获得转换？
@Amber 如果您通过 js 更新转换值，它仍然是应用的 CSS 规则，如果设置了转换，它应该完成它的工作，或者您的意思是通过循环通过 JS 逐步更新? （这就是转换的作用......通过从初始值到新值的步骤循环；））

【解决方案2】：

它不起作用，因为transition 只会转换 CSS 属性，而不是 SVG 特定属性。

您可以使用.style 属性将transform 设置为内联样式。

function setScale(scale) {
    document.getElementById('bbb').style.transform = "scale(" + scale + ")";
}

【讨论】：

当然，您还必须考虑每个浏览器的供应商前缀。