html5 svg模拟人体过X光射线图形特效

一款很有趣的html5 svg模拟人体过X光射线图形特效，鼠标移上去看X射线效果，是不是很有意思。

分类：html/css > 图形难易：初级

查看演示下载资源下载积分： 10 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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>