Ionic framework 如何使自定义SVG图标正确显示？（Inkscape，爱奥尼亚4）

当我在我的选项卡式ionic应用程序中使用任何现成的ionic图标或其他定制的SVG图标时，它们都可以正常工作，即

• 当选项卡停用时，它们将变灰
• 当选项卡被激活时，它们将获得原色

如果我使用Inkscape创建自己的黑白SVG图标，结果是图标不会更改其颜色

• 选项卡图标始终具有原始颜色（黑色），只有标题会相应地更改颜色

我最好的猜测是，当我首先用Inkscape创建一个合适的图标时，我犯了严重的错误

我做了什么来研究我的问题

首先，我从web上获取了一个免费可用的SVG图标，并在我的选项卡式ionic应用程序中将其用作自定义图标。这工作完全如预期的那样！ 我用了GraphBerry的这个漂亮的飞机形状：

然后我将相同的SVG加载到Inkscape中，并将其存储为“Inkscape SVG”。由于Inkscape添加的所有附加内容，文件大小稍大。尽管如此，它仍然可以完美地工作

然后，我在飞机形状中添加了一个简单的圆圈，并将其再次存储为Inkscape SVG。将生成的SVG作为自定义图标加载仍然可以完美地工作

接下来，我从头开始创建一个新图标，并添加了6个默认Inkscape颜色的不相交圆。它被存储为Inkscape SVG，运行平稳

现在麻烦开始了！我又开始了一个新图标，现在我有两个相交的圆圈，一个是黑色的，另一个是灰色的。我用灰色的那个通过“差分”操作“切断”了黑色圆圈的一部分。结果是一个只有黑色的“新月”。另存为Inkscape SVG并在我的应用程序中用作自定义图标。它保持黑色，只有黑色。没有灰显，没有焦点颜色，什么都没有。只有选项卡的标题会相应地调整颜色

• 我绝对相信这个图标是一个单一颜色的图标：黑色
• 我尝试了“对象到路径”功能和其他绝望的措施，但没有帮助

我不确定我的SVG文件有什么问题，但我怀疑它不足以使SVG单色化，使其成为一个有用的图标

ionic/typescript代码本身可能没有什么问题，因为自定义图标通常适用于我。但是，如果您想使用我错误的SVG尝试一个简单的Ionic 4示例，请尝试以下方法：

创建具有3个选项卡的标准选项卡式ionic应用程序：

ionic start tabtester tabs

现在将SVG文件复制到“/assets/icon/”目录

之后，在文件“/app/tabs/tabs.page.html”中添加自定义图标

表一
表二
表三

• 选项卡1有一个现成的图标
• 选项卡二使用上述飞机图标
• 选项卡三参照非工作自制图标

在此图片中，您可以看到所有三个选项卡依次选中，第三个图标不会改变其颜色：

这是第三个名为“custom shape cut circle.svg”的图标的非工作svg/xml代码：

image/svg+xml

第三个图标的预期行为应与第二个图标类似，当在停用选项卡上时应为灰色，当在激活选项卡上时应为蓝色

诀窍是什么

更新：

有了@Moini和@j-t-houtenbos的精彩回答，我终于明白了自定义文件的问题

样式是问题所在，现在我知道了原因，我终于理解了Inkscape填充/笔划选项“paint undefined”。 选中此选项（而不是使用任何颜色设置填充/笔划样式）后，自定义图标将完美工作

在这里可以找到选项：

根据我在答案中获得的信息，我建议仅在起草时使用此选项。它使您的开发更加容易，因为您不需要每次都手动编辑SVG

在为生产创建自定义SVG时，我强烈建议使用@j-t-houtenbos描述的过程

---

生成的文件大小要小得多，图标仍然可以正常工作

这两种图形在样式方面的主要区别在于，有效的图形根本没有样式信息

---

因此，另存为优化的SVG以删除所有特定于Inkscape的内容，然后使用文本编辑器打开文件并删除所有样式信息（

style=“op…”“

）。

这两种图形在样式方面的主要区别在于，有效的图形完全没有样式信息

---

因此，另存为优化的SVG以删除所有特定于Inkscape的内容，然后使用文本编辑器打开文件并删除所有样式信息（

style=“op…”“

）。

如@Moini所述，删除内联样式。它们防止外部样式覆盖它。如果您只是删除内联样式，它将起作用。下面是一个更精简版本的示例：

svg{
宽度：20px；
高度：20px；
}
svg：悬停{
填充物：橙色；
}

---

如@Moini所述，删除内联样式。它们防止外部样式覆盖它。如果您只是删除内联样式，它将起作用。下面是一个更精简版本的示例：

svg{
宽度：20px；
高度：20px；
}
svg：悬停{
填充物：橙色；
}

您还可以共享（指向）工作图标的链接吗？您可以在此处下载此图标：它工作正常；-）您还可以共享（指向）工作图标的链接吗？您可以在此处下载此图标：它工作正常；-）非常感谢你！！！这正是我要找的信息

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="612mm"
   height="612mm"
   viewBox="0 0 2168.5039 2168.5039"
   id="svg4137"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="cusoim-shape-cut-circle.svg">
  <defs
     id="defs4139" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.24748737"
     inkscape:cx="606.12303"
     inkscape:cy="1233.4996"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1680"
     inkscape:window-height="997"
     inkscape:window-x="1672"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata4142">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,1116.1417)">
    <path
       style="opacity:0.98000004;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3.53516412;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98039216"
       d="M 951.78671,-1021.0711 A 967.75597,989.18228 0 0 0 248.96227,-710.12864 945.97847,886.05228 0 0 1 1076.422,168.09039 945.97847,886.05228 0 0 1 650.77296,907.50594 967.75597,989.18228 0 0 0 951.78671,957.29165 967.75597,989.18228 0 0 0 1919.5415,-31.888051 967.75597,989.18228 0 0 0 951.78671,-1021.0711 Z"
       id="path4685"
       inkscape:connector-curvature="0" />
  </g>
</svg>