Question

鉴于此SVG片段：

<g class="serp" transform="translate(29.000000, 194.000000)">
    <g class="search-results-container" transform="translate(192.000000, 12.000000)">
      <g class="result" transform="translate(0.000000, 220.000000)">
        <rect class="line" fill="#F0F0F0" x="0.621052632" y="73" width="346.378947" height="8" rx="4"></rect>
        <rect class="line" fill="#F0F0F0" x="0.621052632" y="60" width="416.684211" height="8" rx="4"></rect>
        <rect class="line" fill-opacity="0.118829257" fill="#15A085" x="0.621052632" y="31" width="78.3789474" height="8" rx="4"></rect>
        <rect class="line" fill="#8D8D8D" x="0.621052632" y="13" width="181.378947" height="8" rx="4"></rect>
        <rect class="line" fill="#8D8D8D" x="0.621052632" y="0" width="224.378947" height="8" rx="4"></rect>
      </g>
   </g>
</g>

如何将<g>上的变换属性替换为实际坐标？我一直在尝试使用CSS变换为元素设置动画，但我不想在CSS中定义绝对变换坐标，而是相对于原始位置移动元素。

用SVG中的绝对定位替换变换

0 个答案: