使用SVG中的变换模拟枢轴旋转

Question

我在SVG中有一个矩形，我需要从特定点旋转一个轴。我能看到的最好的方法是转换到轴的xy，旋转度，然后再转换。问题是第二次转换的xy。我认为它会在一定程度上消耗cos和罪，只是不知道在哪里或为什么。

*
|
|
|

将-90degrees旋转到

*---

也许我以错误的方式看待这个问题，任何人都可以澄清吗？

Answer 1

如果您使用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超时更改角度也可以正常工作。

Answer 2

我认为，你只需要对第一次转换进行协调否定：

伪代码：

g.transform（0,2）;
g.rotate（90）;
g.transform（0，-2）;

Answer 3

我发现我的方式在这里想知道如何用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"
/>

Snippet，单击“运行”，然后“看到此雷达屏幕旋转。”

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

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