Svg 是否在不使用viewBox的情况下围绕中心缩放？_Svg_Scale_Center

Svg 是否在不使用viewBox的情况下围绕中心缩放？

svg

Svg 是否在不使用viewBox的情况下围绕中心缩放？,svg,scale,center,Svg,Scale,Center,我知道关于这一点有很多争论，但我想知道是否有一种方法可以在不使用viewBox的情况下围绕元素中心缩放元素（据我所知，viewBox必须应用于svg，而不是单个对象）。在本练习中，为了理解svg缩放的逻辑，我希望（不可见的）红色圆圈出现，然后在单击黄色矩形时缩放（就像它弹出一样）。有人能帮我吗？提前谢谢 image/svg+xml 缩放图元时，不仅要缩放其大小，还要缩放其位置。如你所见实现解决方案的方法多种多样，但它们背后的一般原则是，圆必须围绕它自己的原点进行缩放，而不是SVG（左上角）

我知道关于这一点有很多争论，但我想知道是否有一种方法可以在不使用viewBox的情况下围绕元素中心缩放元素（据我所知，viewBox必须应用于svg，而不是单个对象）。在本练习中，为了理解svg缩放的逻辑，我希望（不可见的）红色圆圈出现，然后在单击黄色矩形时缩放（就像它弹出一样）。有人能帮我吗？提前谢谢


image/svg+xml

缩放图元时，不仅要缩放其大小，还要缩放其位置。如你所见

实现解决方案的方法多种多样，但它们背后的一般原则是，圆必须围绕它自己的原点进行缩放，而不是SVG（左上角）的原点进行缩放

一种方法是，通过将圆的定位责任转移给父组，有效地将圆置于其自身的坐标空间中

<g transform="translate(31,20)">
  <circle cx="0" cy="0" ... />
</g>

现在，就圆而言，它位于原点（0,0）。当您使用动画缩放它时，它会围绕原点缩放，因此不会移动。但是，其最终位置仍由其父组的平移变换决定

<g transform="translate(31,20)">
  <circle cx="0" cy="0" ... />
</g>

如果需要，您可以嵌套svg元素并在嵌套的svg元素上放置viewBox属性。谢谢Robert Longson。在本例中，您能告诉我嵌套另一个svg是如何做到这一点的吗？对不起，我是新手，似乎我自己做不到。我设法通过另一个嵌套的svg移动了红色圆圈，但它在缩放时仍然会移动。我真的不知道你想做什么。我只是纠正了你在第一个括号内的句子中的错误分割。你能缩放红圈以保持其中心点吗？我看不到红圈，只是一个黄色的正方形。非常感谢保罗·勒博，这澄清并解决了问题！