問題タブ [svg-sprite]

疑似コンテンツに適用する透明度のある画像スプライトを使用しています。画像の周りに色付きの丸い境界線が必要です。

これは私がこれまでに持っているものです: http://codepen.io/anon/pen/bpmGaz

ただし、次のようにする必要があります。

追加の疑似コンテンツ (以下を参照) を使用してこれを行うことができますが、コードが少し乱雑になっています。これを行うためのより短い方法はありますか？

http://codepen.io/anon/pen/VaEwQy

アウトライン プロパティを使用してみましたが、残念ながら、border-radius を使用したクロス ブラウザーでは機能しません。

gulp-svg-sprite を使用しています https://github.com/jkphl/gulp-svg-sprite

同じアイコンを異なるサイズで使用することはできますか? スプライトする前は、これは簡単で、実際、SVG について私が最も気に入っていることの 1 つでした。

http://codepen.io/anon/pen/qZQvYN

ただし、スプライトを使用しているため、バックグラウンドサイズはミックスインから取得されるため、このソリューションを使用できません。これを上書きしたとしても、background-position がおかしくなってしまいます。

http://codepen.io/anon/pen/JXezaK

gul-svg-スプライト 1.2.19

作成されたファイルの宛先を決定するために gulp-svg-sprite に渡される構成オブジェクトに多くの問題があります。出力先に関するドキュメントセクションを読み、この問題に関する他のStackOverflow ボードを読みました。

Gulp タスクは次のとおりです。

これは私が得たいと思っているものです:

代わりに、これは私が得るものです:

mode.dest の値を変更するか、「mode」の兄弟として「dest」設定を追加しようとしましたが、違いはありません。基本的に、何を書いてもファイルは常に同じ場所に保存されます。私の設定は無視されていると思います。たとえば、sprite:"mysprite.svg" をモード設定に追加しても、ファイルは同じ場所に "sprite.defs.svg" として保存されます。

何が起こっているのでしょうか？

を使用し<use xlink:href>てファイルを参照していsvgます。
ローカルでは問題なく動作しますが、CDN から参照するとエラー (CORS) がスローされます。CORSxlink:hrefリクエストが許可されていないように見えますが、解決策があるかどうか疑問に思っています。

一方、このスプライト手法はSVG2 では非推奨になっていると聞いています。モバイルブラウザを含むすべての異なるブラウザで動作するスプライトSVGファイルを今のところ使用するための最良の解決策は何ですか.

SVG の一部をタイリング背景として使用しようとしています。しかし、私はそれを適切に機能させるのに大きな問題を抱えています。

写真が問題を最もよく表していると思います: デモンストレーション写真

これは私のCSSです：

そして、これがデモに使用している SVG のコードです。

ご覧のとおり、SVG の完全なビューボックスは 0 0 360 100 です。CSS で SVG を呼び出すと、120 32 150 64 の新しいビューボックスが与えられ、それに応じて背景のサイズが変更されます (ただし、ビューボックスで定義されたsvgは、サイズに関係なくコンテナを埋めるために拡張されるはずなので、とにかくこれは問題にならないはずです.

SVG のビューボックス、幅と高さ、preserveAspectRatio 属性をいじってみましたが、これまでのところ何も機能していません。私は何を間違っていますか？