問題タブ [inline-svg]

プロジェクトの svg スプライトシートを作成するために、インライン svg コンセプトを使用する予定です。

svg スプライトシートを作成するには、実際には多くの方法があります。スプライトシートを作成するには、(パフォーマンスのために) 2 つの方法を使用しました。それらは次のとおりです。

• symbol一意の ID を持つタグを使用して各 svg のコンテンツをラップすることにより、すべての svg を単一の svg にグループ化します。これにより、後でuseHTML でタグを使用してこれを参照できます。
• background-imagecssプロパティを介して参照されるすべての svg を含む css ファイルを生成します。各 svg には一意のクラス名があります。

今、私はどの方法を正確に使用するかというジレンマに陥っています。参考までに、私は意見を求めているのではなく、パフォーマンスと最適なソリューションを検討しているため、これは意見に基づく質問ではありません。

PS: gulp タスク ランナーを使用して svg スプライト シートを生成できます。

use要素内のsvg要素を左端に揃えようとしています。試しtext-align: leftてみtext-anchor: startましたが、まだ use 要素が svg 要素の真ん中にあります。

ここにフィドルがあります

私の Rails アプリの特定のページは、inline_svggem を使用しているページに svg があると Safari 完全にクラッシュするようです。

ページに移動すると、「Safari Web コンテンツが予期せず終了しました」というエラー メッセージが表示されます。

これは、SVG レンダリングの問題であると思われるスタック トレースの一部です。

svg 自体は次のようになります。

アイコンの一部を再利用する必要がある SVG を使用してアイコン ソリューションを構築しています。<svg />私の HTML ドキュメントにはいくつかの異なる要素がインラインであり、この<use />要素は svg 要素間であっても形状 (四角形、パスなど) を再利用するのに完璧に機能します。

ただし、他の定義を再利用すること<radialGradient />はできません。グラデーションが<defs />同じ<svg />要素内の要素内で定義されている場合は期待どおりに機能しますが、グラデーションが別の<svg />要素で定義されている場合は機能しません。

疑似コード

use他の要素から形状を作成できるのにsvg、このような属性値を作成できないのはなぜですか? 目に見える svg 要素内の要素にshadowグラデーションを移動すると、参照は完全に機能します。defs

これは、機能している場合と機能していない場合の両方を示す JSFiddle です: https://jsfiddle.net/7tfna0L8/2/

ソリューション

Robert Longsonは、私の再利用可能な svg の「リポジトリ」にstyleはdisplay:none. 私にとっては、これが正しい方法のように感じます。結局のところ、このリポジトリは決して表示されるべきではありません。問題は、ブラウザがおそらくスタイルをまったく解析しないことでこれを最適化することです。これにより、要素を参照できますが、スタイル は参照できません（私のグラデーションのように）

jsFiddle の作業: https://jsfiddle.net/atornblad/7tfna0L8/3/

HTMLのグリフィコンと同じようにsvgで動作することは可能ですか?

インライン svg を現在のフォント サイズにスケーリングし、現在の色/背景色を使用することを意味しますか?

あとがき:「svg-glyph」のサイズを「1em」で操作することは可能ですが、1 em は少し不適切な値であることに注意してください。大文字より大きく、行の高さより小さくなります。

どういうわけか、html から fill と viewport を継承できるはずですが、方法がわかりません。

PS javascript で可能であるはずですが、javascript ソリューションを使用しないままにしておきます。

インライン svg の ID を svg のみに制限することは可能ですか?

例えば

ここでは、ページにグローバル ID "linear" が作成されています。

どうすればこれを防ぐことができますか?

document.getElementById("linear")つまり、私は戻りたいですundefined。

または、ID を使用せずにグラデーションを適用できるように、svg 内の項目を参照する別のメカニズムはありますか?

関連：インラインSVGの重複（フィルター）ID

e コマース プラットフォームを使用していますが、d3 やその他の svg ライブラリをインストールできません。セキュリティ上の理由から、このサイトでは「外部ソース」を持つ iframe を操作することはできません。どうやら、すべての iframe は外部のものですが、何でも構いません。

だから私が頼ったのは、svgをdivタグに挿入しようとすることです。私のコードが機能しない理由がわからない。svg などを追加する必要がありますか? 押すと円が赤に変わるはずです。