如何制作与其位置相关的形状，特别是path更大的形状。有一种叫做scale的东西，但它并没有帮助我，因为它基于x和y，这使得形状更像是与角落有关。我希望从中心放置形状，放置它的位置。
编辑：我没有形状的位置。我有d属性的形状，但我不知道如何阅读中心。
任何帮助都将不胜感激。
答案 0 :(得分：1)
SVG transform属性中的转换命令可以连接 - 它们毕竟只是矩阵。您可以做的是先将translate对象放到坐标系的原点，然后scale，然后再translate。
假设元素的中心位于（20,30），并且您想要按因子2.5缩放。这是从右到左执行的（将其作为矩阵乘法读取）：
transform="translate(20, 30) scale(2.5) translate(-20, -30)"
您也可以自己计算转换矩阵并编写：
transform="matrix(2.5,0,0,2.5,-30,-45)"
这些矩阵的描述是here。
从理论上讲，CSS transforms应该更容易实现。不幸的是，浏览器支持不是应该的。
以下示例适用于Chrome，但不适用于Firefox（请参阅此bug了解有关正确行为的争论），IE或Edge。独立的渲染器也可能会失败（我使用librsvg和Inkscape伪造）。绿鸭应该是黄色鸭子的一半，并且具有相同的中心：
path {
fill: none;
stroke: yellow;
}
#tr {
transform: scale(0.5);
transform-origin: 50% 50%;
transform-box: fill-box;
stroke: green;
}<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250">
<path d="M 80.1339,33.7725 A 5.6922,6.4401 10 0 1 84.6212,41.103 5.6922,6.4401 10 0 1 77.8974,46.4568 5.6922,6.4401 10 0 1 73.4101,39.1262 5.6922,6.4401 10 0 1 80.1339,33.7725 Z M 82.0104,33.2778 A 11.4192,8.81609 89.1419 0 1 89.2916,46.4615 11.4192,8.81609 89.1419 0 1 79.1684,55.7873 11.4192,8.81609 89.1419 0 1 71.8879,42.6048 11.4192,8.81609 89.1419 0 1 82.0104,33.2778 Z M 70.3671,75.3594 C 70.3671,75.3594 68.586,75.6931 67.6718,75.6488 66.3528,75.5858 65.0527,74.9422 63.7318,74.8554 59.5513,74.5845 55.4963,76.5847 51.338,75.751 49.2598,75.3338 46.915,74.5923 45.4932,72.8885 44.8341,72.1001 44.3774,70.8894 44.6455,69.9567 45.3964,67.3505 50.7912,65.0483 50.7912,65.0483 50.7912,65.0483 43.9322,61.4587 41.1061,58.7996 38.902,56.7243 36.8574,54.2568 35.6903,51.4657 34.9382,49.6678 34.0963,47.4509 34.8214,45.7744 38.1361,41.2573 43.6807,43.9856 48.4204,45.1849 50.2853,45.6599 52.1398,46.8724 53.9981,46.6994 56.7267,46.4454 58.9343,44.5042 61.1832,43.0426 63.0639,41.8215 66.407,38.8022 66.407,38.8022 66.407,38.8022 64.6497,42.5145 64.3908,44.5758 64.1223,46.7147 64.4954,48.9637 64.9058,51.1399 65.3999,53.7626 66.3032,56.3275 67.233,58.8573 68.3474,61.8899 70.6024,64.6149 71.1153,67.7638 71.5329,70.3313 70.3671,75.3594 70.3671,75.3594 Z M 92.0698,111.853 C 96.2371,106.866 102.147,102.36 108.753,101.964 118.689,101.368 127.519,112.44 137.557,113.607 146.856,114.686 164.63,109.061 164.63,109.061 164.63,109.061 162.709,125.647 158.397,132.099 153,140.178 144.607,146.556 135.357,149.419 127.645,151.807 118.626,151.276 110.573,148.601 103.65,146.302 96.4513,142.201 92.0379,136.07 89.1835,132.103 87.9619,126.816 88.1408,122.105 88.2839,118.339 89.7715,114.602 92.0698,111.853 Z M 59.2917,139.294 C 61.9445,152.369 70.7633,164.205 81.6223,170.584 100.669,181.776 125.118,181.36 145.114,176.023 160.645,171.877 176.151,163.182 185.972,150.351 176.606,158.799 164.621,164.73 152.614,167.936 132.62,173.272 108.172,173.689 89.1233,162.496 78.2648,156.116 70.8095,151.141 68.1586,138.066 66.9416,125.527 79.8773,92.7348 77.4125,94.0907 74.9457,95.445 56.1332,122.504 59.2917,139.294 Z M 65.8609,39.1294 C 70.807,28.9425 79.9895,21.2775 90.0829,19.1926 112.001,16.8358 127.033,28.7634 131.73,48.0754 133.639,55.9048 132.499,64.4111 129.685,71.5142 127.542,76.9213 118.907,84.7996 118.907,84.7996 L 113.696,88.961 C 113.696,88.961 124.423,86.1023 129.998,86.5796 137.334,87.207 144.159,92.3433 151.484,93.3861 153.944,93.7365 156.655,94.179 158.824,93.1744 162.32,91.5568 164.447,87.8071 166.49,84.4927 168.56,81.135 167.572,75.2572 170.993,73.3938 173.665,71.9378 177.805,72.9562 180.38,75.0348 188.826,81.8552 191.576,94.4359 193.393,105.027 195.625,118.046 196.35,132.764 190.351,143.692 181.279,160.216 163.201,171.195 145.113,176.024 125.117,181.361 100.67,181.776 81.6235,170.584 70.7644,164.204 61.9435,152.369 59.2917,139.294 V 139.294 C 57.7803,120.107 70.3787,106.356 76.2899,91.5133 77.2688,88.9676 78.3913,83.5238 78.3913,83.5238 74.9247,81.427 72.0301,78.643 69.6902,75.4715" />
<path id="tr" d="M 80.1339,33.7725 A 5.6922,6.4401 10 0 1 84.6212,41.103 5.6922,6.4401 10 0 1 77.8974,46.4568 5.6922,6.4401 10 0 1 73.4101,39.1262 5.6922,6.4401 10 0 1 80.1339,33.7725 Z M 82.0104,33.2778 A 11.4192,8.81609 89.1419 0 1 89.2916,46.4615 11.4192,8.81609 89.1419 0 1 79.1684,55.7873 11.4192,8.81609 89.1419 0 1 71.8879,42.6048 11.4192,8.81609 89.1419 0 1 82.0104,33.2778 Z M 70.3671,75.3594 C 70.3671,75.3594 68.586,75.6931 67.6718,75.6488 66.3528,75.5858 65.0527,74.9422 63.7318,74.8554 59.5513,74.5845 55.4963,76.5847 51.338,75.751 49.2598,75.3338 46.915,74.5923 45.4932,72.8885 44.8341,72.1001 44.3774,70.8894 44.6455,69.9567 45.3964,67.3505 50.7912,65.0483 50.7912,65.0483 50.7912,65.0483 43.9322,61.4587 41.1061,58.7996 38.902,56.7243 36.8574,54.2568 35.6903,51.4657 34.9382,49.6678 34.0963,47.4509 34.8214,45.7744 38.1361,41.2573 43.6807,43.9856 48.4204,45.1849 50.2853,45.6599 52.1398,46.8724 53.9981,46.6994 56.7267,46.4454 58.9343,44.5042 61.1832,43.0426 63.0639,41.8215 66.407,38.8022 66.407,38.8022 66.407,38.8022 64.6497,42.5145 64.3908,44.5758 64.1223,46.7147 64.4954,48.9637 64.9058,51.1399 65.3999,53.7626 66.3032,56.3275 67.233,58.8573 68.3474,61.8899 70.6024,64.6149 71.1153,67.7638 71.5329,70.3313 70.3671,75.3594 70.3671,75.3594 Z M 92.0698,111.853 C 96.2371,106.866 102.147,102.36 108.753,101.964 118.689,101.368 127.519,112.44 137.557,113.607 146.856,114.686 164.63,109.061 164.63,109.061 164.63,109.061 162.709,125.647 158.397,132.099 153,140.178 144.607,146.556 135.357,149.419 127.645,151.807 118.626,151.276 110.573,148.601 103.65,146.302 96.4513,142.201 92.0379,136.07 89.1835,132.103 87.9619,126.816 88.1408,122.105 88.2839,118.339 89.7715,114.602 92.0698,111.853 Z M 59.2917,139.294 C 61.9445,152.369 70.7633,164.205 81.6223,170.584 100.669,181.776 125.118,181.36 145.114,176.023 160.645,171.877 176.151,163.182 185.972,150.351 176.606,158.799 164.621,164.73 152.614,167.936 132.62,173.272 108.172,173.689 89.1233,162.496 78.2648,156.116 70.8095,151.141 68.1586,138.066 66.9416,125.527 79.8773,92.7348 77.4125,94.0907 74.9457,95.445 56.1332,122.504 59.2917,139.294 Z M 65.8609,39.1294 C 70.807,28.9425 79.9895,21.2775 90.0829,19.1926 112.001,16.8358 127.033,28.7634 131.73,48.0754 133.639,55.9048 132.499,64.4111 129.685,71.5142 127.542,76.9213 118.907,84.7996 118.907,84.7996 L 113.696,88.961 C 113.696,88.961 124.423,86.1023 129.998,86.5796 137.334,87.207 144.159,92.3433 151.484,93.3861 153.944,93.7365 156.655,94.179 158.824,93.1744 162.32,91.5568 164.447,87.8071 166.49,84.4927 168.56,81.135 167.572,75.2572 170.993,73.3938 173.665,71.9378 177.805,72.9562 180.38,75.0348 188.826,81.8552 191.576,94.4359 193.393,105.027 195.625,118.046 196.35,132.764 190.351,143.692 181.279,160.216 163.201,171.195 145.113,176.024 125.117,181.361 100.67,181.776 81.6235,170.584 70.7644,164.204 61.9435,152.369 59.2917,139.294 V 139.294 C 57.7803,120.107 70.3787,106.356 76.2899,91.5133 77.2688,88.9676 78.3913,83.5238 78.3913,83.5238 74.9247,81.427 72.0301,78.643 69.6902,75.4715" />
</svg>