我是复杂SVG的新手，正在开展工作并需要帮助。我有几个已经使用内容正确格式化的SVG文件..线条，矩形，文本等。它们用简单的X =，Y =，X1 =，Y1 =绘制，并且仅基于整数。原始SVG设计用于打印，x / y位置基于300dpi的打印设置。
所以这存在一些来自其他来源的SVG，我正在尝试合并到一个新的单个SVG文档中。所以，其中一个元素，我需要根据英寸或厘米（从我到目前为止所阅读的内容）放置在位置（x，y），但我还需要它们来尊重特定大小...说2英寸高，3.4英寸宽。
由于原始SVG仅基于整数而没有“英寸”方向，我该怎么做..或者，它如何自我缩放。
如果没有正确的SVG语法，这里基本上是一些细节。
SVG1的整体x / y矩形区域为0,0到476,100 SVG2的整体x / y矩形区域为0到273,24
新SVG需要4“乘6”
Ex：从位置1/4“向下，距离顶部1”，我需要插入SVG1，即使它是476x100，也需要缩放到1/2“高x 3”的区域宽。
类似地， 在位置2.8“向下，1.75”对面，我需要插入SVG2，其大小需要大约2“高，2.5”宽作为最大区域。
缩放是，但不要歪斜，他们需要保持原始比例而不是剪裁。如果我能够获得基本的理解，我可以调整最终的维度，只是不知道如何使这个工作的基础设施。
感谢。
答案 0 :(得分：1)
我终于在玩了很多游戏之后得到了它，以防万一我对SVG感兴趣和相对较新。在问题中，我有一些预先生成的SVG输出文件，它们的X，Y高度，宽度设置都基于数值，没有上下文，英寸，厘米等，但我的要求是适合给定的X英寸乘Y英寸范围。
所以，我发现了“defs”标签，就像声明一个变量，后来可以在后来的SVG体内用作“把这件事放在这里”。在SVG的顶部，我能够提供我需要的尺寸。然后，通过使用“g”标签进行分组，我能够将某些东西数字定位到给定的x，y位置。然后，在其中，我做了另一个“g”来应用“defs”部分中声明的“变量”的缩放（因为“g”元素不能在其中包含两个“transform”标记）。
我想出的是下面的内容，希望详细的评论可以帮助其他人处理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>