2

単純なグラフィックの背景をテーブルセルに配置したいプロジェクトがあります。background-imageと小さなsvgファイルはうまく機能します！

しかし、私は本当にソースをすべて1つのファイルに保持したいと思います。つまり、HEADで画像を定義し、インラインSTYLEcssでそれを参照できるようにしたいと思います。

svgのID属性とcssurl（）関数のハッシュ参照のさまざまな組み合わせを試しましたが、成功しませんでした。これは望ましいことのように思われますが、周りを見回しても、アイデアのヒントは見当たりません。それは私にそれができないか、またはそれが他の方法で行われていることを教えてくれます...

提案？

4

3 に答える 3

1

実際、質問をして考えてみると、すでに回答を読んでいることに気付きました。インライン SVG グラフィックを作成するには、データ URL を使用する必要があります。これは、次のように css クラスの background-image プロパティに与えることができます。

{background-image:url( "data:image/svg+xml;utf8,\ ...\ ");}

エンコーディング utf8 を使用すると、コードを直接入力して、新しい行をバックスラッシュでエスケープし、二重引用符を避けることができます (私の知る限り;-)。TD の CLASS を設定するだけで、うまく機能します。

今私がしなければならないのは、背景を上ではなく下に揃える方法を理解することです...

于 2012-05-21T21:51:16.217 に答える
1

svg ファイルを別の場所に保存して、iframe に入れることができます。

<iframe src="index.svg" width="100%" height="100%" />

他の方法もあるかもしれません..

svg に最適なツールはMDNにあります。

于 2012-05-08T20:02:50.547 に答える
0

このコードも機能する可能性があります。

 <svg>
    <use xlink:href="..." /> 
 </svg>
于 2012-11-23T09:35:16.460 に答える