12

HTML と SVG が混在するコンテンツを作成しようとしていますが、問題が発生しています。HTML コンテンツは期待どおりに表示されますが、インライン SVG は表示されません。それで、私はいくつかの実験をします。

インライン SVG の例があるサイトを見つけましたが、それらは私のシステムで正しく表示されます。そこで、「ページのソースを表示」して HTML/SVG を別のローカル ファイルにコピー アンド ペーストし、このファイルを Firefox で開きます。インライン SVG は表示されません。

Chrome でも同じ実験を試みましたが、同じ結果でした。

何が欠けている可能性がありますか？

更新
私の側のアイデンティティのわずかな変更: k montgomery -> OpenID の使用に関する kmontgom。

とにかく、答えてくれたすべての人に感謝します。最善の解決策は、Response.ContentType を設定することでした。これにより、今のところ WebForms アプローチを続けることができます。

私は純粋な XHTML コンテンツを .xml ファイルで作成し、ASP.NET MVC を使用してそのコンテンツを提供することを考えていました。将来的にはそうするかもしれません。

さて、jQuery、SVG、そして物事を何かに変えてみましょう。

すべての助けをありがとう。

4

7 に答える 7

13

XHTML を実行したくない場合の代替手段は、SVG データを base64 エンコードすることです。

例えば

<object type="image/svg+xml" 
        data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object>

これはおそらくあなたの状況に特に必要なものではないと思いますが、とにかく、他の人にとっては役立つかもしれません.

于 2010-07-29T17:06:53.023 に答える
11

インライン SVG をブラウザーに表示するには、ページが XHTML で有効であり、application/xhtml+xml MIME タイプのサーバー応答ヘッダーで提供される必要があります。

HTML ページからインライン SVG コンテンツを取得することも可能です。Internet Explorer (5.5+) でも表示できるSVG Tiger画像の例を参照してください。

于 2009-07-11T20:47:28.110 に答える
5

ファイル名は必ず「.html」ではなく「.xml」にしてください。

于 2009-07-11T20:30:54.540 に答える
3

Greg が言ったように、Firefox が単なる通常の HTML ではなく、XHTML ファイルとして認識するファイルである必要があります。Content-typeサーバー側アプリからそれを取得するには、応答のヘッダーをに設定する必要がありますapplication/xhtml+xml。

于 2009-07-11T20:48:21.073 に答える
2

JavaScript を使用して SVG を動的に生成すると、インラインで動作します。それ以外の：

    <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000" width="1000">
        <rect id="myrect" x="0" y="0" rx="0" ry="0" width="200" height="300" fill="yellow" stroke="purple" stroke-width="5" />
   </svg>

あなたが書く：

    <script>
        var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
        svg.setAttribute( "xmlns", "http://www.w3.org/2000/svg/" );
        svg.setAttribute( "xmlns:xlink", "http://www.w3.org/1999/xlink" );
        svg.setAttribute( "height", "1000" );
        svg.setAttribute( "width", "1000" );
        document.body.appendChild( svg ); 
        var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
        rect.setAttribute( "id", "myrect" );
        rect.setAttribute( "x", "0" );
        rect.setAttribute( "y", "0" );
        rect.setAttribute( "rx", "0" );
        rect.setAttribute( "ry", "0" );
        rect.setAttribute( "width", "200" );
        rect.setAttribute( "height", "300" );
        rect.setAttribute( "fill", "yellow" );
        rect.setAttribute( "stroke", "purple" );
        rect.setAttribute( "stroke-width", "5" );
        svg.appendChild( rect );
    </script>

理想的ではありませんが、うまくいくようです。

于 2011-07-21T19:07:39.113 に答える
1

ASP.NET でこの問題を抱えている人のために、doctype を HTML5 に、content-type を application/xhtml+xml に変更してください。IE9、FF 3.6、および Chrome 13 で試しました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
.....
etc

コード ビハインドでは次のようになります。

protected void Page_Load(object sender, EventArgs e)
{
this.Response.ContentType = "application/xhtml+xml";
}
于 2011-08-14T23:41:59.237 に答える
0

他の人が指摘しているように、XHTML を使用していて名前空間が正しい限り、問題はありません。HTML のすぐそこにある <svg> タグを使用できます。

テストでは、Firefox 4 と最近の Chrome ビルドでのみうまく機能することがわかりましたが、YMMV. 誰もが適切なブラウザを使用していることがわかっているイントラネット上のものについては、これで問題ありません。

JavaScript を使用してインライン SVG を生成する実験を行いました。お気軽にチェックしてください。コードが役立つ場合があります。

于 2011-06-12T15:15:26.507 に答える