Question

我无法将颜色填充到我的svg文件中。我希望徽标内外都是红色的。我将“填充”和“笔触”属性修改为我想要的颜色，但输出只是带有红色边框和白色填充的徽标。我错过了什么吗？

<?xml version="1.0" encoding="UTF-8"?>
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs/>
 <g id="Background">
  <path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/>
 </g>
</svg>

Answer 1

在你的图标中，看起来像你可以填充的单行，实际上是一个红色的气泡形状，其中有一个较小的语音泡状孔。这是字体字形和许多图标集的典型安排。

您的图标由包含两个子路径的路径组成。一个用于外形，一个用于内部（孔）。每个子路径以M路径命令开头，以Z路径命令结束。

如果要“填充”形状的内部，则应该采用其中一个子路径并复制它。把它放在原来的形状后面。 “落后”意味着文件的早期版本。

见下文。

<!-- The original icon -->
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs/>
 <g id="Background">
  <path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/>
 </g>
</svg>

<!-- Modified icon -->
<svg width="26pt" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" viewBox="0 0 26 26" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs/>
 <g id="Background">
  <!-- Duplicated sub path with yellow fill -->
  <path style="fill:yellow;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z" transform="translate(2.1125, 0.4875)"/>
  <path style="fill:#e41414;fill-rule:nonzero;stroke:#e41414;" d="M19.4187 1.21875 C20.15 1.21875 20.7188 1.86875 20.7188 2.68125 L20.7188 16.1687 C20.7188 16.9812 20.15 17.6313 19.4187 17.6313 L14.2188 17.6313 L13.7312 17.6313 L13.4062 18.0375 L10.075 22.1 L9.9125 18.85 L9.83125 17.7125 L8.775 17.7125 L2.275 17.7125 C1.54375 17.7125 0.975 17.0625 0.975 16.25 L0.975 2.68125 C0.975 1.86875 1.54375 1.21875 2.275 1.21875 L19.4187 1.21875 Z M19.4187 0 L2.35625 0 C1.05625 0 0 1.21875 0 2.68125 L0 16.1687 C0 17.6313 1.05625 18.85 2.35625 18.85 L8.85625 18.85 L9.18125 25.025 L14.3 18.85 L19.5 18.85 C20.8 18.85 21.8562 17.6312 21.8562 16.1687 L21.8562 2.68125 C21.775 1.21875 20.7188 0 19.4187 0 L19.4187 0 Z" transform="translate(2.1125, 0.4875)"/>
 </g>
</svg>

无法填充我的svg文件的颜色

1 个答案: