SVG背景可以交互嗎？

我有一個我創建的SVG圖像。它是一個帶圓圈的矩形。該圈子使用JavaScript跟隨用戶鼠標。該圖像是由下面的代碼表示：SVG背景可以交互嗎？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlspace="preserve" preserveAspectRatio="xMidYMin slic"> 
<style> 
    * { vector-effect:non-scaling-stroke } 
    rect { fill: blue; } 
    circle { fill:orange; opacity:0.75; } 
</style> 
<rect cx="50%" cy="0" width="720" height="1278" id="origin" /> 
<circle cx="50%" cy="116" r="72" id="dot" /> 
<script> 
    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()); 
    } 
</script> 
</svg>

我想這個形象做的是把它作爲一個CSS背景。如果我使用CSS將圖像設置爲背景，那麼JavaScript不再起作用，即圓不再在光標後面。我相信這是由於這樣一個事實，即當圖像是背景時，它的頂部會堆疊其他元素。

那麼我怎麼能讓圖像成爲背景並且保持互動？任何建議將不勝感激。

來源

2013-04-07 Confused One

的Javascript圖像中被禁用隱私的原因，而不是因爲其他元素堆疊在頂部。恐怕，你無法做到這一點。 – 2013-04-07 07:26:55

我完全同意@RobertLongson，你將無法做到這一點，但我建議的一個方法是，使2個圖像之一是互動和其他設置在背景中，如果我正確地理解你的問題！ – 2013-04-07 08:51:03

如果不是背景，我可以與圖像進行交互。例如，如果我將SVG包含在一個'img'標記或一個'object'標記中並絕對放置它，那麼我可以與它進行交互。如果我改變z-index使其他東西堆疊在圖像的頂部，我就無法再與它互動了。 – 2013-04-07 17:22:21

你應該創建兩個文件之一的.css文件，另一個是當然，最好有單獨的文件，因爲它實際上是容器的一部分是html。這個容器裏的SVG的JavaScripts。這種分而治之的簡化或事件。出於這個原因，外部文件實際上是作爲JavaScript保存的。這是在代碼中不會鬆動的好方法。

SVG限定：

<div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="moving_circle.svg"></object></div>

這裏，數據的一部分，你描述自己的SVG

例如，帆布：

  canvas = d3.select("#circle-svg") 
        .on("mouseover", mouseover) 
        .on("mousemove", mousemove) 
        .on("mouseout", mouseout);

第1部分：看看這個代碼（基於html）

<head> 
<title>Controlling an SVG with Javascript</title> 
<script type='text/javascript' src='svg-interaction.js'></script> 
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> 

      <style type="text/css"> 
      div.tooltip { 
        position: absolute; 
         text-align: center; 
        z-index: 10; 
         width: 140px; 
         height: auto; 
        padding: 8px; 
        font: 24px sans-serif; 
        background: red; 
        color: white; 
        border: solid 1px #aaa; 
        border-radius: 8px; 
        opacity: 0; 
      } 
    </style> 
    <head> 

    <body> 
    <h2>Controlling SVG with Javascript</h2> 
    <div class="page-content"> 
     <div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="moving_circle.svg"></object></div>

您可以在那裏定義腳本

然後你繼續第二階段（你的SVG研究）

<svg viewBox="0 0 400 400" preserveAspectRatio="none" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
a3:scriptImplementation="Adobe" 
onload="init(evt)" 
onzoom="updateTracker(evt)" 
onscroll="updateTracker(evt)" 
onresize="updateTracker(evt)"> 
<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[ 
    /***** 
    * 
    * Globals 
    * 
    *****/ 
    var elems = { 
     tracker: false, 
     cursor: false, 
     trans: true, 
     scale: true, 
     mx:  true, 
     my:  true, 
     ux:  true, 
     uy:  true 
    }; 
    var frame = { 
     x_trans: 0, 
     y_trans: 0, 
     zoom : 1, 
     x_scale: 1, 
     y_scale: 1 
    };

來源

2013-04-08 10:39:57 cod3mast3r

一個拿到腳本背景SVG工作的方式，就是用CSS4 element() 。它目前僅通過-moz-element()在Firefox 4+中實現。

An example:

<div id="bg" style="width: 400px; height: 400px;"> 
    <svg width="400" height="400" viewPort="0 0 400 400"> 
     <!-- force correct 0,0 coordinates --> 
     <rect x="0" y="0" width="1" height="1" fill="transparent" /> 
     <rect x="0" y="0" id="animable1" width="120" height="120" fill="blue" /> 
     <rect x="0" y="0" id="animable2" width="60" height="60" fill="red" /> 
    </svg> 
</div> 

<div id="target" style="border: 4px dashed black; height: 400px; width: 400px; background: gray -moz-element(#bg); background-size: 20%;"></div> 

<script type="text/javascript"> 
    var divTarget = document.getElementById("target"); 
    var animable1 = document.getElementById("animable1"); 
    var animable2 = document.getElementById("animable2"); 
    document.addEventListener("mousemove", function(event){ 
     var rotation = Math.atan2(event.clientY, event.clientX); 
     animable1.setAttribute("transform", "translate(140 140) rotate(" + (rotation/Math.PI * 360) + " 60 60)"); 
     animable2.setAttribute("transform", "translate(170 170) rotate(" + (360 - rotation/Math.PI * 360) + " 30 30)"); 
    }, false); 
    animable1.setAttribute("transform", "translate(140 140) rotate(0 60 60)"); 
    animable2.setAttribute("transform", "translate(170 170) rotate(0 30 30)"); 
</script>

來源

2013-04-12 13:22:25 mems

這很酷。我不能等到這是現狀的一部分。 – 2013-04-12 18:01:00

Yo Dawg！我們聽說你喜歡html，所以我們創建了'element（）'，這樣你就可以將html放入你的html中。 – Sprintstar 2013-10-09 10:35:20

SVG背景可以交互嗎？

回答

相關問題