gpt4 book ai didi

svg - 如何在 html 页面上合并多个 SVG 文件?

转载 作者:行者123 更新时间:2023-12-01 09:34:00 27 4
gpt4 key购买 nike

我一直在尝试将两个 SVG 文件合并为一个 SVG 文件。我发现的所有地方都在使用 pageSet。下面的代码是将两个 SVG 文件合并为一个文件。

<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>

我尝试使用上面的代码,但没有显示任何内容。

最佳答案

您可以将 SVG 文件一个接一个地嵌入到 HTML 文档中。例如,使用内联 SVG 内容:

<html><head>…</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>

...或 referencing an external file :

<html><head>…</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>

然后你可以使用 CSS 到 control the page breaks when printing :

svg, object { page-break-before:always }

关于svg - 如何在 html 页面上合并多个 SVG 文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11684485/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com