javascript – 使用Shadow DOM扩充SVG标记

我一直在试验 HTML5和SVG;我对 JavaScript和Web开发都很陌生,所以我可能会缺少一些东西.我正在尝试创建可重用的Web组件,利用一些新功能,如HTML Imports,Shadow DOM和扩展现有的Web元素.我有两个html文件：

的test.html

<html>
<head>
  <title>Test HTML5</title>
</head>
<body>
  <link rel="import" href="Elements/tank.html">

  <svg width="100%"
       viewBox="0 0 500 500"
       style="border: solid; border-width: thin; stroke-width: 2;">

    <polyline points="0,300 100,100 250,150 500,150"
              style="fill:none;stroke:black;stroke-width:3"
              onclick="window.alert('you clicked line')" />
    <svg is="my-tank" x="200" y="350" width="50" height="50"></svg>

  </svg>
</body>
</html>

tank.html

<html>
<body>
  <template id="tank">
    <rect fill="red" width="50" height="50"></rect>
  </template>

  <script type="text/javascript">
    var tankElement = document.currentScript.ownerDocument.querySelector('#tank');

    document.registerElement('my-tank',{
      prototype: Object.create(SVGSVGElement.prototype,{
        createdCallback: {
          value: function () {
            var root = this.createShadowRoot();

            //Works
            root.innerHTML = tankElement.innerHTML;

            //Doesn't work
            //var tankTemplate = document.importNode(tankElement.content,true);
            //root.appendChild(tankTemplate);
          }
        }
      }),extends: 'svg'
    });
  </script>
</body>
</html>

// Works注释下的代码绘制了一个红色矩形,我期望在SVG可绘制空间中. //不工作的代码不会绘制任何内容或产生任何错误.

// Works的屏幕截图：

//的屏幕截图不起作用：

我一直在测试Opera 41.0.

解决方法

你不能这样做,因为svg不能成为影子主机.只有有限数量的元素可以是影子主机：

文章,一边,blockquote,正文,div,页脚,h1,h2,h3,h4,h5,h6,标题,主要,导航,p,部分,跨度.

所以不仅svg,还有其他像输入或textarea都不能有阴影(我在谈论Shadow-DOM v1).

有关详细信息,请参阅attachShadow的定义：https://dom.spec.whatwg.org/#dom-element-attachshadow

还要注意：

> SVGSVGElement未实现HTMLElement.
>还听说过有关SVG已经在其实现中包含阴影dom以及Custom Elements v1的内容
你可能只有一个影子(见这里：http://hayato.io/2016/shadowdomv1/).

为什么不创建一个常规的自定义元素,它可能包含< svg>阴影中的元素？

javascript – 使用Shadow DOM扩充SVG​​标记

解决方法

猜你在找的JavaScript相关文章

javascript – 使用Shadow DOM扩充SVG标记