來自他中心的SVG秤組

Question

我正在嘗試從組中心按1.4因子#RectangleScaled名為#RectangleScaled的<g></g> 。 我正在使用這個公式

translate(-centerX*(factor-1), -centerY*(factor-1)) scale(factor)

但是紅色矩形似乎翻譯不正確

這是我的實現

var rectangle = document.querySelector("#Rectangle")
var rectangleScaled = document.querySelector("#RectangleScaled")

var canvasBbox = document.querySelector("#Canvas").getBBox()

var x = -canvasBbox.width/2*(1.4-1)
var y = -canvasBbox.height/2*(1.4-1)

rectangleScaled.style.transform = "translate("+x+"px, "+y+"px) scale(1.4)"

SVG

<svg width="411" height="731" viewBox="0 0 411 731" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Canvas" transform="translate(721 384)">
    <clipPath id="clip-0" clip-rule="evenodd">
      <path d="M -721 -384L -310 -384L -310 347L -721 347L -721 -384Z" fill="#FFFFFF"/>
    </clipPath>
    <g id="Google Pixel" clip-path="url(#clip-0)">
      <path d="M -721 -384L -310 -384L -310 347L -721 347L -721 -384Z" fill="#FFFFFF"/>

      <g id="RectangleScaled">
        <use xlink:href="#path1_fill" transform="translate(-614 -152)" fill="red"/>
      </g>
      <g id="Rectangle">
        <use xlink:href="#path0_fill" transform="translate(-614 -152)" fill="#C4C4C4"/>
      </g>
    </g>
  </g>
  <defs>
    <path id="path0_fill" d="M 0 0L 196 0L 196 266L 0 266L 0 0Z"/>
    <path id="path1_fill" d="M 0 0L 196 0L 196 266L 0 266L 0 0Z"/>
  </defs>
</svg>

這是小提琴

Answer 1

您似乎把自己的中心弄錯了。 您正在圍繞錯誤的中心點縮放。

您將canvasBBox width和height除以2，但是沒有考慮bbox的x和y值。

#Canvas元素的中心在

var cx = canvasBbox.x + canvasBbox.width/2;
var cy = canvasBbox.y + canvasBbox.height/2;

如果使用這些值更新計算，則會得到預期的結果。

 var rectangle = document.querySelector("#Rectangle") var rectangleScaled = document.querySelector("#RectangleScaled") var canvasBbox = document.querySelector("#Canvas").getBBox() var cx = canvasBbox.x + canvasBbox.width/2; var cy = canvasBbox.y + canvasBbox.height/2; var x = -cx * (1.4 - 1) var y = -cy * (1.4 - 1) rectangleScaled.style.transform = "translate("+x+"px, "+y+"px) scale(1.4)" 

 <svg width="411" height="731" viewBox="0 0 411 731" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Canvas" transform="translate(721 384)"> <clipPath id="clip-0" clip-rule="evenodd"> <path d="M -721 -384L -310 -384L -310 347L -721 347L -721 -384Z" fill="#FFFFFF"/> </clipPath> <g id="Google Pixel" clip-path="url(#clip-0)"> <path d="M -721 -384L -310 -384L -310 347L -721 347L -721 -384Z" fill="#FFFFFF"/> <g id="RectangleScaled"> <use xlink:href="#path1_fill" transform="translate(-614 -152)" fill="red"/> </g> <g id="Rectangle"> <use xlink:href="#path0_fill" transform="translate(-614 -152)" fill="#C4C4C4"/> </g> </g> </g> <defs> <path id="path0_fill" d="M 0 0L 196 0L 196 266L 0 266L 0 0Z"/> <path id="path1_fill" d="M 0 0L 196 0L 196 266L 0 266L 0 0Z"/> </defs> </svg> 

Answer 2

僅適用於Chrome （將其視為錯誤）：要縮放並保持縮放后的元素在中心位置，您可以使用純CSS通過添加transform-origin: center; 樣式為#RectangleScaled選擇器。

 var rectangle = document.querySelector("#Rectangle") var rectangleScaled = document.querySelector("#RectangleScaled") var canvasBbox = document.querySelector("#Canvas").getBBox() rectangleScaled.style.transform = "scale(1.4)" 

 svg { border:solid; } #RectangleScaled { transform-origin: center; } 

 <svg width="411" height="731" viewBox="0 0 411 731" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Canvas" transform="translate(721 384)"> <clipPath id="clip-0" clip-rule="evenodd"> <path d="M -721 -384L -310 -384L -310 347L -721 347L -721 -384Z" fill="#FFFFFF"/> </clipPath> <g id="Google Pixel" clip-path="url(#clip-0)"> <path d="M -721 -384L -310 -384L -310 347L -721 347L -721 -384Z" fill="#FFFFFF"/> <g id="RectangleScaled"> <use xlink:href="#path1_fill" transform="translate(-614 -152)" fill="red"/> </g> <g id="Rectangle"> <use xlink:href="#path0_fill" transform="translate(-614 -152)" fill="#C4C4C4"/> </g> </g> </g> <defs> <path id="path0_fill" d="M 0 0L 196 0L 196 266L 0 266L 0 0Z"/> <path id="path1_fill" d="M 0 0L 196 0L 196 266L 0 266L 0 0Z"/> </defs> </svg>