如何在另一個SVG文件中居中並縮放SVG文件

我正在開發一個程序，可以根據用戶的選擇生成svg文件。其中一個選擇是在第一個特定點上包含另一個svg文件。第二個文件具有未知的寬高比和大小，但它應該按比例縮放到特定的最大大小，不管是作爲高度還是寬度，並且應該集中在一個特定點上。我現在使用的方法是使用包含所包含圖像的SVG標籤的G標籤，並對G標籤執行轉換以進行縮放和平移。有沒有什麼辦法可以在不知道圖像大小的情況下執行縮放以獲取特定尺寸？有什麼辦法讓翻譯的座標適用於圖像的中心而不是左上角？我對SVG很新，所以可能是我以錯誤的方式去解決這個問題。有沒有更好的方法來獲得相同的結果？如何在另一個SVG文件中居中並縮放SVG文件

來源

2009-09-23 Niko

這是一個恥辱有沒有答案這個問題，可能是它應該是更具體的或者重新標記？ – Parsa 2010-01-31 18:21:13

我想你想先有其他SVG文件隱藏，呼叫.getBBox()在JavaScript 做一些簡單的計算，設置相應的參數，取消隱藏

來源

2010-08-15 13:15:22 stelt

我明白你的意思，或者至少我認爲。在我的腦海裏沒有更好的想法來做到這一點，而不是分組。對我而言，<g>是使用SVG文檔的一個片段進行操作的最佳方式。但在我看來，將<rect>元素視爲您的視覺數據的容器。也許那麼<g>就沒有必要，取決於你的編碼要求。

如果你需要把只有簡單的SVG圖像，你可以不喜歡它：

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/>

如果你表達「寬度」和固定單位「高度」（如像素），你會達到什麼我」我認爲你需要。如果你需要的話，還有「preserveAspectRatio」來看看這個屬性。

來源

2012-01-02 09:43:54 Alex

編輯：這個答案stil要求你知道內部SVG的大小。最分開的方法是在瀏覽器端使用getBBox()方法，可能使用visibility或display來防止用戶看到未縮放的圖形。 jsFiddle example已更新爲使用此方法。

對於縮放，請使用viewBox attribute。從W3C的文檔：

通常需要指定給定的一組圖形拉伸以適應特定的容器元素。 'viewBox'屬性提供了這個功能。

所有建立新視口（參見elements that establish viewports）的元素都具有屬性'viewBox'。 'viewBox'屬性的值是一個包含四個數字的列表<min-x>,<min-y>,0 <width>和<height>，...，它們在用戶空間中指定一個矩形，該矩形應映射到由給定元素建立的視口的邊界，帳戶attribute ‘preserveAspectRatio’。

Example ViewBox說明了在最外面的svg元素上使用'viewBox'屬性來指定SVG內容應該伸展以適應視口邊界。

上面的示例將preserveAspectRadio指定爲none，因此嵌入式SVG會精確地適應容器SVG。默認值preserveAspectRadio，即xMidYMid meet，應該符合您的需求。該屬性允許您對how to scale and position the enclosed graphics進行細化控制。

將內部SVG縮放到已知大小（viewBox）後，居中應該是一個簡單的計算問題，並正確使用transform屬性。這裏距離http://jsfiddle.net/ento/hPuBY/剝離下來的例子：

<g transform="translate(125, 125)"> 
    <!-- inner SVG is scaled to fit 150x150 --> 
    <svg width="150" height="150" viewBox="0 0 1500 1000"> 
    <!-- coordinate system inside the SVG is 0x0 <> 1500x1000 --> 
    <rect width="1500" height="1000" /> 
    <text x="750" y="550" font-size="150"> 
     Embedded SVG 
    </text> 
    </svg> 
</g>

來源

2012-04-02 16:29:44 ento

如何在另一個SVG文件中居中並縮放SVG文件

回答

相關問題