如何在85×85mm SVG中为带scale与90°rotate的<g>设置居中transform

问题根源 #

SVG的transform属性内的变换函数执行顺序为从右到左，你原有写法的执行逻辑不符合旋转后居中的要求：
原有代码：
scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)
实际执行顺序为：先平移、再绕未缩放的坐标点旋转、最后缩放，旋转中心和图形自身中心不匹配，导致偏移。

修正方案 #

调整变换顺序，按照「移动到画布中心→旋转→缩放→对齐图形自身中心」的顺序编写transform属性，你提供的path自身中心点经测算约为(130, 158)，直接替换元素的transform属性即可：

transform="translate(42.5 42.5) rotate(90) scale(0.25) translate(-130 -158)"

如果后续替换其他图形，只需要把translate(-130 -158)里的数值替换成对应图形自身的中心点负坐标即可通用。

完整修正代码示例 #

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="85mm"
   height="85mm"
   viewBox="0 0 85 85">
  <style type="text/css">
    svg {
        border: 1px solid red;
        position: absolute;
        top: 10px;
        left: 10px;
        overflow: hidden;
    }
  </style>
  <!-- TRANSFORMATION HERE-->
  <g class="svg-merge-item-wrapper" transform="translate(42.5 42.5) rotate(90) scale(0.25) translate(-130 -158)">
  <!-- TRANSFORMATION HERE-->
  
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-width:0.375;stroke-miterlimit:3.9892;}
</style>
<path id="path6" class="st0" d="M119.2,35.9c0,0,11.2,0,15,7.4c3.8,7.4,4.2,17.8,4.5,19.2c0.3,1.4,0.3,6.3,6,10.8
    c5.6,4.5,6.3,18.5,6.3,18.5s1.4,0,1.4,1.7v5.2c0,0.6-0.4,1-1,1c0,0,0,18.5-0.4,28.7c-0.4,10.1-4.2,43-6,50
    c-1.8,7-10.5,31.9-10.5,31.9h-29.7c0,0-9.4-21.7-11.9-36.4s-5.3-24.8-5.6-39.5c-0.3-14.7,0-34.6,0-34.6s-2.1,0.3-2.1-1.4v-5.6
    c0-0.8,0.6-1.4,1.3-1.4c0,0,0,0,0.1,0c0,0,0-12.6,4.5-16.8c4.5-4.2,6-8,6.3-9.4c0.3-1.4,0.7-7.7,0.7-7.7c1.6-2.2,2.7-4.7,3.1-7.3
    c0.7-4.2,1.1-5.6,1.1-5.6s2.8-6,5.9-7c1.7-0.6,3.5-1,5.3-1.4C115.4,36.1,117.3,35.9,119.2,35.9z"/>
</g> </svg>

内容的提问来源于stack exchange，提问作者user1231561