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

Question

我在尝试使用

导入 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 并使它们正确显示吗？

Answer 1

解决方案 1

扁平化 Sketch and use this site 中的图像以将 SVG 转换为 xml Android

解决方案 2

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

解决方案 3

PNG

TLDR

经过一番研究，我发现矢量图形、SVG 有两种 fill-rule 属性方法，“evenodd”与“nonzero”

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

从主菜单中，选择图层 → 路径 → 反转顺序。我把图标顶部的洞弄回来了，在应用程序中也弄了个洞。

For more detail

Answer 2

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

如果您正在与设计师合作，您可以要求他们拿走图标并移除遮罩内的任何内容，然后对图标应用填充。然后让设计师导出 .svg 文件并重试导入 Android Studio。

当您尝试导入的资产是从 Sketch 或其他设计器软件导出的，并且图标是遮罩（而不是填充）时，它将与该标签一起导出。 Android Studio 只接受带填充的 .svg（这不是 iOS 的问题）

Answer 3

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

我的解决方案只是创建原始符号的导出版本，并在其中删除了遮罩。

Answer 4

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

这当然取决于设计者如何导出资产，但像这样编辑路径最总能到达您想要的位置。

Answer 5

工具 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

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

AndroidStudio import SVG with ERROR@ <mask> is not supported

android-studio

svg

vector

ide

android-vectordrawable