我有一个我创建的 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>
我想对这张图片做的是将它用作 CSS 背景。如果我使用 CSS 将图像设置为背景 {background: url("image.svg");
} 那么 JavaScript 不再有效,即圆圈不再跟随光标。我相信这是因为当图像是背景时,它上面叠加了其他元素。
那么我怎样才能让图像成为背景并保持互动呢?任何建议将不胜感激。
最佳答案
让脚本化背景 SVG 工作的方法之一是使用 CSS4 element()
.它目前仅通过 -moz-element()
在 Firefox 4+ 中实现。
<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>
关于javascript - SVG 背景可以交互吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15859754/