Question

所以我有一个内部有多个多边形的svg，我想要完成的是在其中设置一个多边形（用缓动调整大小），这样它就不会从它的位置移动。考虑到多边形位置由points="..."设置（我猜...）。

我希望最好在jQuery或CSS中执行此操作，但是普通的JavaScript也可以使用它或任何其他库..

以下是一个例子：

shapes.svg：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-47 49 404 404" style="enable-background:new -47 49 404 404;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#154E78;}
    .st1{fill:#006496;}
    .st2{fill:#047EBE;}
    .st3{fill:#CD99B2;}
    .st4{fill:#D464A4;}
    .st5{fill:#CC78B1;}
</style>
<polygon id="XMLID_14_" class="st0" points="213.4,177 241.1,129 268.9,177 "/>
<polygon id="XMLID_13_" class="st1" points="240.2,129 212.4,177 184.7,129 "/>
<polygon id="XMLID_15_" class="st2" points="156,177 183.7,129 211.4,177 "/>
<polygon id="XMLID_20_" class="st3" points="98.6,177 126.3,129 154,177 "/>
<polygon id="XMLID_22_" class="st4" points="41.1,177 68.9,129 96.6,177 "/>
<polygon id="XMLID_29_" class="st5" points="125.3,129 97.6,177 69.8,129 "/>
</svg>

预览：
shapes.svg

我想要完成的是：
resized.svg

通过调整svg

中第二个多边形的大小

如果我将其缩放到1.3，我没有足够的声誉向您展示会发生什么，但会发生的是多边形沿着画板移动。

Answer 1

简单的比例变换（例如<polygon id="XMLID_29_" class="st5" points="125.3,129 97.6,177 69.8,129 " transform="scale(1.5)"/>）将缩放远离原点的多边形点。您希望将多边形点缩放到多边形的中心。您可以使用将多边形中心转换为原点，缩放，然后将多边形中心转换回初始位置（例如<polygon id="XMLID_29_" class="st5" points="125.3,129 97.6,177 69.8,129 " transform="translate(97.55,153) scale(1.5) translate(-97.55,-153)"/>）的转换来实现此目的。在这个例子中，我使用多边形的边界矩形的中心作为多边形的中心（即（125.3 + 69.8）/2=97.55,(129 + 177）/ 2 = 153）。

调整多边形维护位置的大小 - jQuery

1 个答案: