Android Studio 中未正确绘制矢量可绘制对象
Vector drawable not drawn correctly in Android Studio
我正在重新设计应用程序，但在 Android Studio 中正确绘制某些图标时遇到问题。我正在使用 Sketch 进行所有设计工作。
我在网上看了很多，试图找出解决方案，但我很难解释搜索词的问题，所以我想我会尝试 post 截图并提供草图文件以查看 Whosebug 社区是否可以提供帮助。
我认为问题与我在 Sketch 中构建矢量路径有关，特别是它们如何相互重叠。这是我正在处理的图标示例：
Earth shape with longitude and latitude lines
如您所见，我在 Sketch 中创建图标没有任何问题。但是，在我将图标导出为 SVG 文件并将其导入 Android Studio 后，它的绘制方式如下：
当形状变得更复杂并开始相互重叠时，我才 运行 解决这个问题。到目前为止，我已经能够让大多数图标保持简单，但它已经到了我需要找到解决方案的地步。
我打算 post 一个 link 到 Dropbox 中的 Sketch 文件，但我需要更多的声望点才能做到这一点。如果需要，希望我可以在回复中向某人提供 link。
如有任何帮助，我们将不胜感激。如果这是一个重复的问题，我深表歉意。在我所有的搜索中，我可能没有用这样的方式来表达这个问题以获得好的结果。
@Paul LeBeau，感谢您的回复。这是从 Sketch 导出的 SVG 代码：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>globe</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="globe" fill="#368EFA">
<g id="test" transform="translate(2.000000, 2.000000)">
<path d="M1.76297407,13 L5.00480805,13 C4.73881764,12.1144772 4.55303608,11.1138143 4.50968627,10 L1.02773406,10 C1.01839018,9.83680058 1.01365419,9.67236691 1.01365419,9.5068271 C1.01365419,9.33666963 1.01865808,9.16768089 1.02852674,9 L4.50968627,9 C4.55303608,7.88618573 4.73881764,6.8855228 5.00480805,6 L1.76915759,6 C1.92639337,5.65361668 2.10620446,5.31965722 2.30671248,5 L5.35559719,5 C6.20744032,2.88601313 7.45296691,1.59423095 7.91693127,1.16221702 C8.43195688,1.06468547 8.96343249,1.01365419 9.5068271,1.01365419 C10.0442032,1.01365419 10.569923,1.06356132 11.0796041,1.15899346 C11.5408038,1.58777803 12.7904304,2.88072886 13.6444028,5 L16.7069417,5 C16.9074497,5.31965722 17.0872608,5.65361668 17.2444966,6 L13.9951919,6 C14.2611824,6.8855228 14.4469639,7.88618573 14.4903137,9 L17.9851275,9 C17.9949961,9.16768089 18,9.33666963 18,9.5068271 C18,9.67236691 17.995264,9.83680058 17.9859201,10 L14.4903137,10 C14.4469639,11.1138143 14.2611824,12.1144772 13.9951919,13 L17.2506801,13 C17.0942093,13.3463294 16.915188,13.6802868 16.7154884,14 L13.6444028,14 C12.7787643,16.1482222 11.506588,17.4473934 11.0611474,17.8580954 C10.5572344,17.95129 10.0377192,18 9.5068271,18 C8.96992723,18 8.44466314,17.9501813 7.93540532,17.8549144 C7.4868821,17.4407166 6.21901315,16.1427067 5.35559719,14 L2.29816579,14 C2.09846621,13.6802868 1.9194449,13.3463294 1.76297407,13 Z M6.02760136,13 L9,13 L9,10 L5.51031179,10 C5.55606369,11.1058076 5.7507371,12.108186 6.02760136,13 Z M6.38814497,14 L9,14 L9,17.9088258 C8.62776002,17.558389 7.2971495,16.2062617 6.38814497,14 Z M9,1.09117415 L9,5 L6.38814497,5 C7.2971495,2.79373835 8.62776002,1.44161098 9,1.09117415 Z M6.02760136,6 L9,6 L9,9 L5.51031179,9 C5.55606369,7.8941924 5.7507371,6.89181397 6.02760136,6 Z M10,13 L12.9723986,13 C13.2492629,12.108186 13.4439363,11.1058076 13.4896882,10 L10,10 L10,13 Z M10,14 L12.611855,14 C11.7028505,16.2062617 10.37224,17.558389 10,17.9088258 L10,14 Z M10,1.09117415 C10.37224,1.44161098 11.7028505,2.79373835 12.611855,5 L10,5 L10,1.09117415 Z M10,6 L12.9723986,6 C13.2492629,6.89181397 13.4439363,7.8941924 13.4896882,9 L10,9 L10,6 Z" id="earth"></path>
<path d="M9.5,18 L9.5,18 C14.1944204,18 18,14.1944204 18,9.5 C18,4.80557963 14.1944204,1 9.5,1 C4.80557963,1 1,4.80557963 1,9.5 C1,14.1944204 4.80557963,18 9.5,18 L9.5,18 Z M9.5,19 L9.5,19 C4.25329488,19 0,14.7467051 0,9.5 C0,4.25329488 4.25329488,0 9.5,0 C14.7467051,0 19,4.25329488 19,9.5 C19,14.7467051 14.7467051,19 9.5,19 L9.5,19 Z" id="border"></path>
</g>
</g>
</g>
</svg>
下面是将 SVG 文件直接导入 Android Studio 后的代码：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M3.763,15L7.005,15C6.739,14.114 6.553,13.114 6.51,12L3.028,12C3.018,11.837 3.014,11.672 3.014,11.507C3.014,11.337 3.019,11.168 3.029,11L6.51,11C6.553,9.886 6.739,8.886 7.005,8L3.769,8C3.926,7.654 4.106,7.32 4.307,7L7.356,7C8.207,4.886 9.453,3.594 9.917,3.162C10.432,3.065 10.963,3.014 11.507,3.014C12.044,3.014 12.57,3.064 13.08,3.159C13.541,3.588 14.79,4.881 15.644,7L18.707,7C18.907,7.32 19.087,7.654 19.244,8L15.995,8C16.261,8.886 16.447,9.886 16.49,11L19.985,11C19.995,11.168 20,11.337 20,11.507C20,11.672 19.995,11.837 19.986,12L16.49,12C16.447,13.114 16.261,14.114 15.995,15L19.251,15C19.094,15.346 18.915,15.68 18.715,16L15.644,16C14.779,18.148 13.507,19.447 13.061,19.858C12.557,19.951 12.038,20 11.507,20C10.97,20 10.445,19.95 9.935,19.855C9.487,19.441 8.219,18.143 7.356,16L4.298,16C4.098,15.68 3.919,15.346 3.763,15ZM8.028,15L11,15L11,12L7.51,12C7.556,13.106 7.751,14.108 8.028,15ZM8.388,16L11,16L11,19.909C10.628,19.558 9.297,18.206 8.388,16ZM11,3.091L11,7L8.388,7C9.297,4.794 10.628,3.442 11,3.091ZM8.028,8L11,8L11,11L7.51,11C7.556,9.894 7.751,8.892 8.028,8ZM12,15L14.972,15C15.249,14.108 15.444,13.106 15.49,12L12,12L12,15ZM12,16L14.612,16C13.703,18.206 12.372,19.558 12,19.909L12,16ZM12,3.091C12.372,3.442 13.703,4.794 14.612,7L12,7L12,3.091ZM12,8L14.972,8C15.249,8.892 15.444,9.894 15.49,11L12,11L12,8Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
<path
android:pathData="M11.5,20L11.5,20C16.194,20 20,16.194 20,11.5C20,6.806 16.194,3 11.5,3C6.806,3 3,6.806 3,11.5C3,16.194 6.806,20 11.5,20L11.5,20ZM11.5,21L11.5,21C6.253,21 2,16.747 2,11.5C2,6.253 6.253,2 11.5,2C16.747,2 21,6.253 21,11.5C21,16.747 16.747,21 11.5,21L11.5,21Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
我猜你的图标是一个有 16 个孔的圆圈。对吗？
如果是这样，可能是填充规则的问题。 VectorDrawables（和 SVG）默认使用非零填充规则，如果您的形状是使用奇偶填充规则渲染的，这将给出不同的结果。
我猜 Sketch 默认使用奇偶填充规则。或者，也许您将其更改为偶数 (?)
如果由于某些原因您无法在 Sketch 中修复填充规则，或者当您转换为 VectorDrawable 时它没有通过，您将需要自己在 VectorDrawable 中手动更改它。
打开 VectorDrawable 文件并找到 <path> 元素。然后更改（或设置）以下属性：
android:fillType="evenodd"
更新
好的，我认为切换 fillType 会起作用，但它不起作用。但我确实有解决办法。
很多人不知道的是，填充路径的线段绘制方向对填充有影响。通过分段绘制方向，我的意思是路径（或子路径）中的点是以顺时针还是逆时针方向绘制的。这被称为点的 "winding"。
修改您的文件并更改六个错误的子路径（切口），使它们的绘制方向与现在的方向相反。您的 VectorDrawable 应该会正确呈现。
例如，如果您试试这个修改后的 VectorDrawable 文件，您会发现我已将其中一个切口（左上角有缺陷的切口）中的点重新排列到相反的缠绕方向。一些矢量编辑器可以为您反转路径方向。不知道Sketch能不能。
只需覆盖顶部的 material 设计缩放比例。
在右上角。
我也遇到了同样的问题，我的三个图标在 Android Studio 中无法正确呈现。
虽然根本原因是 VectorDrawable 不支持奇偶 fillType，但要使其正常工作，您不应在 .svg 文件上对其进行编辑。你必须在 Sketch 本身上编辑它。 This article 彻底解释这个话题。我将尝试重述一些要点。
- 在素描中。找到你丢失的形状。就我而言，它是一个圆形。
- 在填充配置（齿轮形图标）上，将其更改为非零。
- 您需要重新调整形状顺序，打开图层 -> 路径 -> 反转顺序。
- 导出分组形状。
- 将其转换为 VectorDrawable（通过 Android Studio 或第 3 方工具）。
有时我需要重复第 3 步。尽管如此，它总是适用于我的情况。我希望这能解决你的问题。
我正在重新设计应用程序，但在 Android Studio 中正确绘制某些图标时遇到问题。我正在使用 Sketch 进行所有设计工作。
我在网上看了很多，试图找出解决方案，但我很难解释搜索词的问题，所以我想我会尝试 post 截图并提供草图文件以查看 Whosebug 社区是否可以提供帮助。
我认为问题与我在 Sketch 中构建矢量路径有关，特别是它们如何相互重叠。这是我正在处理的图标示例：
Earth shape with longitude and latitude lines
如您所见，我在 Sketch 中创建图标没有任何问题。但是，在我将图标导出为 SVG 文件并将其导入 Android Studio 后，它的绘制方式如下：
当形状变得更复杂并开始相互重叠时，我才 运行 解决这个问题。到目前为止，我已经能够让大多数图标保持简单，但它已经到了我需要找到解决方案的地步。
我打算 post 一个 link 到 Dropbox 中的 Sketch 文件，但我需要更多的声望点才能做到这一点。如果需要，希望我可以在回复中向某人提供 link。
如有任何帮助，我们将不胜感激。如果这是一个重复的问题，我深表歉意。在我所有的搜索中，我可能没有用这样的方式来表达这个问题以获得好的结果。
@Paul LeBeau，感谢您的回复。这是从 Sketch 导出的 SVG 代码：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>globe</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="globe" fill="#368EFA">
<g id="test" transform="translate(2.000000, 2.000000)">
<path d="M1.76297407,13 L5.00480805,13 C4.73881764,12.1144772 4.55303608,11.1138143 4.50968627,10 L1.02773406,10 C1.01839018,9.83680058 1.01365419,9.67236691 1.01365419,9.5068271 C1.01365419,9.33666963 1.01865808,9.16768089 1.02852674,9 L4.50968627,9 C4.55303608,7.88618573 4.73881764,6.8855228 5.00480805,6 L1.76915759,6 C1.92639337,5.65361668 2.10620446,5.31965722 2.30671248,5 L5.35559719,5 C6.20744032,2.88601313 7.45296691,1.59423095 7.91693127,1.16221702 C8.43195688,1.06468547 8.96343249,1.01365419 9.5068271,1.01365419 C10.0442032,1.01365419 10.569923,1.06356132 11.0796041,1.15899346 C11.5408038,1.58777803 12.7904304,2.88072886 13.6444028,5 L16.7069417,5 C16.9074497,5.31965722 17.0872608,5.65361668 17.2444966,6 L13.9951919,6 C14.2611824,6.8855228 14.4469639,7.88618573 14.4903137,9 L17.9851275,9 C17.9949961,9.16768089 18,9.33666963 18,9.5068271 C18,9.67236691 17.995264,9.83680058 17.9859201,10 L14.4903137,10 C14.4469639,11.1138143 14.2611824,12.1144772 13.9951919,13 L17.2506801,13 C17.0942093,13.3463294 16.915188,13.6802868 16.7154884,14 L13.6444028,14 C12.7787643,16.1482222 11.506588,17.4473934 11.0611474,17.8580954 C10.5572344,17.95129 10.0377192,18 9.5068271,18 C8.96992723,18 8.44466314,17.9501813 7.93540532,17.8549144 C7.4868821,17.4407166 6.21901315,16.1427067 5.35559719,14 L2.29816579,14 C2.09846621,13.6802868 1.9194449,13.3463294 1.76297407,13 Z M6.02760136,13 L9,13 L9,10 L5.51031179,10 C5.55606369,11.1058076 5.7507371,12.108186 6.02760136,13 Z M6.38814497,14 L9,14 L9,17.9088258 C8.62776002,17.558389 7.2971495,16.2062617 6.38814497,14 Z M9,1.09117415 L9,5 L6.38814497,5 C7.2971495,2.79373835 8.62776002,1.44161098 9,1.09117415 Z M6.02760136,6 L9,6 L9,9 L5.51031179,9 C5.55606369,7.8941924 5.7507371,6.89181397 6.02760136,6 Z M10,13 L12.9723986,13 C13.2492629,12.108186 13.4439363,11.1058076 13.4896882,10 L10,10 L10,13 Z M10,14 L12.611855,14 C11.7028505,16.2062617 10.37224,17.558389 10,17.9088258 L10,14 Z M10,1.09117415 C10.37224,1.44161098 11.7028505,2.79373835 12.611855,5 L10,5 L10,1.09117415 Z M10,6 L12.9723986,6 C13.2492629,6.89181397 13.4439363,7.8941924 13.4896882,9 L10,9 L10,6 Z" id="earth"></path>
<path d="M9.5,18 L9.5,18 C14.1944204,18 18,14.1944204 18,9.5 C18,4.80557963 14.1944204,1 9.5,1 C4.80557963,1 1,4.80557963 1,9.5 C1,14.1944204 4.80557963,18 9.5,18 L9.5,18 Z M9.5,19 L9.5,19 C4.25329488,19 0,14.7467051 0,9.5 C0,4.25329488 4.25329488,0 9.5,0 C14.7467051,0 19,4.25329488 19,9.5 C19,14.7467051 14.7467051,19 9.5,19 L9.5,19 Z" id="border"></path>
</g>
</g>
</g>
</svg>
下面是将 SVG 文件直接导入 Android Studio 后的代码：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:pathData="M3.763,15L7.005,15C6.739,14.114 6.553,13.114 6.51,12L3.028,12C3.018,11.837 3.014,11.672 3.014,11.507C3.014,11.337 3.019,11.168 3.029,11L6.51,11C6.553,9.886 6.739,8.886 7.005,8L3.769,8C3.926,7.654 4.106,7.32 4.307,7L7.356,7C8.207,4.886 9.453,3.594 9.917,3.162C10.432,3.065 10.963,3.014 11.507,3.014C12.044,3.014 12.57,3.064 13.08,3.159C13.541,3.588 14.79,4.881 15.644,7L18.707,7C18.907,7.32 19.087,7.654 19.244,8L15.995,8C16.261,8.886 16.447,9.886 16.49,11L19.985,11C19.995,11.168 20,11.337 20,11.507C20,11.672 19.995,11.837 19.986,12L16.49,12C16.447,13.114 16.261,14.114 15.995,15L19.251,15C19.094,15.346 18.915,15.68 18.715,16L15.644,16C14.779,18.148 13.507,19.447 13.061,19.858C12.557,19.951 12.038,20 11.507,20C10.97,20 10.445,19.95 9.935,19.855C9.487,19.441 8.219,18.143 7.356,16L4.298,16C4.098,15.68 3.919,15.346 3.763,15ZM8.028,15L11,15L11,12L7.51,12C7.556,13.106 7.751,14.108 8.028,15ZM8.388,16L11,16L11,19.909C10.628,19.558 9.297,18.206 8.388,16ZM11,3.091L11,7L8.388,7C9.297,4.794 10.628,3.442 11,3.091ZM8.028,8L11,8L11,11L7.51,11C7.556,9.894 7.751,8.892 8.028,8ZM12,15L14.972,15C15.249,14.108 15.444,13.106 15.49,12L12,12L12,15ZM12,16L14.612,16C13.703,18.206 12.372,19.558 12,19.909L12,16ZM12,3.091C12.372,3.442 13.703,4.794 14.612,7L12,7L12,3.091ZM12,8L14.972,8C15.249,8.892 15.444,9.894 15.49,11L12,11L12,8Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
<path
android:pathData="M11.5,20L11.5,20C16.194,20 20,16.194 20,11.5C20,6.806 16.194,3 11.5,3C6.806,3 3,6.806 3,11.5C3,16.194 6.806,20 11.5,20L11.5,20ZM11.5,21L11.5,21C6.253,21 2,16.747 2,11.5C2,6.253 6.253,2 11.5,2C16.747,2 21,6.253 21,11.5C21,16.747 16.747,21 11.5,21L11.5,21Z"
android:strokeWidth="1"
android:fillColor="#368EFA"
android:strokeColor="#00000000"/>
我猜你的图标是一个有 16 个孔的圆圈。对吗？
如果是这样，可能是填充规则的问题。 VectorDrawables（和 SVG）默认使用非零填充规则，如果您的形状是使用奇偶填充规则渲染的，这将给出不同的结果。
我猜 Sketch 默认使用奇偶填充规则。或者，也许您将其更改为偶数 (?)
如果由于某些原因您无法在 Sketch 中修复填充规则，或者当您转换为 VectorDrawable 时它没有通过，您将需要自己在 VectorDrawable 中手动更改它。
打开 VectorDrawable 文件并找到 <path> 元素。然后更改（或设置）以下属性：
android:fillType="evenodd"
更新
好的，我认为切换 fillType 会起作用，但它不起作用。但我确实有解决办法。
很多人不知道的是，填充路径的线段绘制方向对填充有影响。通过分段绘制方向，我的意思是路径（或子路径）中的点是以顺时针还是逆时针方向绘制的。这被称为点的 "winding"。
修改您的文件并更改六个错误的子路径（切口），使它们的绘制方向与现在的方向相反。您的 VectorDrawable 应该会正确呈现。
例如，如果您试试这个修改后的 VectorDrawable 文件，您会发现我已将其中一个切口（左上角有缺陷的切口）中的点重新排列到相反的缠绕方向。一些矢量编辑器可以为您反转路径方向。不知道Sketch能不能。
只需覆盖顶部的 material 设计缩放比例。 在右上角。
我也遇到了同样的问题，我的三个图标在 Android Studio 中无法正确呈现。
虽然根本原因是 VectorDrawable 不支持奇偶 fillType，但要使其正常工作，您不应在 .svg 文件上对其进行编辑。你必须在 Sketch 本身上编辑它。 This article 彻底解释这个话题。我将尝试重述一些要点。
- 在素描中。找到你丢失的形状。就我而言，它是一个圆形。
- 在填充配置（齿轮形图标）上，将其更改为非零。
- 您需要重新调整形状顺序，打开图层 -> 路径 -> 反转顺序。
- 导出分组形状。
- 将其转换为 VectorDrawable（通过 Android Studio 或第 3 方工具）。
有时我需要重复第 3 步。尽管如此，它总是适用于我的情况。我希望这能解决你的问题。