时间戳

首页 > 解决方案 > 将 SVG 线条放置在 HTML 元素上，同时仍然允许与 HTML 元素交互

html - 将 SVG 线条放置在 HTML 元素上，同时仍然允许与 HTML 元素交互

问题描述

给定以下代码片段：

.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/）

我希望将 SVGline绘制在pHTML 中的元素上，同时仍然能够与 HTML 完全交互（标题文本仍应在悬停时显示，并且onclick处理程序仍应在单击文本时触发）。

我可以以任何需要的方式更改 HTML 和 CSS，但我确实需要 SVGfixed在 HTML 之上，因为我本质上想要一个 SVG 层，我可以在普通 HTML 上绘制东西，SVG 层随着页面滚动。

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

标签： htmlcsssvg

解决方案

推荐阅读