HTML中的内联SVG，在Firefox 3.5中的应用

Question

HTML中的内联SVG，在Firefox 3.5中的应用

firefoxsvginline

12

我尝试创建一些混合的HTML/SVG内容并遇到了一些问题。 HTML内容正常显示，但内联SVG未显示。因此，我进行了一些实验。

我发现有些网站有内联SVG的示例，它们在我的系统上可以正确渲染。所以，我“查看页面源代码”，将HTML/SVG复制/粘贴到另一个本地文件中，并在Firefox中打开此文件。没有内联SVG可见。

我也用Chrome尝试了同样的实验，结果相同。

我可能漏掉了什么？

更新
我稍微更改了我的身份：k montgomery -> kmontgom使用OpenID。

无论如何感谢所有回答者。最好的解决方案是设置Response.ContentType；这让我暂时继续使用WebForms方法。

我曾考虑过在.xml文件中制作纯XHTML内容，并使用ASP.NET MVC提供该内容。我将来可能会这样做。

现在，前进吧，用jQuery、SVG让事情发生变化。

感谢所有帮助。

- k montgomery

7个回答

11

为了在浏览器中显示内联 SVG，页面必须是 XHTML 有效的，并且必须使用 "application/xhtml+xml" MIME 类型服务器响应头进行服务。

还可以从 HTML 页面中获取内联 SVG 内容，例如可以查看这个SVG 老虎示例图像，它在 Internet Explorer（5.5+）中也可以查看。

- Sergey Ilinsky

ASP.NET示例：Response.ContentType = "application/xhtml+xml" - Jørn Schou-Rode

1

请注意，在未来的Firefox版本中，这不应该是一个问题。请参见http://hsivonen.iki.fi/test-html5-parsing/。 - sdwilsh

参考一下，这里有一个展示XHTML+多个SVG+JS的简单页面：http://phrogz.net/SVG/convert_path_to_polygon.xhtml - Phrogz

5

请确保将文件命名为“.xml”，而不是“.html”。

- Greg

谢谢！那个有效。现在的问题是如何让ASP.NET生成.XML文件而不是.HTM或.HTML。 - k montgomery

很抱歉，我不知道那个问题的答案。 - Greg

K Montgomery，我猜你可以设置一个MIME类型头，详见我的回复。 - Sergey Ilinsky

谢谢这个提示。我花了一整天的时间来尝试让它工作。即使设置meta content=application/xhtml+xml也没有用。 - Kuukage

这里有更多关于此的信息。如果文件是本地打开还是通过服务器提供的方式打开，会有不同的情况。 http://wiki.svg.org/Inline_SVG#Choosing_a_Filename_Extension - kioopi

3

如Greg所说，它必须是Firefox能够识别的XHTML文件，而不仅仅是常规HTML，这就是重命名所实现的功能。为了从服务器端应用程序获取它，您需要将响应的Content-type头设置为application/xhtml+xml。

- Paul Fisher

2

如果您使用JavaScript动态生成SVG，则可以内联使用它。不要使用:

    <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000" width="1000">
        <rect id="myrect" x="0" y="0" rx="0" ry="0" width="200" height="300" fill="yellow" stroke="purple" stroke-width="5" />
   </svg>

你写：

    <script>
        var svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
        svg.setAttribute( "xmlns", "http://www.w3.org/2000/svg/" );
        svg.setAttribute( "xmlns:xlink", "http://www.w3.org/1999/xlink" );
        svg.setAttribute( "height", "1000" );
        svg.setAttribute( "width", "1000" );
        document.body.appendChild( svg ); 
        var rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
        rect.setAttribute( "id", "myrect" );
        rect.setAttribute( "x", "0" );
        rect.setAttribute( "y", "0" );
        rect.setAttribute( "rx", "0" );
        rect.setAttribute( "ry", "0" );
        rect.setAttribute( "width", "200" );
        rect.setAttribute( "height", "300" );
        rect.setAttribute( "fill", "yellow" );
        rect.setAttribute( "stroke", "purple" );
        rect.setAttribute( "stroke-width", "5" );
        svg.appendChild( rect );
    </script>

虽然不是最理想的，但似乎能够正常工作。

- KeatsKelleher

1

对于在ASP.NET中遇到此问题的人，请将文档类型更改为HTML5，内容类型更改为application/xhtml+xml。我已在IE9、FF 3.6和Chrome 13上尝试过：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
.....
etc

在代码后台：

protected void Page_Load(object sender, EventArgs e)
{
this.Response.ContentType = "application/xhtml+xml";
}

- Moutaz Shams

0

正如其他人所指出的那样，只要您使用的是XHTML并且命名空间是正确的，您就可以在HTML中直接使用<svg>标记。

我在测试中发现，它只在Firefox 4和最近的Chrome版本中表现得非常好，但可能因人而异。对于一些内部网络上的东西，您知道每个人都在使用良好的浏览器，这是可以的。

我做了一些使用JavaScript生成内联SVG的实验。请随意查看，您可能会发现代码有用。

- Ben Hardy

谢谢Luís，现在已经修复了。 - Ben Hardy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- idij · Accepted Answer

如果您不想使用XHTML，另一种选择是将SVG数据进行base64编码。

例如：

<object type="image/svg+xml" 
        data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object>

我认为这可能不是你特定情况下想要的内容，但对于其他人可能有用。