5

Geckoブラウザ/Firefoxに-webkit-maskに相当するものがあるかどうかについての確かな答えを探していますか？

そうでない場合、CSSの-webkit-maskをまっすぐな背景画像の取引に劣化させる方法はありますか、それともJavascriptをあきらめて使用する必要がありますか？

どうもありがとう！

4

4 に答える 4

5

Firefoxをターゲットにしている場合、Firefoxは優れたSVGサポートを備えているため、CSSの代わりにSVGマスクを使用できるようになりました。これは、SVG Webkitマスクでマスクを実行する方法に関するMozillaのドキュメントであり、標準のトラックではありません。したがって、クロスブラウザで表示されることはないかと個人的に疑問があります。

于 2011-05-04T17:59:27.240 に答える
3

これに何時間も苦労した後、私はついに複雑なSVGパスを自分のサイトのdiv要素のマスクとして適用することができました。これはFirefoxで機能します。これが私がしたことです：

まず、Webkitブラウザーの場合、ソリューションは理想的であり、マスクしたいdivと同じサイズ（または実際には同じ形状、異なるスケールである可能性があります）のフラット化されたpngファイルを作成する必要がありました。黒で表示したいので、切り抜いたい部分を透明にします。次に、マスクするdiv要素のCSSに次の行を追加しました。

-webkit-mask-box-image: url(path/to/mask.png);

簡単でした！それでは、Firefoxでこれを機能させることの楽しい部分に取り掛かりましょう。この方法が機能するには、ベクトル形状がマスクする領域とまったく同じサイズである必要があります。したがって、私のマスクはFireworksで設計された比較的複雑なベクトルパスであり、SVGパスに変換する必要があります。ありがたいことに、Illustratorを使用できます。それ以外の場合は、お気に入りのSVGエディターを使用してシェイプパスをSVGに変換します。Fireworksを使用してベクターシェイプを描画している場合は、使用するベクターシェイプを右クリックし、[編集]-> [パスアウトラインのコピー]に移動して、十分な大きさに貼り付けることができます。 Illustrator、または使用しているSVGエディターのドキュメント。

次に、それをSVGファイルにエクスポートする必要があります。Illustratorでは、「Web用にエクスポート」機能を使用し、SVG形式、バージョン1.0を選択して、SVGファイルにエクスポートしました。パスの説明の直後にあるため、位置とドキュメントサイズは実際には重要ではなく、残りは破棄します。

そこで、テキスト編集やメモ帳などのテキストエディタで作成したSVGファイルを開きます。XHTML形式のコンテンツがいくつか表示されますが、特に1つの要素は次のようなものです。

<path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>

複雑な形状の場合、このd="..."部分はおそらく何行も長くなります。これは、私たちが気にするこのSVGファイルの唯一の部分です。

次に、このパスを記述するSVGマスクをサイトのHTMLに埋め込む必要があります。まず、HTMLに次の要素を追加しましょう。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="maskid" maskUnits="userSpaceOnUse"> 
            <path fill="white" d=""/>
        </mask>
    </defs>
</svg>

ここで、前に保存したSVGファイル（つまりM0,43v0 ...）からpath要素のプロパティの内容をコピーし、埋め込まれたSVGのマスク要素のpath要素d=""の同じプロパティに貼り付けるだけです。d=""次に、マスクする要素のCSSに次のエントリを追加できます。

mask: url("#maskid");

それでおしまい。これで、パスが指定した要素にマスクとして適用されます。

于 2012-03-10T21:02:08.250 に答える
1

これがトリックです。svgファイルで生成されたすべてのポイントを、ポイントパスをマスクの寸法で割った比率に変換する必要があります。

説明を簡単にするために、デザイナーがsvgをfirefoxと互換性のあるマスクに変換するのに役立つクイックツールを作成しました。私のWebサイト（http://www.prollygeek.com）、たとえばfacebookでライブデモを見ることができます。ロゴ、およびTwitterロゴは単なるマスクであり、svgをマスクに変換するために使用できるツールは次のとおりです。http： //prollygeek.com/svg-mask/

例えば：

<mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311
c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>

次のようになります：

<mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>

この属性style="fill-rule：evenodd; clip-rule：evenodd; fill：#ffffff;"を追加することを忘れないでください。

どんな色でも塗りつぶしても構いません。

その後、マスクを必要なcss要素にリンクします。

例えば：

  mask:url(images/fb.svg#fb);

電卓は無料で使用できますが、他の場所にコピーしたり公開したりしないでください。

于 2013-11-23T16:44:46.043 に答える
0

GeckoのHTMLコンテンツにcssを使用してsvgフィルターを適用できます。これは、Mozillaコードをいじるのが好きな人の例です。2008年のものなので少し時代遅れかもしれません。

于 2011-05-04T17:44:20.010 に答える