5

I have been trying to merge two SVG files into single SVG file. Everywhere I found is using pageSet. Below code is to merge two SVG file to a single file.

<pageSet>
    <page>
        <circle cx="300" cy="150" r="90" fill="red" stroke="black"
                stroke-width="4" fill-opacity="0.7" />
    </page>
    <page>
        <circle cx="240" cy="250" r="90" fill="green" stroke="black"
                stroke-width="4" fill-opacity="0.7" />
    </page>
    <page>
        <circle cx="360" cy="250" r="90" fill="blue" stroke="black"
                stroke-width="4" fill-opacity="0.7" />
    </page>
</pageSet>

I tried using the above code but, nothing is displaying.

4

1 回答 1

10

You can embed SVG files in an HTML document, one after another. For example, with either the SVG content inline:

<html><head>…&lt;/head><body>
  <svg xmlns="http://www.w3.org/2000/svg"><!-- SVG Data --></svg>
  <svg xmlns="http://www.w3.org/2000/svg"><!-- SVG Data --></svg>
  <svg xmlns="http://www.w3.org/2000/svg"><!-- SVG Data --></svg>
  <svg xmlns="http://www.w3.org/2000/svg"><!-- SVG Data --></svg>
</body></html>

…or referencing an external file:

<html><head>…&lt;/head><body>
  <object type="image/svg+xml" data="file1.svg"></object>
  <object type="image/svg+xml" data="file2.svg"></object>
  <object type="image/svg+xml" data="file3.svg"></object>
  <object type="image/svg+xml" data="file4.svg"></object>
</body></html>

You can then use CSS to control the page breaks when printing:

svg, object { page-break-before:always }
于 2012-07-28T15:01:12.687 回答