HTML内联SVG，使用Firefox 3.5_Firefox_Svg_Inline

HTML内联SVG，使用Firefox 3.5

firefox svg

HTML内联SVG，使用Firefox 3.5,firefox,svg,inline,Firefox,Svg,Inline,我试图创建一些混合HTML/SVG内容，但遇到了一些问题。HTML内容按预期显示，但内联SVG没有显示。所以，我做了一些实验我找到了一些有内联SVG示例的站点，它们在我的系统上正确呈现。因此，我“查看页面源代码”并将HTML/SVG复制/粘贴到另一个本地文件中，然后在Firefox中打开该文件。没有可见的内联SVG 我也用铬做了同样的实验，同样的结果我可能会错过什么更新我的身份略有改变：k蒙哥马利->使用OpenID的kmontgom 无论如何，感谢所有回答的人。最好的解决方案是设置Re

我试图创建一些混合HTML/SVG内容，但遇到了一些问题。HTML内容按预期显示，但内联SVG没有显示。所以，我做了一些实验

我找到了一些有内联SVG示例的站点，它们在我的系统上正确呈现。因此，我“查看页面源代码”并将HTML/SVG复制/粘贴到另一个本地文件中，然后在Firefox中打开该文件。没有可见的内联SVG

我也用铬做了同样的实验，同样的结果

我可能会错过什么

更新
我的身份略有改变：k蒙哥马利->使用OpenID的kmontgom

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

我曾考虑在.xml文件中创建纯XHTML内容，并使用ASP.NETMVC提供这些内容。我将来可能会这样做

现在，继续使用jQuery、SVG，并让它做一些事情

感谢所有帮助。

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

为了在浏览器中显示内联SVG，页面必须是XHTML有效的，并且必须使用应用程序/XHTML+xmlmime类型服务器响应头

也可以从HTML页面中提取内联SVG内容，请看一个也可以在Internet Explorer（5.5+）

中查看的图像示例。正如Greg所说，它需要是一个Firefox识别为XHTML文件的文件，而不仅仅是常规HTML，这就是重命名所实现的。为了从服务器端应用程序中获取该信息，您需要将响应的

内容类型

标题设置为

application/xhtml+xml

如果不想使用xhtml，另一种方法是对SVG数据进行base64编码

e、 g

我认为这可能不是你想要的专门针对你的情况，但无论如何，可能对其他人有用。

正如其他人所指出的，只要你使用的是XHTML，并且你的名称空间是正确的，你就可以开始了——你可以在HTML中直接使用标记

我在测试中发现，它只在Firefox4和最近的Chrome版本中运行得非常好，但在YMMV中却没有。对于内联网上的东西，你知道每个人都在使用一个像样的浏览器，这很好

我做了一些。请随意查看，您可能会发现该代码很有用。

如果您使用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>


var svg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
setAttribute（“xmlns”http://www.w3.org/2000/svg/" );
setAttribute（“xmlns:xlink”http://www.w3.org/1999/xlink" );
setAttribute（“高度”、“1000”）；
setAttribute（“宽度”、“1000”）；
document.body.appendChild（svg）；
var rect=document.createElements（“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（“宽度”、“200”）；
rect.setAttribute（“高度”、“300”）；
rect.setAttribute（“填充”、“黄色”）；
矩形设置属性（“笔划”、“紫色”）；
rect.setAttribute（“笔划宽度”、“5”）；
appendChild（rect）；

这并不理想，但似乎有效。

对于ASP.NET有此问题的用户，请将doctype更改为HTML5，将content type更改为application/xhtml+xml，我在IE9、FF 3.6和Chrome 13上试用过：

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

谢谢这很有效。现在，下一个问题是如何使ASP.NET生成一个.XML文件，而不是.HTM或.HTML'fraid。我不知道这个问题的答案。蒙哥马利，我想你可以设置一个mime类型的头，有关详细信息，请参阅我的答复。谢谢你的提示。我花了一整天的时间试图让这一切顺利进行。甚至设置meta-content=application/xhtml+xml也不起作用。如果文件是在本地打开的，或者是提供服务的，则会出现不同的情况。ASP.NET示例：

Response.ContentType=“application/xhtml+xml”

请注意，这在未来版本的Firefox中不应该是一个问题。请参阅以供参考，这里有一个显示XHTML+多个SVG+JS的简单页面：这是一个有趣的机制，但有局限性（特别是由于不一致的浏览器支持）。这里还有一些附加信息：谢谢Luís，现在已经修复了。

<!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";
}