我有一个HTML文件，然后调用一个javascript文件。 javascript文件的基本功能是绘制svg文件，并对其进行修改。例如
我正在将svg图像嵌入我的JS文件中，就像这样
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 embeded SVG doctype
我不能内联svg图像，因为它不会在safari上工作。现在由于某些限制，我无法在html中嵌入svg文件，必须通过javascript 访问它。有没有什么方法可以在javascript中使用svg图像而不使用innerHTML，，因为最终必须在safari上重新渲染图像。
PS：编译时必须将此图像复制到同一文件夹中。 https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg
答案 0 :(得分：1)
我目前在Linux中无法使用Safari进行测试，但仍会发布答案......
尝试this way。
<强> 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编码：
在IE 8和9中，未编码数据URI的使用可能会失败。
因此，您可以使用navigator.userAgent确定浏览器，如果它是IE＆gt; = 8，
然后encode the string to 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文件位置的直接链接。
更新＃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>\')';
更新＃4 - MIME类型：
UnderDog的评论：
我更改了数据类型，并且它有效..但另外我也必须这样做 配置web.config文件以添加：
<staticContent><mimeMap fileExtension=".svg" mimeType="image/svg+xml" /></staticContent>
服务器应发送正确的Content-Type标题。