Javascript SVG背景可以是交互式的吗？_Javascript_Css_Html_Dom_Svg

Javascript SVG背景可以是交互式的吗？

javascript css html dom svg

Javascript SVG背景可以是交互式的吗？,javascript,css,html,dom,svg,Javascript,Css,Html,Dom,Svg,我创建了一个SVG图像。它是一个矩形，里面有一个圆。圆圈使用JavaScript跟随用户鼠标。图像由以下代码表示： <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-eff

我创建了一个SVG图像。它是一个矩形，里面有一个圆。圆圈使用JavaScript跟随用户鼠标。图像由以下代码表示：

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


*{矢量效果：非缩放笔划}
rect{fill:blue；}
圆圈{填充：橙色；不透明度：0.75；}
var svg=document.documentElement，
pt=svg.createSVGPoint（），
点=document.querySelector（“#点”）；
svg.addEventListener（'mousemove'，函数（evt）{
var loc=光标点（evt）；
dot.setAttribute（'cx'，loc.x）；
点集属性（'cy'，位置y）；
}，假）；
函数旋转元素（el、originX、originY、towardsX、towardsY）{
变量度=数学atan2（towardsY originY，towardsX originX）*180/数学PI+90；
el.setAttribute(
“转换”，
“translate”（“+originX+”，“+originY+”）translate（“+（-originX）+”，“+（-originY）+”）”
);
}
//在全局SVG空间中获取点
函数游标点（evt）{
pt.x=evt.clientX；pt.y=evt.clientY；
返回pt.matrixTransform（svg.getScreenCTM（）.inverse（））；
}

我想用这个图像做的是将它用作CSS背景。如果我使用CSS将图像设置为背景{

background:url（“image.svg”）；

}，则JavaScript不再工作，即圆圈不再跟随光标。我相信这是因为当图像是背景时，它有其他元素叠加在其上

那么，如何使图像成为背景并保持交互？任何建议都将不胜感激。

您应该创建两个文件，一个是.css文件，另一个当然最好有单独的文件，因为它实际上是html容器的一部分。SVG在这个容器中，包含Java脚本。这种分而治之的简化或事件。由于这个原因，外部文件实际上是作为JavaScripts保存的。这是一种很好的方法，可以避免代码中出现松动

SVG定义：

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

第1部分：看看这段代码（基于html）


用Javascript控制SVG
分区工具提示{
位置：绝对位置；
文本对齐：居中；
z指数：10；
宽度：140px；
高度：自动；
填充：8px；
字体：24px无衬线；
背景：红色；
颜色：白色；
边框：实心1px#aaa；
边界半径：8px；
不透明度：0；
}
用Javascript控制SVG

你可以在那里定义你的脚本

然后继续第二阶段（SVG研究）


让脚本化背景SVG工作的一种方法是使用CSS4。它目前仅通过-moz-element（）
在Firefox4+中实现


var divTarget=document.getElementById（“目标”）；
var animable1=document.getElementById（“animable1”）；
var animable2=document.getElementById（“animable2”）；
document.addEventListener（“mousemove”，函数（事件）{
var rotation=Math.atan2（event.clientY，event.clientX）；
animable1.setAttribute（“变换”、“平移（140）旋转”（+（rotation/Math.PI*360）+“60”）；
animable2.setAttribute（“变换”、“平移（170）旋转”（+（360-rotation/Math.PI*360）+“30”）；
}，假）；
animable1.setAttribute（“变换”、“平移（140）旋转（060）”；
动画2.setAttribute（“变换”、“平移（170）旋转（030）”）；
Javascript在图像中被禁用是出于隐私原因，而不是因为其他元素堆叠在顶部。恐怕你做不到。我完全同意@RobertLongson的说法，你做不到，但我建议的一种方法是制作两张图片，一张是互动的，另一张是背景图片，如果我正确理解了你的问题！如果图像不是背景，我可以与之交互。例如，如果我将SVG包含在img
标记或对象
标记中，并对其进行绝对定位，那么我可以与它进行交互。如果我更改z索引，使其他东西堆积在该图像的顶部，我将无法再与它交互。出于好奇，为什么需要它作为背景？我想以dabble.in的方式制作一个交互背景，但从编码角度来看更简单。这很酷。我迫不及待地想知道这是现状的一部分。老兄！我们听说您喜欢html，所以我们创建了element（），这样您就可以将html放入html中。
            canvas = d3.select("#circle-svg")
                    .on("mouseover", mouseover)
                    .on("mousemove", mousemove)
                    .on("mouseout", mouseout);

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

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