这是一款html5基于svg绘制人体过X光射线图形特效。
使用方法
需要用到的JS文件
<script> /* * Noel Delgado | @pixelia_me * */ var svgElement = document.querySelector('svg'); var maskedElement = document.querySelector('#mask-circle'); var circleFeedback = document.querySelector('#circle-shadow'); var svgPoint = svgElement.createSVGPoint(); function cursorPoint(e, svg) { svgPoint.x = e.clientX; svgPoint.y = e.clientY; return svgPoint.matrixTransform(svg.getScreenCTM().inverse()); } function update(svgCoords) { maskedElement.setAttribute('cx', svgCoords.x); maskedElement.setAttribute('cy', svgCoords.y); circleFeedback.setAttribute('cx', svgCoords.x); circleFeedback.setAttribute('cy', svgCoords.y); } window.addEventListener('mousemove', function(e) { update(cursorPoint(e, svgElement)); }, false); document.addEventListener('touchmove', function(e) { e.preventDefault(); var touch = e.targetTouches[0]; if (touch) { update(cursorPoint(touch, svgElement)); } }, false);</script>