【问题标题】:SVG scaled within SVG at specific location(s)SVG 在特定位置的 SVG 内缩放
【发布时间】:2011-09-15 21:09:05
【问题描述】:

我是复杂 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,0 到 273,24

新的 SVG 需要 4" x 6"

例如:在向下 1/4" 的位置,距顶部 1" 的位置,我需要插入 SVG1,即使它是 476x100,也需要将其缩放到大约 1/2" x 3" 的区域宽。

同样, 在向下 2.8"、宽 1.75" 的位置,我需要插入 SVG2,它的大小需要大约 2" 高,2.5" 宽作为最大区域。

可以缩放,但不要歪斜,它们需要保持原始比例而不是剪裁。如果我能得到基本的了解,我可以调整最终的尺寸,只是不知道如何让这个基础设施工作。

谢谢。

【问题讨论】:

    标签: svg scale


    【解决方案1】:

    在玩了很多之后,我终于得到了它,以防万一有人像我一样对 SVG 感兴趣并且相对较新。在问题中,我有一些预先生成的 SVG 输出文件,它们的 X、Y 高度、宽度设置全部基于数值,没有英寸、厘米等上下文,但我的要求是适合给定的 X英寸乘 Y 英寸的范围。

    所以,我发现了“defs”标签,这就像声明一个变量,以后可以在后面的 SVG 正文中用作“把那个东西放在这里”。在 SVG 的顶部,我能够给出我需要的尺寸。然后,通过使用“g”标签进行分组,我能够以数字方式将某些东西定位到给定的 x,y 位置。然后,在其中,我做了另一个“g”来应用在“defs”部分中声明的“变量”的缩放(因为“g”元素中不能有两个“transform”标签)。

    我想出的内容如下所示,希望详细的 cmets 可以帮助其他人研究处理 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>
    

    【讨论】:

    • 幸好你的问题已经解决了下一个问题。 :-) 您能否将您的解决方案标记为已接受的答案?在概述中查看已解决的问题很有用。
    猜你喜欢
    • 2012-05-05
    • 2014-08-02
    • 1970-01-01
    • 2018-05-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-03-13
    • 1970-01-01
    相关资源
    最近更新 更多