ionic-framework - 如何使我的自定义 SVG 图标正确显示？（Inkscape，离子 4）

问题描述

当我在标签式离子应用程序中使用任何开箱即用的 Ionicons 或其他定制的 SVG 图标时，它们都可以正常工作，即

当标签被停用时，他们被弄清楚了
激活标签时，它们获得了主颜色

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

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

我最好的猜测是，首先使用 Inkscape 创建合适的图标时，我做错了事。

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

首先，我从网上获取了一个免费的 SVG 图标，并在我的选项卡式 ionic 应用程序中将其用作自定义图标。这完全符合预期！我使用了 GraphBerry 的这个漂亮的飞机形状：
- https://www.flaticon.com/free-icon/airplane-shape_59919
然后我将相同的 SVG 加载到 Inkscape 中，并将其存储为“Inkscape SVG”。由于 Inkscape 添加了所有其他内容，文件大小略大。它仍然可以完美运行。
然后我在飞机形状上添加了一个简单的圆圈，并将其再次存储为 Inkscape SVG。将生成的 SVG 加载为自定义图标仍然可以完美运行！
接下来，我从头开始创建一个新图标，并添加了 6 个具有默认 Inkscape 颜色的不相交的圆圈。它被存储为 Inkscape SVG 并且运行顺畅！
现在麻烦开始了！我又开始了一个新的图标，现在我有两个相交的圆圈，一个是黑色的，另一个是灰色的。我用灰色的通过“差异”操作“切断”了黑色圆圈的一部分。结果是一种只有黑色的“新月”。保存为 Inkscape SVG 并在我的应用程序中用作自定义图标。它保持黑色，并且只有黑色。没有变灰，没有焦点颜色，什么都没有。只有选项卡的标题会相应地调整颜色。
- 我绝对确定该图标是一种单一颜色的图标：黑色。
- 我尝试了“对象到路径”功能和其他不同的措施，但没有帮助

我不确定我的 SVG 文件有什么问题，但我怀疑仅将 SVG 设为单色以使其成为有用的图标还不够？

这样的离子/打字稿代码可能没有任何问题，因为自定义图标通常对我有用。但是如果你想用我错误的 SVG 尝试一个简单的 Ionic 4 示例，试试这个：

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

ionic start tabtester tabs

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

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

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="flash"></ion-icon>
      <ion-label>Tab One</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon src="assets/icon/airplane-shape.svg"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon src="assets/icon/custom-shape-cut-circle.svg"></ion-icon>
      <ion-label>Tab Three</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Tab One 有一个开箱即用的 Ionicons 图标
标签二使用上面提到的飞机图标
选项卡三引用了非工作自制图标

在这张图片中，您可以看到所有三个选项卡一个接一个地被选中，第三个图标没有改变它的颜色：

图片：错误的图标行为

这是名为“custom-shape-cut-circle.svg”的第三个图标的无效 svg/xml 代码：

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

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

诀窍是什么？

更新：

在@Moini 和@jt-houtenbos 的出色回答下，我终于明白了我的自定义文件的问题。

样式是问题，现在我知道了原因，我终于明白了 Inkscape 填充/描边选项“绘制未定义”。选中此选项（而不是使用任何颜色设置填充/描边），自定义图标可以完美运行！

这是找到该选项的地方：图片：Inkscape 选项“paint undefined”

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

在为生产创建自定义 SVG 时，我强烈建议使用@jt-houtenbos 描述的过程。生成的文件大小要小得多，而且图标仍然可以正常工作！

标签： ionic-frameworksvgionic4inkscapeionicons

ionic-framework - 如何使我的自定义 SVG 图标正确显示？（Inkscape，离子 4）

问题描述

解决方案

推荐阅读