从一个svg文件创建多页pdf

Question

Is there a way to create a multi-page pdf from just one svg file? I am currently loading an svg file that I have broken up into two panels. I then hide one panel so the user can only see one. Then by means of tabs listed as Panel 1 and Panel 2 which the user can click to see one panel at a time with css display. The user is able to add text to the panels. The user then can print to a pdf. The svg is sent via form data to a script that calls some java classes such as Batik to create the pdf. All the above works fine except creating a multi-page pdf. I am not sure how to accomplish this. I am very new to this.

SVG File:

<svg id="svgroot" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" viewBox="0 0 1638 1029.6" baseProfile="full" xmlns:space="preserve">    
<svg id="panel_1" width="1600" height="1024" overflow="visible">
    <g id="menupanel_1" style="display:inline">                 

        <image enable-background="new" width="1600" height="1024" xlink:href="images/Panel1.jpg" transform="matrix(1.0239 0 0 1.0021 -4.882813e-004 0)"></image>

        <a xlink:href="#" id="sec_" class="a-map" alt="Salads &amp; Soups"><rect x="8" y="259" fill-opacity="0" width="305.001" height="348"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Desserts"><rect x="333" y="486" fill-opacity="0" width="297" height="169"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Sandwiches"><rect x="6" y="673" fill-opacity="0" width="306.001" height="247"/></a>              
        <a xlink:href="#" id="imgsec_1" class="a-map" alt="Menu Panel Images">
            <rect  x="333.667" y="202.333" fill-opacity="0" width="294.911" height="273.911"/>
            <image id="image_1" enable-background="new" style="display:none" width="285" height="262" xlink:href="images/image1.png" transform="matrix(1.0057 0 0 1.0082 337.4297 207.7466)"></image>                               
            <image id="image_2" enable-background="new" style="display:none" width="285" height="262" xlink:href="images/image2.png" transform="matrix(1.0057 0 0 1.0082 337.4297 207.7466)"></image>
        </a>
        <g>
            <g><rect x="271.244" y="299.911" fill="#FFFFFF" width="34" height="12"/></g>
            <text id="price1" transform="matrix(0.9964 0 0 1 274 309.5898)" fill="#231F20" font-family="TradeGothicLTStd-Light" font-size="11">00.00</text>
        </g>
        <g>
            <g><rect x="271.244" y="343.244" fill="#FFFFFF" width="34" height="12"/></g>
            <text id="price2" transform="matrix(0.9964 0 0 1 274 352.9233)" fill="#231F20" font-family="TradeGothicLTStd-Light" font-size="11">00.00</text>
        </g>
        <g>
            <g><rect x="270.91" y="410.577" fill="#FFFFFF" width="34" height="12"/></g>
            <text id="price3" transform="matrix(0.9964 0 0 1 274 420.2563)" fill="#231F20" font-family="TradeGothicLTStd-Light" font-size="11">00.00</text>
        </g>
    </g>
</svg>

<svg id="panel_2" width="1638" height="1029.6" overflow="visible">
    <g id="menupanel_2" style="display:none">

        <image enable-background="new" width="1638" height="988" xlink:href="images/Panel2.jpg" transform="matrix(1 0 0 1.0421 0 0.002)"></image>

        <a xlink:href="#" id="sec_" class="a-map" alt="White Wine"><rect x="27" y="404" fill-opacity="0" width="302" height="246"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Red Wine"><rect x="28" y="658" fill-opacity="0" width="300" height="342"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Appetizers"><rect x="661" y="419" fill-opacity="0" width="312" height="563"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Burgers"><rect x="986" y="718" fill-opacity="0" width="628" height="253"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Mains"><rect x="985.5" y="17.3" fill-opacity="0" width="627" height="693"/></a>
        <a xlink:href="#" id="sec_" class="a-map" alt="Beers"><rect x="27.5" y="19.3" fill-opacity="0" width="303" height="343"/></a>
    </g>            
</svg>

Script:

<cfscript>
svgformdata = form.data;
fname = form.filename;

transcoder = createObject("java", "org.apache.fop.svg.PDFTranscoder").init();

// load text into a reader and create the source input
svgText = '#svgformdata#';

reader = createObject("java", "java.io.StringReader").init(svgText);
input = createObject("java", "org.apache.batik.transcoder.TranscoderInput").init(reader);

// create a unique file name
outPath = ExpandPath("./pdf/" & fname);

fos = createObject("java", "java.io.FileOutputStream").init(outPath); 
output = createObject("java", "org.apache.batik.transcoder.TranscoderOutput").init(fos);

transcoder.transcode(input, output);

fos.close();
</cfscript>

Answer 1

I recall a proposal for multipage SVG getting dropped from version SVG 1.2 and I don't think SVG 2.0 will have it either.

However, you can use XPath or some other method to use the SVG you have to create two SVG files where each contains just one panel. Then create your multipage PDF.