在特定位置的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>