Question

这似乎是一个人为的问题，但我试图对包含内联SVG的HTML 5文档进行概念验证，该内联SVG本身包含＆lt; foreignObject＆gt;内部带有HTML画布的元素。然后我想调用一个JavaScript函数在画布上绘制。

（我如何到达这里：我想使用SVG作为定义动画图形视图的格式，该动画图形视图可以包含图形，通过使用JavaScript / ECMAScript用实时图形替换SVG中的虚拟元素来动画化图形，我们正在考虑生成图形的一个JavaScript库（Flot）使用HTML画布进行视图，所以我想将这个画布注入SVG视图。更理想的是我们希望这个系统在本地运行文件，在file：//协议上，这意味着我们无法在外部文件上运行脚本（例如用＆lt; object＆gt;或＆lt; iframe＆gt;引用），因为浏览器阻止它们，因此内联SVG。） < / p>

这是一个说明问题的HTML源代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Canvas Test</title>
    <script type="text/javascript">
      function draw_box() {
        var canvas = document.getElementById("box_canvas");
        var context = canvas.getContext("2d");
        context.fillRect(50, 20, 50, 60);
      }
    </script>
  </head>
  <body>
    <h1>Canvas Test
    <p>
    <svg width="400" viewBox="-10 -10 268 108">
      <rect style="fill: #a0a0a0" x="8" y="8" width="240" height="80" rx="40" ry="40"/>
      <g>
        <rect style="fill: #0000ff" x="0" y="0" width="240" height="80" rx="40" ry="40"/>
        <rect style="fill: none; fill-opacity:0; stroke-width: 2; stroke-linejoin: round; stroke: #000000" x="0" y="0" width="240" height="80" rx="40" ry="40"/>
        <foreignObject x="120" y="25" width="150" height="100">
          <canvas id="box_canvas" width="150" height="100" style="border:1px dotted;float:left">Canvas alt text</canvas>
        </foreignObject>
      </g>
    </svg>
    <p>
    <button type="button" onclick="draw_box();return false">Animate</button>
  </body>
</html>

上面的页面在IE 11中根本不显示画布。在最新版本的Chrome中它显示了画布，但是按钮调用的JavaScript函数的效果 - 绘制黑盒子 - 仅显示在你点击SVG图像。

我需要知道的事情： 1）我写的东西有什么问题 - 例如我在画布上绘制后是否缺少一些函数调用来进行SVG或foreignObject更新？ 2）这是一个失败的原因吗？＆lt; foreignObject＆gt;的规范是什么？即使我们可以控制用户查看文档的浏览器，我也永远不会确信这会有效吗？如果是这样的话，实际上很好，因为我们可以说我们需要使用图库来生成SVG而不是HTML。

非常感谢

为什么嵌入在内联SVG中的画布未更新？

0 个答案: