以編程方式居中svg路徑

我正在研究根據訪問者的屏幕分辨率從SVG文件生成jpg牆紙的PHP腳本。該壁紙由圓形漸變（矩形）背景和頂部的路徑組成。你會如何將這條路徑水平和垂直定位到矩形？請記住，矩形的大小和比例不是一個常數。我應該將背景和路徑分開到不同的svg文件還是有一個簡單的方法來中心路徑？也許是一個框架？以編程方式居中svg路徑

來源

2013-06-03 bodyflex

歡迎來到S.O.此社區旨在幫助您解決特定問題和您嘗試的代碼。你有什麼試圖解決你的問題？ –

這很容易通過使用嵌套的<svg>元素和preserveAspectRatio屬性來實現。把你的背景放在外面的svg和你的內在路徑中。

 <?xml version="1.0" encoding="UTF-8"?> 
 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%"> 
 
    
 
     <rect id="background" width="100%" height="100%" fill="grey"/> 
 

 
     <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%"> 
 
      <g> 
 
      <circle cx="15" cy="20" r="10" fill="yellow"/> 
 
      <circle cx="12" cy="17" r="1.5" fill="black"/> 
 
      <circle cx="18" cy="17" r="1.5" fill="black"/> 
 
      <path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/> 
 
      </g> 
 
     </svg> 
 
    
 
     </svg>

運行這段代碼，並嘗試調整窗口的大小。

爲了達到此目的，您需要確保內部<svg>元素上的viewBox屬性已正確設置。

來源

2013-06-04 15:33:43

如果知道路徑的座標，您可以將x/y座標的總和除以座標的數量，這會給出座標集的平均位置。然後，通過平方的寬度/高度的一半的座標加上任何偏移量，減去座標集的中心與平方的寬度/高度的一半之間的差值來偏移每個座標。

這應該會導致您的座標位於廣場的中心，我認爲（這是相當早，我剛開始第一杯咖啡，所以我可能是錯的）。這當然假設您知道所有變量（方形的寬度/高度，所應用的偏移量和路徑的座標）。

來源

2013-06-03 06:49:15 Seidr

邊界框svgElement.getBBox（）可能會有所幫助。

來源

2013-06-03 19:02:50 joeytwiddle

以編程方式居中svg路徑

回答

相關問題