12

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

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

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

我可能会错过什么？

更新
我的身份略有改变：k montgomery -> kmontgom on use of OpenID。

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

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

现在，继续使用 jQuery、SVG 并让这件事有所作为。

感谢所有的帮助。

4

7 回答 7

13

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

例如

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

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

于 2010-07-29T17:06:53.023 回答
11

为了在浏览器中显示内联 SVG，页面必须是 XHTML 有效的，并且必须使用application/xhtml+xml mime-type 服务器响应标头提供服务。

也可以从 HTML 页面中提取内联 SVG 内容，请参阅SVG Tiger图像的示例，该图像也可以在 Internet Explorer (5.5+) 中查看

于 2009-07-11T20:47:28.110 回答
5

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

于 2009-07-11T20:30:54.540 回答
3

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

于 2009-07-11T20:48:21.073 回答
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>

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

于 2011-07-21T19:07:39.113 回答
1

对于 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";
}
于 2011-08-14T23:41:59.237 回答
0

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

我在测试中发现它只在 Firefox 4 和最近的 Chrome 版本中运行良好，但在 YMMV 中运行良好。对于您知道每个人都在使用不错的浏览器的 Intranet 上的内容，这很好。

我在使用 JavaScript 生成内联 SVG 方面做了一些实验。随意检查一下，您可能会发现代码很有用。

于 2011-06-12T15:15:26.507 回答