HTML5 svg not working_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-02 22:42 出处：网络

I\'m using Chrome version 5.0.375.55 and Firefox version 3.5.9 but I can\'t get the HTML5 code below to disp开发者_StackOverflow社区lay a box.

相关专题：

I'm using Chrome version 5.0.375.55 and Firefox version 3.5.9 but I can't get the HTML5 code below to disp开发者_StackOverflow社区lay a box.

<!DOCTYPE html> <!-- this tells browser, this is HTML5 -->
<html>
<body>
 <svg width="200" height="200"> 
 <rect
  x="0" y="0"
  width="100" height="100"
  fill="blue" stroke="red"
  stroke-width="5px"
  rx="8" ry="8"
  id="myRect" class="chart" />
 </svg>
</body>
</html>

The following sites stated that my browsers support HTML5 and svg so what gives?

http://caniuse.com/
http://www.html5test.com/

This is how I got it to work I called the file test.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> 
 <rect
  x="0" y="0"
  width="100" height="100"
  fill="blue" stroke="red"
  stroke-width="5px"
  rx="8" ry="8"
  id="myRect" class="chart" />
 </svg>
</body>
</html>

Good luck!

Have you tried using the SVG XML namespace for your tags? Like so:

<html xmlns:svg="http://www.w3.org/2000/svg">
    <!-- ... -->
    <svg:svg width="200" height="200"> 
        <svg:rect
          x="0" y="0"
          width="100" height="100"
          fill="blue" stroke="red"
          stroke-width="5px"
          rx="8" ry="8"
          id="myRect" class="chart" />
    </svg:svg>
</html>

it worked by saving the file as xhtml, but I'm not sure why.

try in Firefox about:config, search for html and enable "true" value. What next? Wait will Firefox 4. As for WebKit please read: http://trac.webkit.org/wiki/WebKit%20plus%20SVG. You are not alone. I'm also waiting for SVG.

Firefox 4 will support SVG in HTML. WebKit will probably start working on it in the coming months.