Position SVG lines over HTML elements, while still allowing interaction with the HTMl elements

Question

Given the following Codesnippet:

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

(See http://jsfiddle.net/5phzgxLa/)

I would like to have the SVG line be drawn over the p element within the HTML, while still being able to fully interact with the HTML (the title text should still display on hover, and the onclick handler should still fire on clicking the text).

I can change the HTML and CSS in any way needed to do this, but I do need the SVG to be fixed over the HTML, as I essentially want an SVG layer I can draw things on over normal HTML, with the SVG layer moving as the page is scrolled.

Is this possible? If not, is there any way to achieve a similar effect?