Javascript svg精灵：符号转换为单个svg图标

我有一个svg精灵，如下所示：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="width:0;height:0;visibility:hidden;">
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </symbol>
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </symbol>
    <symbol viewBox="0 0 500 500" id="test-icon"><title>test</title><ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </symbol>
</svg>

测试
测试
测试

现在我的问题是：我可以仅仅通过提取符号，然后用svg标记替换符号标记，将符号制作成svg吗？或者如何实现到单独svg的转换

我想到了一个小脚本，它可以从如上所述的svg精灵中注入几个svg图标，因此图标可以更好地/单独地通过css进行样式设置

这里的问题是，在精灵中有一些符号（据我所知）只能与

一起使用。但是图标不能像内联svg那样单独设置样式（因为它是一个克隆）

编辑： 我发现了一个开放的标志性svgIncetor，它使用一个imgsrc和单个svg注入html。 还要提到的是，我读过Chris Coyier的以下文章：

基本上，我想结合这里使用的技术来创建一个图标系统，它可以有基于css和图标精灵的多色图标（通过js注入内嵌svg）。

---

open iconic injector只能注入单SVG，不能从sprites afaik注入。

您无需进行太多更改（请参阅）：

• 从

  SVG

  元素中删除视图框
• 调整

  SVG

  元素的样式，使其可见并指定适当的大小（取自符号的视图框）
• 将

  符号

  标记转换为

  g

  标记

如果您另外删除类属性、id属性和标题，那么您可能是安全的

<svg xmlns="http://www.w3.org/2000/svg" style="width:500px; height:500px;">
    <g viewBox="0 0 500 500" id="test-icon">
        <title>test</title>
        <ellipse class="background" id="test-background" fill="#fff" cx="248.8" cy="251.4" rx="246.2" ry="244.8"/>
        <path class="test-frame" d="M249.4 18C121.1 18 16.8 122.3 16.8 250.6S121.3 483 249.4 483 482 378.8 482 250.5 377.7 18 249.4 18m0 480.8c-66 0-128.3-26.4-176.2-73.1C27.6 378.9 1.3 316.5 1.3 249.3s26.3-128.2 73.1-175 109.1-73.1 175-73.1 128.3 26.4 176.2 73.1c46.7 46.8 73.1 109.2 73.1 176.2s-26.4 128.3-73.1 176.2c-46.7 45.6-109 72.1-176.2 72.1"/>
        <path class="test-figure" d="M133.8 103.5v293h232.5V148.9l-22-22-23.4-23.4H133.8zm17.9 22h108.7v12.4H151.7v-12.4zm0 24.8h108.7v12.4H151.7v-12.4zm192.5 211.8H151.7v-24.7h191.2v24.7h1.3zm0-41.2H151.7v-24.7h191.2v24.7h1.3zm0-42.7H151.7v-24.7h191.2v24.7h1.3zm0-44H151.7v-23.4h191.2v23.4h1.3z"/>
    </g>
</svg>

测试

我使用了Codo的答案，但在我的案例中它并没有完全起作用。我遇到了一个适用于SVG的解决方案：（这是

我使用Nodejs和SVG解析器创建了一个小脚本，用于拆分SVG图标精灵文件：


...

const fs=require（'fs'）；
const{parse}=require（'svg-parser'）；
//从sprite文件读取
fs.readFile（'file.svg'，'utf8'，函数（err，contents）{
控制台日志（err）；
const parsed=解析（内容）；
常量符号=已分析。子项[0]。子项[0]。子项；
symbols.forEach（symbol=>{
让路径=“”；
const name=symbol.properties.id；
symbol.children.forEach（路径=>{
路径=路径+``
});
//构建SVG内容
常数newIcon=`
${paths}
`
//白色文件
fs.writeFile（`export/${name}.svg`，newIcon，（）=>{
console.log（名称）；
});
});
});
svg只是多个符号的包装，只是添加了一些符号，因此看起来更像真正的精灵。但我从您的回答中可以看出，基本上，用g标记替换符号标记是没有问题的，我很乐意去做。但这不完全一样，符号更像是。它应该可以与嵌套的svg标记一起工作。请注意，如果您使用元素，内部的
viewBox
属性将被忽略。实际上
viewBox
在
g
元素上无效。您可能希望在
svg
元素上使用它？这在我的简单用例中起到了作用。我能够实际操作svg并在Illustrator中查看层，这就是我的全部艾德，谢谢你！
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480">
  <g>
    ...
  </g>
</svg>