不支持使用ERROR @ <mask>的AndroidStudio导入SVG

Question

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

 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) 是 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

Answer 2

解决方案1

Sketch中的 Flattern图像并使用此站点将SVG转换为Android的xml

解决方案2

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

解决方案3

PNG

TLDR

经过一些研究,我发现有两种填充规则属性方法用于矢量图形,SVG,"偶数"与"非零"

我在Sketch中打开了SVG图标并检查了图标顶部的孔.正如预期的那样,它使用fill-rule:evenodd属性.现在我必须更改fill-rule以使用"nonzero"属性.怎么样？选择路径.在右侧,"填充"属性中有一个设置图标.单击它并选择"非零".

从主菜单中,选择"图层"→"路径"→"反向顺序".我在图标的顶部拿回了洞,并在应用程序中找到了洞.

更多细节

Answer 3

如果只有.svg文件,则可以手动操作.svg标记以删除掩码并应用填充内联.

如果您正在与设计师合作,您可以要求他们取出图标并移除面具内的任何内容,然后对图标应用填充.然后让设计器导出.svg文件并重新导入到Android Studio中.

当您尝试导入的资源从Sketch或其他设计器软件导出时,AND图标是一个掩码(而不是填充),它将使用该标记导出.Android Studio只接受.svg的填充(这不是iOS的问题)

Answer 4

1. 打开SVG文件并删除mask元素。您可以保留该use元素。
2. 进口
3. 打开导入的文件
4. 删除具有以下内容的最后一个元素fillType="evenOdd"
5. 更新android:fillType="nonZero"元素上的颜色

当然，这取决于设计者如何导出资产，但是像这样的编辑路径通常总是可以将您带到您想要的位置。