如何创建内部路径透明的Android Vector Drawable收藏图标？

我明白你遇到的困扰了——把内部路径设为透明后，下面的橙色路径直接透了出来，导致整个图标看起来全是橙色。这是因为Vector Drawable的路径是叠加绘制的：透明路径只是不填充自身，但不会“挖掉”下方路径的区域。要实现内部镂空的效果，得用路径填充规则或路径合并的方式处理，而不是简单设置透明色。

方法一：使用evenOdd填充规则（推荐） #

这是最直接的方案，把内外两个心形路径合并成一个，通过android:fillType="evenOdd"让内部区域自动镂空。这个规则的逻辑是：路径交叉次数为奇数的区域会被填充，偶数次的区域则保持透明，刚好适合这种“外框填充、内部镂空”的形状。

修改后的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="72dp" 
    android:height="66dp" 
    android:viewportHeight="66" 
    android:viewportWidth="72">
    <!-- 合并内外心形路径，用evenOdd规则实现内部镂空 -->
    <path 
        android:fillColor="#F7592B" 
        android:fillType="evenOdd"
        android:pathData="M 20.99 1.04 C 26.30 1.45 30.97 4.88 36.04 5.70 C 40.02 5.23 43.79 2.79 47.70 1.80 C 56.08 -0.90 65.46 4.21 69.03 11.97 C 71.67 17.65 71.59 24.74 70.62 30.81 C 68.57 41.48 60.32 50.55 51.81 56.81 C 47.69 59.73 43.11 62.72 38.21 64.12 C 34.80 65.13 31.23 63.34 28.24 61.86 C 19.69 57.27 11.77 50.76 6.25 42.72 C 0.82 34.78 -0.33 24.87 1.66 15.60 C 3.69 7.15 12.14 0.18 20.99 1.04 Z
                          M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84 7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30 C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C 24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15 11.09 14.21 6.98 19.98 7.14 Z" />
</vector>

方法二：使用clipPath裁剪（适合复杂场景） #

如果你的图标结构更复杂，也可以用clipPath实现镂空。思路是先绘制外部橙色心形，再用内部心形作为裁剪区域，把中间部分“剪掉”。

代码示例：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:width="72dp" 
    android:height="66dp" 
    android:viewportHeight="66" 
    android:viewportWidth="72">

    <!-- 绘制外部橙色心形 -->
    <path 
        android:fillColor="#F7592B" 
        android:pathData="M 20.99 1.04 C 26.30 1.45 30.97 4.88 36.04 5.70 C 40.02 5.23 43.79 2.79 47.70 1.80 C 56.08 -0.90 65.46 4.21 69.03 11.97 C 71.67 17.65 71.59 24.74 70.62 30.81 C 68.57 41.48 60.32 50.55 51.81 56.81 C 47.69 59.73 43.11 62.72 38.21 64.12 C 34.80 65.13 31.23 63.34 28.24 61.86 C 19.69 57.27 11.77 50.76 6.25 42.72 C 0.82 34.78 -0.33 24.87 1.66 15.60 C 3.69 7.15 12.14 0.18 20.99 1.04 Z" />

    <!-- 用内部心形作为裁剪区域，覆盖掉中间的橙色 -->
    <group android:clipPath="M 19.98 7.14 C 25.68 7.39 30.87 12.07 36.10 12.99 C 41.30 12.15 46.97 7.14 52.84 7.35 C 58.72 7.85 63.41 12.52 64.67 18.17 C 65.71 23.40 65.21 29.32 63.25 34.30 C 59.83 42.88 52.20 49.81 44.38 54.43 C 40.52 56.53 36.81 58.58 32.37 56.70 C 24.56 53.51 17.02 47.75 12.20 40.77 C 7.31 33.87 5.58 24.79 7.64 16.59 C 9.15 11.09 14.21 6.98 19.98 7.14 Z">
        <path 
            android:fillColor="@android:color/transparent" 
            android:pathData="M 0 0 L 72 0 L 72 66 L 0 66 Z" />
    </group>
</vector>

为什么原来的方法不行？ #

你原来的代码里，三个路径是依次叠加绘制的：透明矩形→橙色心形→蓝色心形。当把蓝色心形设为透明时，它不会遮挡下方的橙色心形，所以橙色会直接透出来，看起来整个图标都是橙色。而用evenOdd或裁剪的方式，是真正把内部区域从橙色路径中“挖掉”，而非简单的透明覆盖。

内容的提问来源于stack exchange，提问作者Anu