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 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

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 编码：

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

因此，您可以确定使用的浏览器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方法的DEMO

更新 #4 - MIME 类型：

UnderDog的评论：

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

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

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

于 2012-08-17T21:51:02.727 回答