web-dev-qa-db-ja.com

ERROR @ <mask>を使用したAndroid StudioインポートSVGはサポートされていません

メッセージ"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をインポートして正しく表示するには?

15
UmAnusorn

ソリューション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」プロパティに設定アイコンがあります。それをクリックして、「ゼロ以外」を選択します。

メインメニューから、レイヤー→パス→逆順を選択します。アイコンの上部に穴を開けて、アプリにも穴を開けました。

詳細

6
UmAnusorn
  1. SVGファイルを開き、mask要素を削除します。 use要素を保持できます。
  2. インポート
  3. インポートしたファイルを開く
  4. HasfillType="evenOdd"の最後の要素を削除します
  5. Android:fillType="nonZero"要素の色を更新します

これはもちろんデザイナーがどのようにアセットをエクスポートするかに依存しますが、このような編集パスはたいていいつでもあなたが望む場所に行きます。

5
VonSchnauzer

.svgファイルしか持っていない場合は、.svgマークアップを手動で操作してマスクを削除し、インラインで塗りつぶしを適用できます。

デザイナーと作業している場合は、アイコンを取り、マスク内にあるものをすべて削除し、代わりにアイコンに塗りを適用するように依頼できます。次に、デザイナーに.svgファイルをエクスポートしてもらい、Android Studio。

インポートしようとしているアセットがSketchなどのデザイナーソフトウェアからエクスポートされる場合、かつアイコンがマスク(塗りつぶしではなく)であり、そのタグでエクスポートされます。 Android Studioは塗りつぶしのある.svgのみを受け入れます(これはiOSの問題ではありません)

4
velasco622

私の場合、これはSketchのシンボルオーバーライドの結果であり、シンボルの色を簡単に変更できる既知の手法です。シンボル(ネストされたシンボル)内の(色)シンボルをマスクとして使用する必要があります。これが問題を引き起こしていたマスクです。

私の解決策は、マスクを削除する元のシンボルのエクスポートバージョンを作成するだけでした。

0
jessems