0

HTML ファイルがあり、JavaScript ファイルを呼び出しています。JavaScript ファイルの基本的な機能は、svg ファイルを描画し、それに変更を加えることです。例えば

このようにJSファイルにsvg画像を埋め込んでいます

this.my_object.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';

さて、この投稿によると、 SafariにはSVG doctypeが埋め込まれています

サファリで動作しないため、svg 画像をインライン化できません。特定の制限により、svg ファイルを html に埋め込むことができないため、javascript を介してアクセスする必要があります。innerHTMLを使用せずにJavaScriptでsvgイメージを使用できる方法はありますか?最終的にイメージをサファリで再作成する必要があります。

PS: このイメージは、コンパイル時に同じフォルダーにコピーする必要があります。 https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

4

1 に答える 1

1

私は現在 Linux を使用しており、Safari でテストすることはできませんが、それでも回答を投稿します...

このようにしてみてください。

HTML:

<div id="image-container"></div>​

JavaScript:

var container = document.getElementById('image-container'),
    image = document.createElement('img');
image.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';
container.appendChild(image);
​

更新 #1 - データ URI エンコーディング:

エンコードされていないデータ URI の使用は、IE 8 および 9 で失敗する場合があります。

したがって、を使用してブラウザを特定できnavigator.userAgent、それが IE >= 8 の場合は、文字列を Base64にエンコードしてから の値として割り当てますimage.src。

更新 #2 -objectタグの使用:

var container = document.getElementById('image-container'),
    imageObject = document.createElement('object');
imageObject.type = 'image/svg+xml';
imageObject.data = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>';
container.appendChild(imageObject);

データ URI または .svg ファイルの場所への直接リンクを設定できます。

objectデモ

更新 #3 - CSS アプローチ:

var container = document.getElementById('image-container');
container.style.width = '100px';
container.style.height = '100px';
container.style.backgroundPosition = 'center';
container.style.backgroundImage = 'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image xlink:href="img/gauge.png" width="122" height="127"/><g id="needle" transform="rotate(0,62,62)"><circle cx="62" cy="62" r="4" style="fill: #c00; stroke: none"/><rect transform="rotate(-130,62,62)" name="arrow"  x="58" y="38" width="8" height="24" style="fill: #c00; stroke: none"/><polygon transform="rotate(-130,62,62)" points="58,39,66,39,62,30,58,39" style="fill: #c00; stroke: none"/></g><text id="value" x="35" y="103" focusable="false" editable="no" style="stroke:none; fill:#fff; font-family: monospace; font-size: 12px"></text></svg>\')';

​

CSSアプローチのデモ

更新 #4 - MIME タイプ:

UnderDog のコメント:

データ型を変更したところ、うまくいきました..しかし、さらに、これを追加するにはweb.configファイルを構成する必要がありました：

<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" /></staticContent>

サーバーは正しいContent-Typeヘッダーを送信する必要があります。

于 2012-08-17T21:51:02.727 に答える