16

次のように、FF にグレーアウト画像を追加するためのフィルターを含む css があります。

filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

YUI コンプレッサーを使用すると、フィルター値間のすべてのスペースが削除され、次のようになります。

.desaturate{filter:url("data:image/svg+xml;utf8,<svgxmlns='http://www.w3.org/2000/svg'><filterid='grayscale'><feColorMatrixtype='matrix'values='0.33330.33330.3333000.33330.33330.3333000.33330.33330.33330000010'/></filter></svg>#grayscale")}

FFで役に立たなくなるスペースを削除します。

また、それを .svg ファイルに移動しようとしましたが、FF でクロスドメインの問題が発生します。どうすればこの問題を解決できるかについて誰かが考えているかどうか提案してください。

4

5 に答える 5

1

文字列のURL部分（from<svgから</svg>）はURLエンコードする必要があります。または、;base64後;utf8にBase64を配置して、代わりにURLをエンコードすることもできます。

しかし、URLでスペースを使用するのは正しくありません...それがYUIコンプレッサーがそれを台無しにしている理由です。

于 2013-03-16T20:00:03.510 に答える
0

feColorMatrix値の間にコンマを追加できます。

<feColorMatrix type=\'matrix\' values=\'0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0.3333,0.3333,0.3333,0,0,0,0,0,1,0\'/>

しかし、それは間のスペースの問題を修正しません：svg xmlns

それも理解したいと思います。

于 2013-01-21T16:00:15.593 に答える
0

すでに最新バージョン (2.4.7) を使用している場合、これはおそらく彼らの CSS ミニファイヤが説明していないものであり、http://yulibrary.com/projects/ でバグ レポートを提出することをお勧めします。 yuicompressor/

この場合に役立つ構成オプションは見当たりませんでした。たとえば、ブロックを 1 行に縮小し、その間の空白を削除しませんでした。

于 2012-12-20T02:05:48.893 に答える
0

コンプレッサーの PHP ポート ( https://github.com/tubalmartin/YUI-CSS-compressor-PHP-portextract_data_urls ) でこの問題に遭遇し、メソッドの行まで追跡しました。

これにより、css の本体からデータの URL が (その名前から想像できるように) 抽出され、縮小されるのを防ぎます。ただし、保存する前に少し処理を行います。

$token = preg_replace('/\s+/', '', $token);

これにより、一連の空白文字が何も置き換えられないため、SVG タグからすべてのスペースが削除されます。この行を次のように変更します。

$token = preg_replace('/\s+/', ' ', $token);

単一のスペースを残すことで問題を修正しました。

PHP バージョンは Java 圧縮プログラムの直接のポートであるため、これと同じバグであると思います。

于 2013-01-30T14:20:24.237 に答える