firefox - 如何将 SVG 和 HTML 混合到一个页面中?

标签 firefox xhtml html svg

我一直在使用 jQuery.svg plugin做一些 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>

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

最佳答案

参见 this link (HTML 中的 SVG 介绍@Mozilla 开发者中心)。

内联 SVG 示例 can be seen here .

关于firefox - 如何将 SVG 和 HTML 混合到一个页面中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2428867/

相关文章:

html - "Source"和 "Generated Source"有什么区别?

javascript - 为什么 jQuery 动画在不是事件选项卡时会变得困惑?

javascript - CSS:Hover 的文本问题因为溢出而被隐藏:隐藏?

html - 一个 HTML 元素可以有多个 id 吗?

javascript - ng-blur 不要使用输入编号在 firefox 上触发事件

macos - 在 Mac OS X 上使用不同的配置文件打开多个 firefox 实例

xml - 如何在 XHTML 中使用 HTML5 数据属性?

php - 如何保存对 DOM 元素所做的修改?

html - 在 4 个 Pane 之间添加中间间距

javascript - 通过 jQuery 申请时出现 "width"问题