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

转换来自样式表中的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"

Answer 2

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

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

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

在SVG转换规模上使用CSS转换

2 个答案: