Question

我正在尝试使用SVG中的比例动画将圆从1px半径扩展到20px半径。当前半径是1px，我正在尝试将其缩放到20x。问题是，每当我尝试运行代码时，1px点就会被诊断出上下移动，然后突然到达SVG的外侧

我曾尝试将atributeType="xml"与atributeName="r"一起使用，以及atributeName="transform" type="scale"


      <animatetransform
      attributeType="xml"
      attributeName="transform"
      type="scale"
      from="1"
      to="20"
       begin="0s"
       dur="2s"
       repeatCount="indefinite"
       fill="freeze"
      />

        </circle>

我希望圆点从中心向外扩展到20px，而不移动，但是当前结果是圆飞出了屏幕。

Answer 1

任何svg图形的坐标都从svg画布的左上角开始计数。
使用<template> ... <img class="responsive-img" :src="getImage(item)" alt=""> {{ item.name }} ... </template> <script> ... methods: { getImage(item) { return require(item.img); } } ... </script>命令时，将重新计算图形的坐标。

增大值scale时，圆心的坐标将变大20倍，因此圆会沿对角线移动并延伸到SVG画布的边缘之外。
为了避免这种影响，您可以使用该命令来增加圆的半径，而不是scale(20)命令

scale

如何修复SVG中的不缩放圆圈：没有出现错误

1 个答案: