如何填充特定的 vector/svg 图像？

Question

我确实有一个 Android 应用程序，它带有一个用于启动画面的图标。这是一个带有背景颜色的简单徽标，如果遵循 Android 主题，它会变为黑色或白色。我希望徽标中的“R”是白色而不是透明的（只有 R）。

（是否可以在徽标后面创建一个白色方块或类似的东西？）

the logo in .xml -> https://pastebin.com/GLDjk9Y1
the logo in .svg -> https://pastebin.com/9kyE4cir

Answer 1

您徽标中的 'R' 实际上并不作为形状存在。它仅作为 SVG 中两个 <path> 形状之间的孔存在。

第一个路径是外面的紫色形状。
第二条路径是'R'

您可以通过将 SVG 加载到矢量编辑器并执行一些路径拆分和合并操作来解决此问题。如果您有多个徽标需要修复，那么这就是您需要做的。

但是这里有一个手动编辑的徽标版本，如果这就是您所需要的。

svg path:nth-child(2) {
  fill: red;
}

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1000.000000pt" height="1000.000000pt" viewBox="0 0 1000.000000 1000.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)"
fill="#7659b0" stroke="none">
<path d="M1576 9489 c-160 -17 -340 -77 -476 -159 -117 -70 -180 -121 -273
-221 -183 -195 -291 -439 -317 -714 -8 -75 -10 -1183 -8 -3475 l4 -3365 21
-90 c60 -251 161 -435 332 -606 175 -176 381 -286 628 -336 84 -17 264 -18
3513 -18 3249 0 3429 1 3513 18 247 50 453 160 628 336 176 175 282 375 335
626 18 87 19 196 19 3515 0 3319 -1 3428 -19 3515 -53 251 -159 451 -335 626
-173 174 -366 278 -625 337 -65 15 -364 16 -3466 18 -1867 1 -3430 -2 -3474
-7z"/>
<path d="M5200 7450 c706 -81 1213 -495 1375 -1123 44 -170 54 -255 54 -452 0
-138 -4 -200 -18 -265 -97 -447 -410 -832 -863 -1063 -96 -49 -103 -54 -103
-82 0 -23 142 -233 645 -950 526 -752 644 -926 645 -952 l0 -33 -619 0 -619 0
-623 890 -623 890 -148 0 -148 0 0 -890 0 -890 -540 0 -540 0 0 2465 0 2465
1018 0 c630 0 1051 -4 1107 -10z M4160 5885 l0 -587 453 5 c504 5 521 7 651 75 128 67 229 191 272
337 22 74 25 245 5 325 -23 96 -80 200 -146 265 -72 71 -136 108 -242 137 -73
20 -106 22 -535 26 l-458 4 0 -587z" fill="white"/>
</g>
</svg>

在此版本中：

第一个路径是圆形紫色背景方块
第二条路径是'R'

我添加了一些 CSS 来证明 'R' 现在可以设置样式了。

如何填充特定的 vector/svg 图像？

How to fill a specific vector/svg image?

xml

android-studio

svg