Question

我一直在使用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名称空间？

Answer 1

请参阅this link（HTML介绍中的SVG @ Mozilla开发人员中心）。

内联SVG示例can be seen here。

Answer 2

你的文件类型是什么？确保它与示例相同，即XHTML，而不是HTML 4.01 TRANSITIONAL。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
          PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 3

以下是building inline SVGs dynamically with JavaScript的示例。

Answer 4

到2020年，现在可以在所有浏览器中使用html或xhtml中的SVG。

我使用的HTML / SVG（2.0）代码示例

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head> <title>SVG within XHTML Demo</title> </head>
<body>
  <p>
    <b>Electricity Plan</b>
  </p>
  <svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
    <defs>
      <g id="prise">
        <line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
        <line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
        <path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
        <line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
        <line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
      </g>
    </defs>
    <line x1='100' y1='50' x2='140' y2='50' stroke='blue'/>
    <use href='#prise' x='140' y='50'/>
  </svg>
</body>
</html>

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

4 个答案: