在xml中增加VectorDrawable图标描边答案

【问题标题】：Increase VectorDrawable icon stroke in xml在xml中增加VectorDrawable图标描边
【发布时间】：2018-09-28 08:49:53
【问题描述】：

我的 android 项目有一些 svg 图标。如何增加这些图标的笔画宽度。

以一个图标xml为例：

<vector android:height="28dp" android:viewportHeight="58.365"
    android:viewportWidth="58.365" android:width="28dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#000000"  android:pathData="M57.2641,26.6852l-8.4997,-7.8927L48.7644,5.8623l-9.7912,0l0,3.8391L29.182,0.6093L1.1008,26.6852c-0.3956,0.3681 -0.4191,0.9879 -0.0509,1.3845c0.3672,0.3956 0.987,0.4181 1.3845,0.0509l3.2497,-3.0176l0,32.6527l15.6659,0l15.6659,0l15.6659,0L52.6819,25.102l3.2497,3.0176c0.188,0.1753 0.4279,0.2614 0.6668,0.2614c0.2634,0 0.5248,-0.1048 0.7167,-0.3123C57.6832,27.6732 57.6597,27.0534 57.2641,26.6852zM40.9314,7.8205l5.8747,0l0,9.1538l-5.8747,-5.4547L40.9314,7.8205zM23.3073,55.7974L23.3073,35.1742c0,-0.5062 0.4112,-0.9174 0.9174,-0.9174l9.9146,0c0.5062,0 0.9174,0.4112 0.9174,0.9174l0,20.6232L23.3073,55.7974zM50.7226,55.7974l-13.7077,0L37.015,35.1742c0,-1.5862 -1.2895,-2.8757 -2.8757,-2.8757L24.2247,32.2985c-1.5862,0 -2.8757,1.2895 -2.8757,2.8757l0,20.6232l-13.7077,0L7.6414,23.2838l21.5406,-20.0024l13.9818,12.9831l5.6006,5.2001l0,0l1.9582,1.8182L50.7226,55.7974z"/>
</vector>

【问题讨论】：

如何在周围画边框？

标签： android svg android-vectordrawable

【解决方案1】：

请尝试以下代码

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="28dp"
    android:height="28dp"
    android:viewportWidth="58.365"
    android:viewportHeight="58.365">
    <path
        android:fillColor="#000000"
        android:strokeWidth="1"
        android:strokeColor="#000000"
        android:pathData="M57.2641,26.6852l-8.4997,-7.8927L48.7644,5.8623l-9.7912,0l0,3.8391L29.182,0.6093L1.1008,26.6852c-0.3956,0.3681 -0.4191,0.9879 -0.0509,1.3845c0.3672,0.3956 0.987,0.4181 1.3845,0.0509l3.2497,-3.0176l0,32.6527l15.6659,0l15.6659,0l15.6659,0L52.6819,25.102l3.2497,3.0176c0.188,0.1753 0.4279,0.2614 0.6668,0.2614c0.2634,0 0.5248,-0.1048 0.7167,-0.3123C57.6832,27.6732 57.6597,27.0534 57.2641,26.6852zM40.9314,7.8205l5.8747,0l0,9.1538l-5.8747,-5.4547L40.9314,7.8205zM23.3073,55.7974L23.3073,35.1742c0,-0.5062 0.4112,-0.9174 0.9174,-0.9174l9.9146,0c0.5062,0 0.9174,0.4112 0.9174,0.9174l0,20.6232L23.3073,55.7974zM50.7226,55.7974l-13.7077,0L37.015,35.1742c0,-1.5862 -1.2895,-2.8757 -2.8757,-2.8757L24.2247,32.2985c-1.5862,0 -2.8757,1.2895 -2.8757,2.8757l0,20.6232l-13.7077,0L7.6414,23.2838l21.5406,-20.0024l13.9818,12.9831l5.6006,5.2001l0,0l1.9582,1.8182L50.7226,55.7974z" />
</vector>

【讨论】：

如何在周围画边框？

【解决方案2】：

就像将这两个字段添加到path标签一样简单

android:strokeColor="@color/red"
android:strokeWidth="1"

【讨论】：

除了你还需要调整 viewportWidth 和 viewportHeight 这需要相当多的尝试和错误

【解决方案3】：

简单但要小心删除 Tint 标签，如下所示：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="@color/colorPrimary"--> This line should be removed
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M7,2v11h3v9l7,-12h-4l4,-8z"
        android:strokeWidth="1"--> Add This line
        android:strokeColor="@color/colorPrimary" -->This as well
    />


</vector>

【讨论】：