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不再起作用，即圆不再在光标后面。我相信这是由于这样一个事实，即当图像是背景时，它的顶部会堆叠其他元素。

那么我怎么能让图像成为背景并且保持互动？任何建议将不胜感激。

的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 
    };

答

一个拿到脚本背景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 18:01:00

Yo Dawg！我们听说你喜欢html，所以我们创建了'element（）'，这样你就可以将html放入你的html中。 – Sprintstar 2013-10-09 10:35:20

SVG背景可以交互吗？

相关推荐