Question

给出以下代码片段：

.html {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.svg {
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

<div class="root">
  <div class="html">
    <p title="Title Text" onclick="console.log('clicked')">
      Some text
    </p>

    <svg class="svg">
          <line x1="0" y1="0" x2="200" y2="200" stroke="blue" stroke-width="10"></line>
        </svg>
  </div>
</div>

（请参见http://jsfiddle.net/5phzgxLa/）

我希望在HTML的line元素上绘制SVG p，同时仍然能够与HTML进行完全交互（标题文本仍应悬停显示，并且onclick处理程序仍应在点击文本时触发。

我可以通过执行此操作所需的任何方式来更改HTML和CSS，但是我确实需要SVG在HTML上fixed，因为我本质上希望使用SVG层，因此可以在普通HTML上绘制内容，随着页面滚动，SVG层也随之移动。

这可能吗？如果没有，有什么办法可以达到类似的效果？

将SVG行放置在HTML元素上，同时仍允许与HTMl元素进行交互

0 个答案: