替换 InnerHTML

Question

我有一个 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 访问它。有什么办法可以在不使用innerHTML 的情况下在 javascript 中使用 svg 图像，因为最后必须在 safari 上重新渲染图像。

PS: 编译时必须将此图像复制到同一文件夹中。 https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

Answer 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 >= 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 文件位置。

object DEMO

更新 #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>\')';

​

DEMO of CSS approach

更新 #4 - MIME 类型：

UnderDog评论：

我改变了数据类型，它工作了..但另外我还必须 配置 web.config 文件来添加这个：

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

服务器应该发送正确的Content-Type 标头。