替换InnerHTML [英] Replacing InnerHTML

问题描述

我有一个HTML文件，然后调用一个javascript文件。 javascript文件的基本功能是绘制svg文件，并对其进行修改。例如

I have a HTML file, which is then calling a javascript file. Basic function of the javascript file is to draw a svg file, and do modifications on it. for example

我在我的JS文件中嵌入了svg图像，如下所示

I am embedding the svg image in my JS file like this

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图像，因为它不会在野生动物园工作。现在由于某些限制我无法在html中嵌入svg文件，必须通过javascript 访问。有没有什么方法svg图像可以在javascript中使用而不使用 innerHTML ，最终图片必须在safari上重新加入。

I cant inline svg image because then it wont work on safari. Now due to certain restrictions I cant embed svg file in html, it has to be accessed through javascript. Is there any way svg image can be used in javascript without using innerHTML, as finally the image has to be renedered on safari.

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

PS: This image has to be copied in the same folder when compiling. https://sphotos-b.xx.fbcdn.net/hphotos-snc6/179594_10150982737360698_1827200234_n.jpg

推荐答案

我目前在Linux中无法测试Safari，但仍会发布答案......

I'm currently in Linux and can't test with Safari, but still will post the answer...

尝试在 这种方式 。

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);
​

UPDATE＃1 - 数据URI编码：

在IE 8和9中，未编码数据URI的使用可能会失败。

The usage of unencoded data URI might be failed in IE 8 and 9.

因此您可以确定浏览器使用 navigator.userAgent ，如果IE> = 8，
则将字符串编码为Base64 ，然后将其指定为 image.src 的值。

So you can determine the browser using navigator.userAgent and if it's IE >= 8, then encode the string to Base64 before assigning it as value of image.src.

更新＃2 - 使用对象标记：

UPDATE #2 - using object tag:

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

​You can set either the data URI or direct link to .svg file location.

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

​

CSS方法的演示

UPDATE＃ 4 - MIME类型：

UnderDog ：

我更改了数据类型，并且它工作了..但另外我还需要
配置web.config文件到添加：

I changed the datatype, and it worked.. but additionally I also had to configure web.config file to add this:

< staticContent>< mimeMap fileExtension =。svgmimeType =image / svg + xml/>< / staticContent>

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

The server should send correct Content-Type header.

这篇关于替换InnerHTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！