メッセージ"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をインポートして正しく表示するには?
ソリューション1
Sketch のFlatternイメージおよび このサイト を使用して、SVGをAndroidのxmlに変換します
ソリューション2
EvenOddの代わりにnonZeroを使用し、pathDataを変更してAndroid:fillTypeを削除すると順序が逆になるようにSketchで開き、Android 21+。
ソリューション3
PNG
TLDR
いくつかの調査の結果、ベクターグラフィックスにはSVGである「偶数」対「非ゼロ」の2つのfill-ruleプロパティメソッドがあることがわかりました。
SketchでSVGアイコンを開き、アイコンの上部にある穴を調べました。予想どおり、fill-rule:evenoddプロパティを使用します。ここで、「非ゼロ」プロパティを使用するようにfill-ruleを変更する必要があります。どうやって?パスを選択します。右側の「Fills」プロパティに設定アイコンがあります。それをクリックして、「ゼロ以外」を選択します。
メインメニューから、レイヤー→パス→逆順を選択します。アイコンの上部に穴を開けて、アプリにも穴を開けました。
mask
要素を削除します。 use
要素を保持できます。fillType="evenOdd"
の最後の要素を削除しますAndroid:fillType="nonZero"
要素の色を更新しますこれはもちろんデザイナーがどのようにアセットをエクスポートするかに依存しますが、このような編集パスはたいていいつでもあなたが望む場所に行きます。
.svgファイルしか持っていない場合は、.svgマークアップを手動で操作してマスクを削除し、インラインで塗りつぶしを適用できます。
デザイナーと作業している場合は、アイコンを取り、マスク内にあるものをすべて削除し、代わりにアイコンに塗りを適用するように依頼できます。次に、デザイナーに.svgファイルをエクスポートしてもらい、Android Studio。
インポートしようとしているアセットがSketchなどのデザイナーソフトウェアからエクスポートされる場合、かつアイコンがマスク(塗りつぶしではなく)であり、そのタグでエクスポートされます。 Android Studioは塗りつぶしのある.svgのみを受け入れます(これはiOSの問題ではありません)
私の場合、これはSketchのシンボルオーバーライドの結果であり、シンボルの色を簡単に変更できる既知の手法です。シンボル(ネストされたシンボル)内の(色)シンボルをマスクとして使用する必要があります。これが問題を引き起こしていたマスクです。
私の解決策は、マスクを削除する元のシンボルのエクスポートバージョンを作成するだけでした。