Android Vector Drawable 与 SVG 路径不同答案

【问题标题】：Android Vector Drawable not same as SVG PathAndroid Vector Drawable 与 SVG 路径不同
【发布时间】：2015-08-01 17:45:02
【问题描述】：

创建了一个 svg 图标（效果很好）但是，当在 android 中显示为矢量可绘制对象时，其中一个路径不会呈现相同的内容。这是原始的svg路径：

<path
   d="m 34.424316,19.525423 0,-1.2854 -2.329101,0 0,-0.604248 2.449951,-3.479004 
0.53833,0 0,3.479004 0.725098,0 0,0.604248 -0.725098,0 0,1.2854 -0.65918,0 z m 
0,-1.889648 0,-2.420655 -1.680908,2.420655 1.680908,0 z"
   style="fill:#FF00FF"
   id="path3383" />

这就是它的样子：

安卓路径：

<path
    android:fillColor="#FF00FF"
    android:pathData="M 34.424316,19.525423 l 0,-1.2854 -2.329101,0 0,-0.604248
2.449951,-3.4790040.53833,0 0,3.479004 0.725098,0 0,0.604248 -0.725098,0 0,1.2854 -0.65918,0 z m
0,-1.889648 0,-2.420655 -1.680908,2.420655 1.680908,0 z" />

以及它的外观：

附： android studio 让它变得模糊，但这不是问题，它在 Android lollipop 上呈现的锐利。

问题是4的洞被填满了。即使两条路径大多相同（唯一的区别是在第一个坐标之后添加了“l”。但如果我删除它，则 4 根本不会渲染）。

【问题讨论】：

您是否尝试在您的应用中看到它？
它实际上是我的应用程序图标的一部分。但是，是的，在真正的安卓手机（棒棒糖）中，这个洞是封闭的。
它无法工作：你的 pathData 中的“-3.4790040.53833”是什么？它不是任何有效的浮点数
尝试：L 2.329101,5.3621826 2.329101,4.0767574 0,4.0767574 0,3.472455 2.449951，-0.00654572 2.988281，-0.00654572 2.988281,3.472455 3.713379,3.472455 3.713379,4.0767574 2.988281,4.0767574 2.988281,5.3621826 2.329101,5.3621826ž L 2.329101,3.472455 2.329101,1.0518542 0.648193,3.472455 2.329101,3.472455 z
inkscape + 动物本能

标签： android svg vector-graphics android-vectordrawable

【解决方案1】：

您帖子的路径数据中没有命令字符。提问者所说的“l”是在第一组坐标之后引入的，实际上是“M”之后的第一个命令字符。根据文档，如果命令字符与以前的相同，则可以省略它以节省空间。但是这里提问者提到的“l”是“M”（移动到）命令字符之后的第一个“l”。 “l”是“line to”命令字符。在这种情况下，它是第一个，不能省略。我修复了文件，并在下面给出了文件的内容。

我正在显示您帖子的第二个路径数据向左移动了 10 个像素（M 24.424316、19.525423）我将填充颜色更改为蓝色。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="30dp"
        android:height="30dp"
        android:viewportWidth="40.0"
        android:viewportHeight="40.0">



    <path
        android:pathData="


     m  34.424316,   19.525423
     l   0,          -1.2854
     l  -2.329101,    0
     l   0,          -0.604248
     l   2.449951,   -3.479004
     l   0.53833,     0
     l   0,           3.479004
     l   0.725098,    0
     l   0,           0.604248
     l  -0.725098,    0
     l   0,           1.2854
     l  -0.65918,     0

     m   0,          -1.889648
     l   0,          -2.420655
     l  -1.680908,    2.420655
     l   1.680908,    0      "


    android:strokeLineCap="square"
    android:strokeColor="#ffff00ff"
    android:fillColor="#ff0000ff"
    android:strokeWidth="0.2"/>

    <path
    android:pathData="


    M   24.424316,  19.525423
    l    0,         -1.2854
    l   -2.329101,   0
    l    0,         -0.604248
    l    2.449951,  -3.479004
    l    0.53833,    0
    l    0,          3.479004
    l    0.725098,   0
    l    0,          0.604248
    l   -0.725098,   0
    l    0,          1.2854
    l   -0.65918,    0

    m    0,         -1.889648
    l    0,         -2.420655
    l   -1.680908,   2.420655
    l    1.680908,   0 "

    android:strokeLineCap="square"
    android:strokeColor="#ffff00ff"
    android:fillColor="#ff0000ff"
    android:strokeWidth="0.2"/>

</vector>

创建一个空白的xml文件，把上面的内容复制进去。然后你应该看到带有洋红色轮廓和蓝色填充的数字 4（两次）。我在这里做了，显示很清晰。我不知道提问者提到的模糊的原因。

【讨论】：

在 Android Studio 中将路径数据从 svg 粘贴到向量中提供了很多有用的信息 “向量路径非常长（1965 个字符），这对性能不利。考虑降低精度，删除次要细节或光栅化矢量。less... (Ctrl+F1) 使用长矢量路径对性能不利。有几种方法可以使 pathData 更短： * 使用较低的精度 * 删除一些小细节 * 使用 Android Studio 矢量转换工具 *光栅化图像（转换为 PNG）"

【解决方案2】：

VectorDrawable fill-rule 始终为非零且无法更改。如果最终填充了不应填充的区域，那是因为 SVG 图像是使用奇偶规则创建的。有两种方法可以解决此问题：在矢量图形软件中手动编辑 SVG 或在您的应用中使用 BetterVectorDrawable 库。

阅读更多here

【讨论】：