替代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嵌入式SVG文档型

我不能内联svg图像，因为那样的话，它将无法运行在狩猎。现在，由于某些限制，我不能将svg文件嵌入到html中，因此必须通过javascript访问它。有没有任何方法可以在javascript中使用svg映像而不使用innerHTML、，因为最终必须在safari.上重放该图像。

PS:在编译时，这个图像必须复制在同一个文件夹中。n.jpg

Answer 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的使用可能在IE8和9中失败。

因此，您可以使用navigator.userAgent确定浏览器，如果浏览器是IE >= 8，则在将浏览器赋值为image.src之前，先确定将字符串编码为Base64。

使用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);

可以设置到.svg文件位置的数据URI或直接链接。

演示

更新#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头。