Android矢量图在布局中无法显示

5

我创建了一个SVG矢量图形(使用CorelDraw X7),它看起来像这样:

enter image description here

然后我使用 svg2android 将其转换为 VectorDrawable 格式。但是,当我尝试在布局中使用它时,它不会出现:

enter image description here

如您所见,这里有另一个矢量图可用,它可以正常工作(因此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>

这个文件的代码与其他正常工作的文件的代码唯一不同的是,该文件中的某些值是负数,而在正常工作的文件中,它们都是正数。我做错了什么?

2
阅读有关 android:viewportWidthandroid:viewportHeight 的内容,将它们更改为例如2400。 - pskink
1个回答

11

你路径中点的坐标对于指定的viewportWidthviewportHeight太大了。

路径边界框为:

x:      631
y:      632
width:  945
height: 945

但是你的视窗设置基本上告诉了安卓它是什么:

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接