Android VectorDrawable 未显示在布局中
Android VectorDrawable doesn't show up in the layout
我创建了一个 SVG 矢量图形(使用 CorelDraw X7),它看起来像这样:
然后我用svg2android把它转换成VectorDrawable格式。但是,当我尝试在布局中使用它时,它没有出现:
如您所见,旁边还有另一个矢量可绘制对象,工作正常(因此 svg2android 和 Android Studio 工作正常)。
这是实际可绘制对象的xml:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M 1382,680 c 107,0 194,112 194,251 0,138 -87,250 -194,250 -2,0 -3,0 -5,0 -17,98
-85,219 -230,219 l 0,77 c 0,28 235,1 235,45 l 0,55 -556,0 0,-55 c 0,-59 235,-11
235,-45 l 0,-77 c -125,0 -211,-106 -230,-219 -1,0 -3,0 -5,0 -107,0 -195,-112
-195,-250 0,-139 88,-251 195,-251 l 0,0 0,-48 556,0 0,48 z m -555,413 -1,-325 c
0,0 0,0 0,0 -70,0 -126,73 -126,163 0,89 56,162 126,162 0,0 1,0 1,0 z m 555,-325
0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" />
</vector>
我注意到此文件的代码与其他工作文件的代码之间唯一不同的是,与工作文件相比,此文件中的某些值显示为负值,而工作文件中的值均为正值。
我做错了什么?
对于指定的 viewportWidth
和 viewportHeight
,路径中点的坐标太大了。
路径边界框是:
x: 631
y: 632
width: 945
height: 945
但是您的视口设置基本上告诉 Android 它是:
x: 0
y: 0
width: 24
height: 24
所以形状将绘制在远离图标区域边缘的位置。
有一些方法可以手动修复它,但最好调整您的 CorelDraw 文件,使您的图形位于页面的左上角。然后确保保存的 SVG 有一个 viewBox
。 svg2android 将使用它来计算 viewportWidth 和 viewportHeight。
如果您无法让 CorelDraw 生成 viewBox,请在固定大小的页面(例如 100px x 100px)上设计您的图标。然后您应该能够通过手动添加 viewBox 来获得工作的 SVG。
<svg ... viewBox="0 0 100 100" ...>
注意:我在这里做一些有根据的猜测,因为我没有 CorelDraw 来测试。
同时,这是我认为应该可以使用的文件的手动调整版本(我没有测试过):
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="945"
android:viewportHeight="945">
<group android:translateX="-631" android:translateY="-632">
<path
android:fillColor="#000000"
android:pathData="M 1382,680 c 107,0 194,112 194,251 0,138 -87,250 -194,250 -2,0 -3,0 -5,0 -17,98
-85,219 -230,219 l 0,77 c 0,28 235,1 235,45 l 0,55 -556,0 0,-55 c 0,-59 235,-11
235,-45 l 0,-77 c -125,0 -211,-106 -230,-219 -1,0 -3,0 -5,0 -107,0 -195,-112
-195,-250 0,-139 88,-251 195,-251 l 0,0 0,-48 556,0 0,48 z m -555,413 -1,-325 c
0,0 0,0 0,0 -70,0 -126,73 -126,163 0,89 56,162 126,162 0,0 1,0 1,0 z m 555,-325
0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" />
</group>
</vector>
我创建了一个 SVG 矢量图形(使用 CorelDraw X7),它看起来像这样:
然后我用svg2android把它转换成VectorDrawable格式。但是,当我尝试在布局中使用它时,它没有出现:
如您所见,旁边还有另一个矢量可绘制对象,工作正常(因此 svg2android 和 Android Studio 工作正常)。
这是实际可绘制对象的xml:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#000000"
android:pathData="M 1382,680 c 107,0 194,112 194,251 0,138 -87,250 -194,250 -2,0 -3,0 -5,0 -17,98
-85,219 -230,219 l 0,77 c 0,28 235,1 235,45 l 0,55 -556,0 0,-55 c 0,-59 235,-11
235,-45 l 0,-77 c -125,0 -211,-106 -230,-219 -1,0 -3,0 -5,0 -107,0 -195,-112
-195,-250 0,-139 88,-251 195,-251 l 0,0 0,-48 556,0 0,48 z m -555,413 -1,-325 c
0,0 0,0 0,0 -70,0 -126,73 -126,163 0,89 56,162 126,162 0,0 1,0 1,0 z m 555,-325
0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" />
</vector>
我注意到此文件的代码与其他工作文件的代码之间唯一不同的是,与工作文件相比,此文件中的某些值显示为负值,而工作文件中的值均为正值。
我做错了什么?
对于指定的 viewportWidth
和 viewportHeight
,路径中点的坐标太大了。
路径边界框是:
x: 631
y: 632
width: 945
height: 945
但是您的视口设置基本上告诉 Android 它是:
x: 0
y: 0
width: 24
height: 24
所以形状将绘制在远离图标区域边缘的位置。
有一些方法可以手动修复它,但最好调整您的 CorelDraw 文件,使您的图形位于页面的左上角。然后确保保存的 SVG 有一个 viewBox
。 svg2android 将使用它来计算 viewportWidth 和 viewportHeight。
如果您无法让 CorelDraw 生成 viewBox,请在固定大小的页面(例如 100px x 100px)上设计您的图标。然后您应该能够通过手动添加 viewBox 来获得工作的 SVG。
<svg ... viewBox="0 0 100 100" ...>
注意:我在这里做一些有根据的猜测,因为我没有 CorelDraw 来测试。
同时,这是我认为应该可以使用的文件的手动调整版本(我没有测试过):
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="945"
android:viewportHeight="945">
<group android:translateX="-631" android:translateY="-632">
<path
android:fillColor="#000000"
android:pathData="M 1382,680 c 107,0 194,112 194,251 0,138 -87,250 -194,250 -2,0 -3,0 -5,0 -17,98
-85,219 -230,219 l 0,77 c 0,28 235,1 235,45 l 0,55 -556,0 0,-55 c 0,-59 235,-11
235,-45 l 0,-77 c -125,0 -211,-106 -230,-219 -1,0 -3,0 -5,0 -107,0 -195,-112
-195,-250 0,-139 88,-251 195,-251 l 0,0 0,-48 556,0 0,48 z m -555,413 -1,-325 c
0,0 0,0 0,0 -70,0 -126,73 -126,163 0,89 56,162 126,162 0,0 1,0 1,0 z m 555,-325
0,325 c 70,0 126,-73 126,-162 0,-90 -56,-163 -126,-163 z" />
</group>
</vector>