主页 / 问题 / 810451
Accepted
Дмитрий Полянин
Asked:2020-04-06 18:43:36 +0000 UTC2020-04-06 18:43:36 +0000 UTC

transform 中变换序列的逻辑

  • 772

我不完全理解 SVG 中的转换是如何工作的。

<svg style="width:400px; height: 400px;" viewBox="-100 -100 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
    <line x1="-200" y1="0" x2="400" y2="0" stroke="lime" stroke-dasharray="5 5"></line>
    <line x1="0" y1="-200" x2="0" y2="400" stroke="lime" stroke-dasharray="5 5"></line>
    
    <rect x="20" y="20" width="40" height="40" fill="aqua" ></rect>
    <rect x="20" y="20" width="40" height="40" fill="green" transform="scale(2, 2)"></rect>
</svg>

为什么scale他们不是围绕图形的中心，而是从原点开始，因为现在图形不仅增加了，而且还移动了……那么问题是如何围绕中心增加它？

<svg style="width:400px; height: 400px;" viewBox="-100 -100 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
    <line x1="-200" y1="0" x2="400" y2="0" stroke="lime" stroke-dasharray="5 5"></line>
    <line x1="0" y1="-200" x2="0" y2="400" stroke="lime" stroke-dasharray="5 5"></line>  
    
    <rect x="20" y="20" width="40" height="40" fill="green" transform="translate(-20,-20) scale(2, 2)"></rect>
    <rect x="20" y="20" width="40" height="40" fill="aqua" ></rect>
</svg>

在这种情况下，我translate(-20,-20)用第一个动作将图形返回到原点，正如我所想的那样，当缩放时，图形应该保持在坐标处0,0，但它仍然保持移动，为什么？

<svg style="width:400px; height: 400px;" viewBox="-100 -100 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
    <line x1="-200" y1="0" x2="400" y2="0" stroke="lime" stroke-dasharray="5 5"></line>
    <line x1="0" y1="-200" x2="0" y2="400" stroke="lime" stroke-dasharray="5 5"></line>
    
    <rect x="20" y="20" width="40" height="40" fill="green" transform="translate(-20,-20) scale(2, 2)"></rect>
    <rect x="20" y="20" width="40" height="40" fill="red" transform="scale(2, 2) translate(-20,-20)"></rect>
</svg>

这两个选项有什么区别？我是否正确理解转换是从最后执行的？

如何正确地将形状旋转 45 度并将其相对于其中心的大小加倍？

<rect x="30" y="30" width="40" height="40" fill="blue"></rect>
svg

1 个回答

  1. Best Answer

    我稍微修改了作者的源代码以忽略相对于原点的偏移量，它指定viewBox="-100 -100 400 400"，以便以最纯粹的形式查看命令如何影响scale(2)形状的定位。

    <svg style="width:400px; height: 400px;" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"
 xmlns:x="http://www.w3.org/1999/xlink">
    <line x1="0" y1="0" x2="400" y2="0" stroke="blue" stroke-dasharray="5 5"></line>
    <line x1="0" y1="0" x2="0" y2="400" stroke="blue" stroke-dasharray="5 5"></line>
    
    <rect x="20" y="20" width="40" height="40" fill="aqua" ></rect>
    <rect x="20" y="20" width="40" height="40" fill="green" transform="scale(2, 2)"></rect>
</svg>

    如果矩形的左上角与原点不重合，则在您的情况下，它会 <rect x="20" y="20"水平和垂直移动20px. 那么在应用命令的时候，scale(2)矩形的所有参数都乘以X2 左上角的坐标就变成了40,40px-width等于width="80"，height height="80" 图中是一个绿色方块.

    在此处输入图像描述

    要将放大后的绿色方块恢复到 20x20 像素的原始位置，您需要使用命令translate(-20 -20).
    如果有多个转换命令，则从最后一个执行到第一个 transform="translate(-20 -20) scale(2 2) " 

    <svg width="400px" height="400px" viewBox="0 0 400 400"  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="0" y1="0" x2="400" y2="0" stroke="blue" stroke-dasharray="5 5"></line>
    <line x1="0" y1="0" x2="0" y2="400" stroke="blue" stroke-dasharray="5 5"></line>
  
   <rect x="20" y="20" width="40" height="40" fill="green" transform="translate(-20 -20) scale(2 2) "></rect>
    <rect x="20" y="20" width="40" height="40" fill="aqua" ></rect>
    
</svg>

    围绕点缩放的示例

    假设我们有一个坐标点50,50px，我们将围绕该点缩放矩形，使其增长，而不从该中心混合。对中机制是一样的。考虑从坐标原点到图形中心的距离增加了多少，减去大小以使图形返回其先前位置。 

    <svg width="100%" height="100%" viewBox="0 0 300 300"  xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet">
<!-- центр масштабирования -->
<circle cx="50" cy="50" r="2" style="fill: black;" />
<!-- первоначальный прямоугольник -->
<g id="box" style="stroke: black; fill: none;">
<rect x="35" y="40" width="30" height="20" />
</g>

<use xlink:href="#box" transform="translate(-50,-50) scale(2)" style="stroke-width: 0.5;" />
<use xlink:href="#box" transform="translate(-75,-75) scale(2.5)" style="stroke-width: 0.4;" />
<use xlink:href="#box" transform="translate(-100,-100) scale(3)" style="stroke-width: 0.33;" />

    • 4

相关问题