Databases
StackOverflow2013
Postsdbo
POCan an SVG background be interactive?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan an SVG background be interactive?
    primarykey
    data
    text
    <p>I have an SVG image that I created. It is a rectangle with a circle inside it. The circle follows the users mouse using JavaScript. The image is represented by the following code:</p> <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlspace="preserve" preserveAspectRatio="xMidYMin slic"&gt; &lt;style&gt; * { vector-effect:non-scaling-stroke } rect { fill: blue; } circle { fill:orange; opacity:0.75; } &lt;/style&gt; &lt;rect cx="50%" cy="0" width="720" height="1278" id="origin" /&gt; &lt;circle cx="50%" cy="116" r="72" id="dot" /&gt; &lt;script&gt; var svg = document.documentElement, pt = svg.createSVGPoint(), dot = document.querySelector('#dot'); svg.addEventListener('mousemove',function(evt){ var loc = cursorPoint(evt); dot.setAttribute('cx',loc.x); dot.setAttribute('cy',loc.y); },false); function rotateElement(el,originX,originY,towardsX,towardsY){ var degrees = Math.atan2(towardsY-originY,towardsX-originX)*180/Math.PI + 90; el.setAttribute( 'transform', 'translate('+originX+','+originY+') translate('+(-originX)+','+(-originY)+')' ); } // Get point in global SVG space function cursorPoint(evt){ pt.x = evt.clientX; pt.y = evt.clientY; return pt.matrixTransform(svg.getScreenCTM().inverse()); } &lt;/script&gt; &lt;/svg&gt; </code></pre> <p>What I would like to do with this image is use it as a CSS background. If I use CSS to set the image as a background {<code>background: url("image.svg");</code>} then the JavaScript no longer works, i.e. the circle no longer follows the cursor. I believe this is due to the fact that when the image is a background, it has other elements stacked on top of it.</p> <p>So how can I have the image be a background and also remain interactive? Any suggestions would be greatly appreciated.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USConfused One
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCan an SVG background be interactive?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCan an SVG background be interactive?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POCan an SVG background be interactive?
      1. USConfused One
      1. VTFavorite
    1. COJavascript is disabled in images for privacy reasons, not because other elements are stacked on top. I'm afraid, you're not going to be able to do this.
      singulars
      1. POCan an SVG background be interactive?
      1. USRobert Longson
    2. COI totally agree with @RobertLongson, you will not be able to do this but one method i suggest is that make 2 images one to be interactive and other to be set in the background if I understood your question correctly!
      singulars
      1. POCan an SVG background be interactive?
      1. USMohammad Areeb Siddiqui
    3. COI am able to interact with the image if it is not a background though. For example, if I include the SVG in an `img` tag or an `object` tag and absolutely position it, then I can interact with it. If I change the z-index such that other things are stacked on top of that image, I can't interact with it anymore.
      singulars
      1. POCan an SVG background be interactive?
      1. USConfused One
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload