在特定位置的SVG中縮放SVG

Question

我是新來的複雜SVG和工作的東西，需要幫助。我有幾個SVG文件已經正確格式化爲內容..線條，矩形，文本等等。它們用簡單的X =，Y =，X1 =，Y1 =繪製，並且基於整數。原始的SVG是爲打印而設計的，並且x/y位置是基於300dpi的打印設置的。

所以這存在與來自其他來源的幾個SVG，我試圖合併成一個新的單個SVG文檔。所以，這些元素之一，我需要把位置（x，y）放在基於英寸或釐米（從我目前閱讀的內容）的位置，但我也需要他們尊重......的特定大小2高，3.4英寸寬。

由於原始的SVG是基於整數並且沒有「英寸」的方向，我該怎麼做......或者它如何自我縮放。

沒有適當的SVG語法，這裏是基本的一些細節。

SVG1具有0,0至476100 SVG2整體的x/y的矩形區域具有0,0至273,24

新SVG整體的x/y的矩形區域需要是4" ，由6「

例如：在位置1/4」向下，距離頂部1「處，我需要插入SVG1，即使它是476x100，它也需要縮放到高度約1/2」的區域x 3「寬。

同樣地，在位置2.8「向下，1.75」處，我需要插入SVG2，其大小需要大約2英寸高，最大面積爲2.5英寸寬。

按比例縮小是的，但不會被歪斜，他們需要保持原來的比例，而不是裁剪。如果我能得到基本的理解，我可以調整最後的維度，只是不知道如何獲得這個工作的基礎設施。

謝謝。

Answer 1

我在玩過很多遊戲之後終於找到了它，以防萬一任何人對SVG感興趣並且對我而言相對較新。正如在問題中，我有一些預先生成的SVG輸出文件，它們的X，Y高度，寬度設置都基於數字值，沒有上下文，英寸，釐米等，但我的要求是適合給定的X英寸乘以Y英寸的範圍。因此，我發現了有關「defs」的標籤，就像聲明一個變量，稍後可以在稍後的SVG主體中用作「將這件事放在這裏」一樣。在SVG的頂部，我能夠提供我需要的尺寸。然後，通過使用「g」標籤進行分組，我可以在數字上將某物放置到給定的x，y位置。然後，在那裏，我做了另一個「g」來應用「defs」部分中聲明的「變量」的縮放比例（因爲「g」元素中不能有兩個「變換」標籤）。

我想到的是如下所示，並希望詳細的評論可以幫助其他人處理SVG的研究。

<?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 

    <!-- Explicitly define the SVG window area as 4 inches by 6 inches --> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="4in" height="6in" > 

    <!-- Add some styles, fonts etc for line drawing, labels and data --> 
    <style type="text/css" > 
     <![CDATA[ 

      line.Black 
      { stroke:RGB(0,0,0); 
       stroke-width:2; 
      } 

      text.Hdr 
      { 
       font-family: Arial; 
       font-size:x-small; 
       stroke: #000000; 
       stroke-width:.4; 
      } 

      text.Data 
      { 
       font-family: Courier New; 
       font-size:normal; 
       stroke: #000000; 
       stroke-width:.5; 
      } 
     ]]> 
    </style> 


    <!-- all these "defs" are zero-based position for their own content 
     and will be speicifcally placed where needed via "g" tags. 
     The simple "id" name will be used as an "insert <something> here" --> 
    <defs> 
     <!-- Below will come from actual data from system 
      The "ID" is what becomes the "variable" that is later 
      used later in the SVG as the "put me here" --> 
     <g id="DataOneElement" > 
      <text class="Data">SOME TEXT DATA</text> 
     </g> 

     <!-- This partial linear barcode generated somewhere else 
      Notice these are just integer positions, and nothing 
      to do with specific "inches" measurements. Also, they 
      start at position 0,0 and go however large they need. 
      When applied with the "g" positioning, thats where it 
      starts, then gets scaled from there if needed bigger/smaller --> 
     <g id="DataPartialBarCode" > 
      <rect x="0" y="0" width="1" height="50" /> 
      <rect x="4" y="0" width="1" height="50" /> 
      <rect x="6" y="0" width="3" height="50" /> 
      <rect x="10" y="0" width="3" height="50" /> 
      <rect x="14" y="0" width="1" height="50" /> 
      <rect x="16" y="0" width="3" height="50" /> 
      <rect x="20" y="0" width="3" height="50" /> 
      <rect x="24" y="0" width="1" height="50" /> 
      <rect x="26" y="0" width="1" height="50" /> 
      <rect x="30" y="0" width="1" height="50" /> 
      <rect x="32" y="0" width="1" height="50" /> 
      <rect x="34" y="0" width="1" height="50" /> 
      <rect x="38" y="0" width="3" height="50" /> 
     </g> 

     <!-- Actual data generated from AMS to populate these too. 
      Notice here too, the entire address starts as position 0,0 --> 
     <g id="SampleAddress" > 
      <text class="Data" x="0" y="0">Some Person's Name</text> 
      <text class="Data" x="0" y="17">First Address Line</text> 
      <text class="Data" x="0" y="30">Another Address</text> 
      <text class="Data" x="0" y="43">3rd Address line</text> 
      <text class="Data" x="0" y="56">And Testing for longer address content</text> 
     </g> 

     <!-- another bar code that will generated --> 
     <g id="AnotherBarCode" > 
      <rect x="0" y="0" width="1" height="70" /> 
      <rect x="4" y="0" width="1" height="70" /> 
      <rect x="6" y="0" width="3" height="70" /> 
      <rect x="10" y="0" width="3" height="70" /> 
      <rect x="14" y="0" width="1" height="70" /> 
      <rect x="16" y="0" width="3" height="70" /> 
      <rect x="20" y="0" width="1" height="70" /> 
      <rect x="24" y="0" width="1" height="70" /> 
      <rect x="26" y="0" width="1" height="70" /> 
      <rect x="28" y="0" width="3" height="70" /> 
      <rect x="32" y="0" width="1" height="70" /> 
      <rect x="36" y="0" width="1" height="70" /> 
      <rect x="38" y="0" width="3" height="70" /> 
      <rect x="42" y="0" width="3" height="70" /> 
      <rect x="46" y="0" width="1" height="70" /> 
     </g> 
    </defs> 

    <!-- Now, starting the drawing of the SVG... 
     Border around entire box drawing area 
     Notice these are in specific INCH dimensions... --> 
    <line class="Black" x1="0in" y1="0in" x2="4in" y2="0in" /> 
    <line class="Black" x1="0in" y1="0in" x2="0in" y2="6in" /> 
    <line class="Black" x1="4in" y1="0in" x2="4in" y2="6in" /> 
    <line class="Black" x1="0in" y1="6in" x2="4in" y2="6in" /> 


    <!-- Translate is Across then Down from the top/left corner of SVG --> 
    <!-- Translate is NOT based on inch, cm, or other measurements 
     so you may have to tweak these numbers --> 
    <g transform="translate(100 20) "> 
     <!-- Now, take whatever we are providing and scale it within the area. 
      In this case, scale the ENTIRE "g" object to 1.5 its original size --> 
     <g transform="scale(1.75)"> 
      <!-- This is where the "defs" variable declaration comes 
       in, as looking at the "g" tag by the ID name --> 
      <use xlink:href="#DataOneElement" /> 
     </g> 
    </g> 

    <!-- and now the partial barcode "defs" variable --> 
    <g transform="translate(20 23) "> 
     <!-- In this case, scale the width by 115% and the height by 95% --> 
     <g transform="scale(1.15 .95)"> 
      <use xlink:href="#DataPartialBarCode" /> 
     </g> 
    </g> 


    <!-- Any other specific lines within the area --> 
    <line class="Black" x1="0in" y1=".8in" x2="4in" y2=".8in" /> 

    <!-- Now, just insert the "defs" from above at a scale that will still be readable. 
     Cool thing, the entire address is considered a single element here. --> 
    <g transform="translate(20 97)"> 
     <g transform="scale(.7)"> 
      <use xlink:href="#SampleAddress" /> 
     </g> 
    </g> 


    <!-- We can even show the address AGAIN, scaled differently elsewhere. --> 
    <g transform="translate(2 250)"> 
     <g transform="scale(1.3)"> 
      <use xlink:href="#SampleAddress" /> 
     </g> 
    </g> 

    <!-- Another line and then barcode--> 
    <line class="Black" x1="0in" y1="1.55in" x2="4in" y2="1.55in" /> 

    <g transform="translate(175 175) "> 
     <!-- Scale this barcode 100% wide, but only 70% height --> 
     <g transform="scale(1 .7)"> 
      <use xlink:href="#AnotherBarCode" /> 
     </g> 
    </g> 
</svg>