如何将SVG和HTML混合到页面中？

Question

如何将SVG和HTML混合到页面中？

Joh*_*uff 7 html xhtml firefox html5 svg

我一直在使用jQuery.svg插件来做一些SVG渲染,它工作得很好,但我也想让服务器将一些SVG渲染到页面中,我无法让它工作.如何在页面中添加如下所示的SVG以便Firefox呈现它？

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>

    <body>

    <div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div>

    <svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
      <circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg>


    <svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
      <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
    </svg:svg>

    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

我是否需要一个元标记,说明页面中有SVG内容或以某种方式定义SVG名称空间？

Answer 1

Chr*_*heD 1

请参阅此链接（HTML 中的 SVG 介绍@Mozilla 开发人员中心）。

可以在此处查看内联 SVG 示例。

确保网络服务器将其作为“application/xhtml+xml”提供。 (2认同)

归档时间：	15 年，7 月前
查看次数：	8089 次
最近记录：	14 年，4 月前