XML 矢量 - 如何创建带圆角的垂直线

Question

我想使用 XML 矢量创建此图像，此矢量的线宽和高度应与提供的代码矢量相同。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M16.5,6v11.5c0,2.21 -1.79,4 -4,4s-4,-1.79 -4,-4V5c0,-1.38 1.12,-2.5 2.5,-2.5s2.5,1.12 2.5,2.5v10.5c0,0.55 -0.45,1 -1,1s-1,-0.45 -1,-1V6H10v9.5c0,1.38 1.12,2.5 2.5,2.5s2.5,-1.12 2.5,-2.5V5c0,-2.21 -1.79,-4 -4,-4S7,2.79 7,5v12.5c0,3.04 2.46,5.5 5.5,5.5s5.5,-2.46 5.5,-5.5V6h-1.5z"/>
</vector>

我要的结果

Answer 1

好的，我得到了我的结果。

第 1 步：设计图像。
第 2 步：将图像导出为 SVG*。
第 3 步：打开 Android Studio > 右键单击可绘制文件夹 > 新建矢量资产 > 从本地 SVG 文件 > 选择你的 SVG 文件。

*如果您的编辑器不支持 SVG 导出，您可以在线转换。

这是结果

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="3dp"
    android:height="30dp"
    android:viewportWidth="1290"
    android:viewportHeight="12040"
    android:tint="?attr/colorControlNormal">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M510,11939c-25,-5 -82,-27 -129,-49 -152,-73 -272,-220 -315,-387 -14,-55 -16,-591 -16,-5503 0,-4912 2,-5448 16,-5503 43,-167 163,-314 315,-387 95,-45 160,-60 264,-60 104,0 169,15 264,60 152,73 272,220 315,387 14,55 16,591 16,5503 0,4912 -2,5448 -16,5503 -43,167 -163,314 -315,387 -46,22 -108,44 -138,50 -64,12 -198,11 -261,-1z" />
</vector>

XML 矢量 - 如何创建带圆角的垂直线

XML Vector - How to create a virtical line with rounded corners

xml

vector

vector-graphics