在 SVG 中使用变换模拟枢轴旋转答案

【问题标题】：Simulate Pivot Rotate Using Transform In SVG在 SVG 中使用变换模拟枢轴旋转
【发布时间】：2011-01-27 02:37:52
【问题描述】：

我在 SVG 中有一个矩形，我需要从特定点在轴上旋转。我能看到的最好方法是转换到枢轴的 xy，旋转度数，然后再次转换。问题是第二次变换的 xy。我认为它会在某种程度上采取 cos 和 sin，只是不确定在哪里或为什么。

*
|
|
|

会旋转-90度到

*---

也许我看错了，有人可以澄清一下吗？

【问题讨论】：

标签： javascript canvas svg transform rotation

【解决方案1】：

我在这里找到了自己的方式，想知道如何使用 JS 进行旋转和图像。

我喜欢@gz。回答。这正是我想要的。

我所做的只是添加,256,256 来指定枢轴点。

发件人：

from="0"
to="360" 
dur="1s"

收件人：

from="0,256,256"
to="360,256,256" 
dur="10s"

<animateTransform attributeName="transform"
  type="rotate"
  from="0,256,256"
  to="360,256,256" 
  dur="10s"
  repeatDur="indefinite"
/>

片段，单击运行，然后查看此雷达屏幕旋转。

.radar{width:200px;height:200px;}

<svg class="radar"
viewBox="0 0 512 512" 
xmlns="http://www.w3.org/2000/svg">

<path opacity="1" 
  fill="#000" 
  d="M0 0h512v512H0z">
</path>

<path 
transform="scale(1, 1)
translate(0,0)" 
fill="#f00" 
d="M252.78 20.875c-1.302.012-2.6.03-3.905.063-37.928.974-76.148 11.153-111.28 31.437C25.164 117.285-13.41 261.322 51.5 373.75s208.946 151.036 321.375 86.125c77.7-44.86 120.1-127.513 117.47-211.406-3.563 65.847-35.898 128.573-91 169.374-10.828 9.62-22.774 18.315-35.814 25.844-103.68 59.86-235.983 24.4-295.842-79.282-59.86-103.68-24.43-235.984 79.25-295.844 35.64-20.576 74.67-29.88 112.968-29.03 63.304 1.4 124.623 30.57 165.438 82.53l-32.594 23.032c-33.27-42.835-84.01-66.6-136.063-67-.96-.008-1.91-.012-2.875 0-.964.01-1.943.038-2.906.062-28.006.717-56.222 8.215-82.156 23.188-82.99 47.914-111.508 154.322-63.594 237.312 47.914 82.99 154.32 111.51 237.313 63.594 51.37-29.66 81.862-81.724 86.28-136.78-12.53 45.37-42.32 86.745-85.438 114.186-.02.013-.043.018-.062.03l-.344.22c-3.16 2.147-6.42 4.216-9.78 6.156-74.245 42.865-168.918 17.494-211.782-56.75-42.864-74.243-17.493-168.917 56.75-211.78 23.2-13.396 48.39-20.122 73.375-20.782 47.953-1.266 95.138 19.858 125.968 59.156l-39.844 28.156c-20.232-24.32-50.055-37.79-80.594-38.03-1.17-.01-2.33 0-3.5.03-17.035.432-34.176 4.995-49.938 14.094-50.435 29.12-67.806 93.877-38.687 144.313 29.12 50.434 93.908 67.806 144.344 38.686 21.245-12.267 36.623-30.85 45.124-52.03-18.815 21.064-44.364 36.888-73.938 44.155-.04.013-.084.02-.125.033-37.507 10.787-78.796-4.816-99.217-40.188-24.07-41.688-9.845-94.712 31.843-118.78 13.028-7.523 27.143-11.314 41.156-11.69 25.66-.685 50.898 10.098 68.188 30.25l-41 28.97c-5.497-4.796-12.664-7.72-20.53-7.72-17.277 0-31.283 14.007-31.283 31.282 0 17.276 14.004 31.282 31.282 31.282 17.277 0 31.28-14.007 31.28-31.283 0-1.187-.06-2.347-.188-3.5l120.094-57.312 4.03-1.75-.06-.156 62.25-29.72 9.25-4.438-5.282-8.812-19.97-33.375-5.155-8.625-8.25 5.813-8.095 5.718c-45.9-58.864-116.14-91.053-187.844-90.405z">
 
<animateTransform
 attributeName="transform"
 type="rotate"
 from="0,256,256" 
 to="360,256,256" 
 dur="10s" 
 repeatDur="indefinite"
/>
</path>
</svg>

【讨论】：

我不记得了。我的猜测是 viewbox 是 512x512 和 256x256 会在中心。

【解决方案2】：

如果您使用 SVG transform attribute 而不是尝试自己使用 javascript 编写代码，您需要做的就是以 (0, 0) 作为轴心来居中您的形状。

例如，在下面的示例中，路径中初始弧的中心位于原点。动画适用于该元素，因此它看起来是在原地旋转，而圆圈是静止的。包含组上的平移将旋转的中心点移动到图像的中心。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <g transform="translate(32, 32)" stroke="navy" fill="none">
        <path d="M -1 1.732 a 2 2 0 1 1 2 0 v 24 a 1 1 0 0 1 -2 0 Z">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="1s" repeatDur="indefinite"/>
        </path>
    </g>
</svg>

唯一的计算是 1.732 来获得圆心，变换矩阵处理角度。请注意，您不必使用 SMIL with SVG，从 javascript 超时更改角度也可以。

【讨论】：

【解决方案3】：

SVG Spec section on coordinate system transformations 很好地展示了转换矩阵以及如何链接它们。

【讨论】：

【解决方案4】：

我认为，您只需要为第一次转换否定协调：

伪代码：

g.transform(0,2);
g.rotate(90);
g.transform(0,-2);

【讨论】：

并非所有情况都如此，它需要基于角度