3

我正在尝试在我的主页上使用 svg-image，基本上使用以下代码：

<html><head/><body>
<img src="images/avatar.svg" width="135mm" height="210mm"/>
</body></html>

在我的电脑上一切正常（带有 apache-server 的 Linux），但是在传输到非常有限的主机后，图像不再显示。（注：用 Chrome29 和 Opera12 测试）

原因：它在 'text/xml' 而不是 'image/svg+xml' 下传输

我正在寻找一种在我的主页上显示此图像的方法，最好不要丢失 img-tag。

关于这个的棘手部分：

  • 我无权访问魔术文件
  • 我不允许上传 .htaccess
  • 我没有服务器端脚本
  • 我不想使用 (i) 帧
  • 基本上我只能添加 (x)html, css, javascript

为了缓解一些限制：

  • 它不需要在IE下工作

编辑： 是否已经联系了支持人员，他们声称他们的主机可以正常工作。所以这就是我寻找解决方案的原因（目前使用.png，但对此不满意）

4

2 回答 2

3

您可以使用数据 URI（您自己指定内容类型），或者您可以使用允许内联 SVG 的 HTML5（这需要您删除 img 标签）。

http://jsfiddle.net/zy96L/4/：

<!doctype html>
<head><title>Red circle</title>
<body>
    <img alt="red circle" src="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'><circle%20fill='red'%20cx='50'%20r='50'%20cy='50'%20/></svg>" />

（甚至验证）

于 2013-07-09T20:20:20.907 回答
0

Janus Troelsen的回答设法帮助我解决了这个问题。

我没有直接将图像嵌入到 HTML 中，而是使用一些 javascript 来检索图像：

<script type="text/javascript">
     function getSVG(source)
     {
             xmlhttp = new XMLHttpRequest();
             xmlhttp.open("GET", source, false);
             xmlhttp.send();
             return "data:image/svg+xml," + xmlhttp.responseText;
     }
</script>
<img src="images/avatar.svg"
     onerror="this.onerror = null;
              this.src = getSVG('images/avatar.svg')"/>

这对服务器有效！

于 2020-06-29T07:16:25.930 回答