javascript - 在 SVG 变换比例上使用 CSS 过渡

Question

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

 <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 Transform 属性上使用 CSS Transitions 有什么想法吗？

(* 编辑了一个打字错误)

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