组合多个 SVG答案

【问题标题】：Combine multiple SVG组合多个 SVG
【发布时间】：2013-04-22 11:59:26
【问题描述】：

我想将多个 SVG 合并为一个。我目前的解决方案是这样的：

<svg>
    <svg>...</svg>
    <svg>...</svg>
    <svg>...</svg>
</svg>

这非常方便，因为我可以为每个元素单独使用 viewBox、size 等。但是当我尝试使用 Inkscape 编辑该文件时，元素似乎会以一种奇怪的方式跳跃并改变它们的大小。

我想过将每个 svg 转换为一个组元素，但我不知道如何，因为我必须手动应用 viewBox、大小和位置（相对于父级）。

有人对此有什么建议吗？

以下是此类文件的示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1680" height="966">
    <svg  contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="965194" version="1.1" width="325" preserveAspectRatio="xMidYMid meet" viewBox="426 337 1031 992" height="312" x="666" y="179">
        <rect x="426" stroke-linecap="round" y="337" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" width="1031" id="52872" height="992" stroke="#000000" stroke-width="10"/>
    </svg>
    <svg  contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="346790" version="1.1" width="150" preserveAspectRatio="xMidYMid meet" viewBox="28 58 445 470" height="159" x="760" y="257">
        <ellipse stroke-linecap="round" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" rx="212.5" cx="250.5" ry="225.0" id="89340" cy="293.0" stroke="#000000" stroke-width="10"/>
    </svg>
    <svg  contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" id="342294" version="1.1" width="780" preserveAspectRatio="xMidYMid meet" viewBox="115 363 1665 1461" height="684" x="413" y="2">
        <rect x="115" stroke-linecap="round" y="363" transform="matrix(1.0,0.0,0.0,1.0,0.0,0.0)" fill="none" width="1665" id="74016" height="1461" stroke="#000000" stroke-width="10"/>
    </svg>
</svg>

【问题讨论】：

我不确定嵌套的 SVG 是不是这里的罪魁祸首，尝试删除矩阵变换，看看它们是否在 Inkscape 中不断跳跃。

标签： svg inkscape

【解决方案1】：

对于多个 SVG，最简单的方法是将其嵌入为并对这个元素执行转换。所有浏览器都更容易重现准确的图形并进行编辑。

替代方法是将 transform="translate(x,y) rotate(zz)"。

【讨论】：

感谢您的回答。我设法使用组标记而不是 svg 标记，并按照您的建议将转换应用于组。我曾使用 viewBox 进行剪辑。现在我正在为此使用剪辑路径。所以现在一切正常，再次感谢！