不支持带有 ERROR@ <mask> 的 Android Studio 导入 SVG答案

【问题标题】：AndroidStudio import SVG with ERROR@ <mask> is not supported不支持带有 ERROR@ <mask> 的 Android Studio 导入 SVG
【发布时间】：2018-09-04 09:53:19
【问题描述】：

我在尝试使用导入 SVG 时收到消息 "ERROR@ <mask> is not supported"

 Android Studio 3.0.1
Build #AI-171.4443003, built on November 10, 2017
JRE: 1.8.0_152-release-915-b08 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Mac OS X 10.12.6

是否要导入 SVG 并使其正确显示？

【问题讨论】：

去掉掩码元素和掩码属性？

标签： android-studio svg vector ide android-vectordrawable

【解决方案1】：

解决方案 1

在Sketch 中扁平化图像并使用this site 将SVG 转换为Android 的xml

解决方案 2

我使用 nonZero 而不是 evenOdd 并在 Sketch 中打开它以反转 Order 后反转它将更改 pathData 并删除 android:fillType 并且在 Android 21+ 上一切正常。

解决方案 3

PNG

TLDR

经过一番研究，我发现矢量图形、SVG 有两种填充规则属性方法，“偶数”与“非零”

我在 Sketch 中打开了 SVG 图标并检查了图标顶部的孔。正如预期的那样，它使用了 fill-rule:evenodd 属性。现在我必须更改填充规则以使用“非零”属性。如何？选择路径。在右侧，“填充”属性中有一个设置图标。点击它并选择“非零”。

从主菜单中，选择图层 → 路径 → 逆序。我在图标顶部找到了洞，并且在应用程序中也找到了洞。

For more detail

【讨论】：

解决方案 2 的链接在哪里？
我要求设计师通过使用 Sketch 来平整图像，有时使用它的作品
链接已被弃用，而是将您带到工作室工具，因此这不再是解决方案。

【解决方案2】：

如果您只有 .svg 文件，您可以手动操作 .svg 标记以移除遮罩并应用内嵌填充。

如果您与设计师合作，您可以要求他们获取图标并移除遮罩内的所有内容，然后对图标应用填充。然后让设计人员导出 .svg 文件并重试导入 Android Studio。

当您尝试导入的资产是从 Sketch 或其他设计软件中导出的，并且该图标是一个蒙版（而不是填充）时，它将使用该标签导出。 Android Studio 只接受带有填充的 .svg（这在 iOS 上不是问题）

【讨论】：

【解决方案3】：

打开 SVG 文件并删除 mask 元素。您可以保留use 元素。
导入
打开导入的文件
删除最后一个有fillType="evenOdd"的元素
更新android:fillType="nonZero"元素的颜色

这当然取决于设计师如何导出资产，但像这样的编辑路径总是能让你到达你想要的地方。

【讨论】：

差不多，但是元素是圆形的，最后是方形的

【解决方案4】：

工具 1) 是 ShapeShifter https://shapeshifter.design

工具 2) 是https://svg2vector.com

在这种情况下试试这个工具https://svg2vector.com。在使用 Android Vector Asset Studio 时，您可能会遇到以下错误：

Missing "viewBox" in <svg> element
<animate> is not supported
<animateColor> is not supported
<animateMotion> is not supported
<animateTransform> is not supported
<mpath> is not supported
<set> is not supported
<a> is not supported
<defs> is not supported
<glyph> is not supported
<marker> is not supported
<mask> is not supported
<missing-glyph> is not supported
<pattern> is not supported
<switch> is not supported
<symbol> is not supported
<feBlend> is not supported
<feColorMatrix> is not supported
<feComponentTransfer> is not supported
<feComposite> is not supported
<feConvolveMatrix> is not supported
<feDiffuseLighting> is not supported
<feDisplacementMap> is not supported
<feFlood> is not supported
<feFuncA> is not supported
<feFuncB> is not supported
<feFuncG> is not supported
<feFuncR> is not supported
<feGaussianBlur> is not supported
<feImage> is not supported
<feMerge> is not supported
<feMergeNode> is not supported
<feMorphology> is not supported
<feOffset> is not supported
<feSpecularLighting> is not supported
<feTile> is not supported
<feTurbulence> is not supported
<font> is not supported
<font-face> is not supported
<font-face-format> is not supported
<font-face-name> is not supported
<font-face-src> is not supported
<font-face-uri> is not supported
<hkern> is not supported
<vkern> is not supported
<linearGradient> is not supported
<radialGradient> is not supported
<stop> is not supported
<ellipse> is not supported
<polyline> is not supported
<text> is not supported
<use> is not supported
<feDistantLight> is not supported
<fePointLight> is not supported
<feSpotLight> is not supported
<altGlyph> is not supported
<altGlyphDef> is not supported
<altGlyphItem> is not supported
<glyphRef> is not supported
<textPath> is not supported
<tref> is not supported
<tspan> is not supported
<clipPath> is not supported
<color-profile> is not supported
<cursor> is not supported
<filter> is not supported
<foreignObject> is not supported
<script> is not supported
<view> is not supported

【讨论】：

【解决方案5】：

在我的例子中，这是 Sketch 中符号覆盖的结果，这是一种已知技术，可让您轻松更改符号的颜色。它要求您在符号（嵌套符号）中使用（颜色）符号作为掩码。这是导致问题的掩码。

我的解决方案只是创建一个原始符号的导出版本，在其中删除掩码。

【讨论】：