Question

我正在尝试创建一些混合的HTML / SVG内容并遇到一些麻烦。 HTML内容按预期显示，但内联SVG没有。所以，我做了一些实验。

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

我也尝试过与Chrome相同的实验，结果相同。

我可能会遗失什么？

更新
我的身份略有变化：k montgomery - ＆gt; kmontgom使用OpenID。

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

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

现在，继续使用jQuery，SVG，让事情做点什么。

感谢您的帮助。

Answer 1

如果您不想做XHTML，另一种方法是对SVG数据进行base64编码。

e.g。

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

我认为这可能不是您特别想要的情况，但无论如何，可能对其他人有用。

Answer 2

为了在浏览器中显示内联SVG，页面必须是XHTML有效的，并且必须与 application / xhtml + xml mime类型的服务器响应头一起提供。

也可以从HTML页面中提取内联SVG内容，查看可以在Internet Explorer（5.5+）中查看的SVG Tiger图像示例

Answer 3

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

Answer 4

正如Greg所说，它需要是一个Firefox识别为XHTML文件的文件，而不仅仅是常规HTML，这就是重命名所完成的内容。要从服务器端应用获取该功能，您需要将响应的Content-type标头设置为application/xhtml+xml。

Answer 5

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

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

Answer 6

对于有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

在代码隐藏中：

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

Answer 7

正如其他人所说，只要您使用XHTML并且您的命名空间是正确的，您就可以了 - 您可以使用＆lt; svg＆gt;在HTML中标记。

我在测试中发现它在Firefox 4和最近的Chrome版本中运行得非常好，但是YMMV。对于你知道每个人都在使用体面的浏览器的内联网上的东西，这很好。

我做了一些experimentation in generating inline SVG using JavaScript。请随意查看，您可能会发现代码很有用。

使用Firefox 3.5在HTML中内联SVG

7 个答案: