微信公众号svg互动

I’ve long wanted to recreate the effect of the sunglasses used in the classic John Carpenter film They Live: putting on the sunglasses would reveal the subliminal messages encoded in all forms of media by a secret alien conspiracy. I successfully created the effect using SVG masks and mouse tracking, which you can see in the example above.

我一直想重现约翰·卡彭特经典电影《 他们的生活》中使用的太阳镜的效果：戴上太阳镜会显示出一种秘密的外星人阴谋以各种形式的媒体编码的潜意识信息。 我使用SVG蒙版和鼠标跟踪成功创建了效果，您可以在上面的示例中看到。

图像三明治 (An Image Sandwich)

The key to the technique is layering two versions of the same image - an ordinary full-color photograph, and a black-and-white version retouched in PhotoShop. (I could have also used a black-and-white filter in SVG for the second image, potentially reducing its size by saving only the billboards as a transparent PNG).

该技术的关键是对同一图像的两个版本进行分层-一张普通的全彩色照片和在PhotoShop中修饰的黑白版本。 (我本可以在第二个图像中使用SVG中的黑白滤镜，通过仅将广告牌另存为透明PNG来减小其尺寸)。

Embedded in SVG, the image code looks like this:

嵌入SVG中 ，图像代码如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 1500 1122"><image xlink:href="they-live-color.jpg" x="0" y="0" height="100%" width="100%" /> <image xlink:href="they-live-bw.jpg" x="0" y="0" height="100%" width="100%" /> 
</svg>

Note that the black-and-white version is on top of the color version, and that the SVG element itself is sized to the pixel dimensions of the (paired) images; the images themselves are sized to take up 100% of this space, making them (and the SVG as a whole) responsive.

请注意，黑白版本位于彩色版本的顶部 ，并且SVG元素本身的大小适合(已配对)图像的像素尺寸。 图像本身的大小可占据此空间的100％，从而使它们(以及整个SVG )具有响应能力 。

还有那些徒步旅行者，宝贝 (And Those Wayfarers On, Baby)

The sunglasses are divided into three parts: two paths describing the left and right lenses, and another path forming the frame. The lenses are placed inside a <clipPath>, the frame, with an id of wayfarers, is placed last in the SVG:

太阳镜分为三个部分：两条路径描述左右镜片，另一条路径形成镜架。 将镜片放置在内部<clipPath>框架，具有一个id的wayfarers ，最后被放置在SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1500 1122"><defs><clipPath id="lenses" transform="scale(2)"> <path d="M312.4,28c-15.8,6.9-23.9,24.1-23.9,32.3 …" /><path d="M185.6,28c-24.6-10.8-92.2-12.1-114.9-3.6 …" /></clipPath> </defs><image xlink:href="they-live-color.jpg" x="0" y="0" height="100%" width="100%" /> <image xlink:href="they-live-bw.jpg" x="0" y="0" height="100%" width="100%" /> <path id="wayfarers" transform="matrix(2 0 0 2 0 0)" 
d="M355.5,6.4c-44.7,2.1-84,22.2-107.7,22.7C223.7,29.7,198.6,11,140.1,6.4 … "/>
</svg>

Both the lenses and the frames need to be twice as large as they are naturally, which is the reason for the transnform on each.

镜头和镜框的尺寸都必须是自然尺寸的两倍，这就是在每个transnform上进行transnform的原因。

过滤世界 (Filtering the World)

To apply the lenses as a clip to the black-and-white image, we address the clipPath from there. The code for the second image is altered to:

要将镜头作为剪辑应用到黑白图像，我们从那里处理clipPath 。 第二张图片的代码更改为：

<image xlink:href="they-live-bw.jpg" x="0" y="0" height="100%" width="100%" 
clip-path="url(#lenses)" />

A little CSS is applied also:

还应用了一些CSS ：

body { margin: 0; }
#wayfarers { cursor: move; }

SVG中的鼠标跟踪 (Mouse Tracking in SVG)

Adding a script to the bottom of the SVG, we start by identifying the elements that need to be tracked and controlled, together with creating a single, unseen point:

将脚本添加到SVG的底部，我们首先确定需要跟踪和控制的元素，并创建一个看不见的点：

var svgElement = document.querySelector("svg"),
lenses = document.querySelector("#lenses"),
wayfarers = document.querySelector("#wayfarers"),
svgPoint = svgElement.createSVGPoint();

This invisible point is tracked in a function that matches the position of the mouse cursor; using a matrixTransform, we determine the position of the mouse in SVG space:

在与鼠标光标位置匹配的函数中跟踪该不可见点； 使用matrixTransform ，我们确定鼠标在SVG空间中的位置：

function cursorPoint(e, svg) {svgPoint.x = e.clientX;svgPoint.y = e.clientY;return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
}

The position of the sunglasses and its lenses are determined with another function: finding the width and height of the sunglasses, determining its center, relative to the mouse position, and moving each with a transform, while retaining their scale:

太阳镜及其镜片的位置还有另一个功能：确定太阳镜的宽度和高度，确定其相对于鼠标位置的中心，并通过transform移动每个太阳镜，同时保持其比例：

function update(svgCoords) {var wayWidth = wayfarers.getBoundingClientRect().width,wayHeight = wayfarers.getBoundingClientRect().height,coos = ((svgCoords.x / 2) - wayWidth / 2) + " " + ((svgCoords.y / 2) - wayHeight / 2);lenses.setAttribute("transform", "scale(2) translate("+coos+")");wayfarers.setAttribute("transform", "scale(2) translate("+coos+")");
}

Mouse movement and touches on a mobile device are covered by two eventListeners:

鼠标的移动和在移动设备上的触摸被两个eventListeners覆盖：

svgElement.addEventListener("mousemove", function(e) {update(cursorPoint(e, svgElement));
}, false);svgElement.addEventListener("touchmove", function(e) {e.preventDefault();var touch = e.targetTouches[0];if (touch) {update(cursorPoint(touch, svgElement));}
}, false);

You can find the complete code in the associated CodePen demo; I’ll be showing variations of this technique in future articles.

您可以在相关的CodePen演示中找到完整的代码； 我将在以后的文章中展示这种技术的变体。

翻译自: https://thenewcode.com/1116/Put-On-The-Sunglasses-Frank-An-Interactive-with-SVG-Masks

微信公众号svg互动