svg交互_SVG Meetup演示：交互式图像图-CSDN博客

svg交互

The first section of my presentation at this month’s San Francisco SVG meetup; unfortunately, I hadn’t realised that the camera I was using had a 4GB file limit, which cut the filmed portion of “Six Impossible Things With SVG” to just this section on interactive, responsive SVG imagemaps.

在本月旧金山SVG聚会上的演讲的第一部分；不幸的是，我还没有意识到我所使用的相机有4GB的文件限制，因此将“使用SVG进行六种不可能的事情”的拍摄部分削减到了交互式，响应式SVG图像图的这一部分。

链接 (Links)

成绩单 (Transcript)

This is me: you may or may not know me through my blog - currently demosthenes.info. Since no-one knows anything about Greek history, I’m going to be changing that next semester, and it’s all going to be shiny and new… but that’s in the future; for right now, that’s me.

这就是我：您可能会或可能不会通过我的博客认识我-当前为demosthenes.info。由于没有人对希腊历史一无所知，所以我将在下个学期更改该课程，这一切将焕然一新。现在是我

So, imagemaps. Anyone here old enough to remember the original imagemaps? For those of you who weren’t around (then), imagemaps were originally: “lets have a great big graphic on screen, let’s draw some basics shapes around those graphics that are invisible, and let’s link (the shapes) to other pages”. They were the original way of doing graphical interfaces for web pages. They were very neat - you could do a bunch of things with them - but there were also many problems, one of which was that they basically needed to be made from scratch every time. They were great for kid’s sites: you could make a great big happy sun and put a circle (link) around that, you have a truck, and put a truck-shaped polygon around that, and you could link them off to other things, but you needed to do that every time, for every new interface you wanted to make.

因此，图像映射。这里有人大到足以记住原始图像图吗？对于那些当时不在的人，图像映射本来是：“让屏幕上有一个很大的图形，让我们围绕那些不可见的图形绘制一些基本形状，然后将(形状)链接到其他页面” 。它们是制作网页图形界面的原始方法。它们非常整洁-您可以与它们一起做很多事情-但也存在许多问题，其中之一是基本上每次都需要从头开始制作它们。它们非常适合孩子们玩耍的地方：您可以晒出一个大大的快乐阳光，在其周围放一个圆圈(链接)，您有一辆卡车，并在其周围放一个卡车形状的多边形，然后可以将它们链接到其他物体上，但是您需要每次针对您要制作的每个新界面执行此操作。

The big one (drawback) of the last 3 - 4 years was that people realized that (imagemaps) weren’t responsive. You could make an image responsive - we all know how to do that - but the registration points (of the imagemap) would get out of alignment: the moment that picture changed in size, the registration points would drift, so they wouldn’t make any sense: “I’m clicking here, but the image is over there”. Obviously also large file size, because you’re talking about a (large) bitmap.

最近3-4年的最大缺点是人们意识到(图像贴图)没有响应。您可以使图像响应-我们都知道该怎么做-但是(图像映射图的)配准点会失准：当图片尺寸改变时，配准点会漂移，因此它们不会任何意义上：“我在这里单击，但是图像在那儿”。显然，文件大小也很大，因为您正在谈论的是(大)位图。

So! SVG can fix all that. Essentially, you make an SVG - make a path, any kind of path, or a polygon, or almost anything else, and you link it. That’s real easy. Then you can put a transition on it if you want to, throw some CSS on it, put a fill on it. The one thing I would say is that it’s really important to remember is that you do need a fill on these things, or pointer-events: all, because otherwise (the shape) won’t register as a link. You can then add a path:hover, which essentially means that you can turn each of those (shapes) into a link. So there’s British Columbia, Alberta, where I’m from.

所以！ SVG可以解决所有问题。本质上，您制作了SVG-制作了路径，任何种类的路径，多边形或几乎所有其他内容，然后将其链接起来。真的很简单。然后，如果需要，可以在其上进行过渡，在其上放置一些CSS，然后对其进行填充。我要说的一件事是，记住一点非常重要，那就是您确实需要填充这些内容或pointer-events: all ，因为否则(形状)将不会注册为链接。然后，您可以添加path:hover ，这实际上意味着您可以将每个(形状)都变成链接。因此，我来自阿尔伯塔省的不列颠哥伦比亚省。

So it’s real simple, right? You just make a shape, transition it, move back and forth, and its all good. The one thing about this is that the SVG has to be inline on the page, so you can’t do this as an image, but the CSS can go in the head of the page, or inside the SVG, it all works.

真的很简单，对吧？您只需制作一个形状，对其进行过渡，来回移动，一切都很好。关于这一点的一件事是，SVG必须在页面上内联，因此您不能将其作为图像来完成，但是CSS可以位于页面的顶部，也可以位于SVG内，这一切都可以。

So that’s the basic approach. The nice part about this is that you’ve got (already existing) maps of every location in the world (in SVG format), in whatever projection you need.

这就是基本方法。这样做的好处是，您已经(已经存在)获得了世界上每个位置的地图(SVG格式)，无论您需要什么投影。

Question: So the reason you’ve got each one of those provinces hoverable is because each of them has their own path, right?

问题：您之所以将这些省份中的每个省都徘徊是因为每个省都有自己的路，对吗？

Right, each one of them has their own path, and each one has a link around it. So as long as you’ve got a link around them, their basically active.

是的，每个人都有自己的道路，每个人都有自己的链接。因此，只要您周围有一个链接，它们就基本处于活动状态。

The other nice part about this is that the path you make in SVG becomes the hotspot, so it’s both the image and the link at the same time, so you’re killing two birds with one stone, which is really nice. So you don’t have to draw this and then try to sketch over it, it’s just all done in one. And like I say, if it’s a geographical area, which it often is, it already exists: you can just go out to Wikipedia and look it up, all the maps are available in SVG.

与此相关的另一个好地方是，您在SVG中创建的路径成为了热点，因此它既是图像又是链接，因此您要用一块石头杀死两只鸟，这确实很不错。因此，您不必绘制此图，然后尝试在其上绘制草图，只需将其全部完成即可。就像我说的那样，如果这是一个经常存在的地理区域，那么它已经存在：您只需到Wikipedia并进行查找，所有地图都可以在SVG中找到。

I’m also an editor at Smashing Magazine, and we have an (upcoming) article by a guy who goes out to geographical information services and shows you how to break down maps into SVG from any location on Earth: it’s basically just a few small backend processes to turn that information into an SVG map of any projection, from anywhere on the planet, of any kind.

我还是Smashing Magazine的编辑，我们有一篇即将发表的文章，他将介绍地理信息服务，并向您展示如何从地球上的任何位置将地图分解为SVG：基本上只有几个小后端程序将这些信息转换为地球上任何地方任何形式的任何投影的SVG地图。

You can then take that same idea of a shape, but then put that shape inside of a clip-path, and then put a bitmap image that references that clip-path, and it’s all still linked.

然后，您可以采用相同的形状概念，然后将该形状放入clip-path ，然后放置引用该clip-path的位图图像，并且所有这些图像均已链接。

(Now) in the CSS I’m targetting the <image>: the one thing you have to remember if you’ve done a lot of CSS is that now the selector is image { }, not img { }.

(现在)在CSS中，我的目标是<image> ：如果您已经做了很多CSS，则必须记住的一件事是，现在选择器是image { } 而不是 img { } 。

Because I’ve got that hover as well, you’ve got that hover effect on the inside there, which is pretty cool, right. Again, so long as that path is filled: it’s got to have opacity on it, or it’s got to have a fill on it, or pointer-events: all to register. As long as that’s the case, you can basically put anything you like in there.

因为我也有悬停功能，所以您在那儿的内部也有了悬停效果，这很酷，对。同样，只要填充了该路径：它必须具有opacity ，或者必须具有fill ，或者是pointer-events: all需要注册。只要是这样，您基本上就可以在其中放置任何东西。

The most recent one I’ve been playing around with: you can place an image behind the SVG. This is most similar to the traditional iamgemap: in a traditional imagemap you had a bitmap and tried to draw vector shapes on top of it. In this version, you have a <div> that contains the image - as a real image or a background image, it doesn’t particularly matter which - and the SVG is drawing the shapes on top: you got <circle> and <text> right next to it, <polygon> and text immediately after it: so the idea is that I’m mapping shapes on top of this image, so the text is explanations after each hotspot.

我最近玩过的一个游戏：您可以在SVG 后面放置一个图像。这与传统的iamgemap最相似：在传统的图像图中，您有一个位图，并试图在其顶部绘制矢量形状。在此版本中，您有一个<div>包含图像-作为真实图像还是背景图像，这并不重要-SVG在顶部绘制形状：您获得了<circle>和<text>在它旁边的<polygon>和紧随其后的文本：因此，想法是我将图形映射到该图像的顶部，因此文本是每个热点之后的说明。

So the result: you’ve got the image as a background image, the SVG invisibly on top, so that when I move over (each shape) it just selects the text next to it, and says “okay that’s on”, so it’s very easy to bring up.

结果就是：您将图像作为背景图像，将SVG置于顶部，因此，当我移过(每种形状)时，只需选择其旁边的文本，然后说“好，就可以了”，非常容易提出。

Question: Is that text selectable?

问题：可以选择该文本吗？

Yes… if you can get to it. The one thing is that I’ve got my hotspots are a little broad, so (the text) is a little difficult to get to. But ultimately, yeah - it’s just text, right? It’s just there on the page.

是的...如果可以的话。一件事是，我的热点有些宽泛，因此(文字)有些难以理解。但是最终，是的-只是文字，对不对？它就在页面上。

Question: It’s screen-readable?

问题：屏幕可读吗？

Yep: screen readable, accessible, everything else.

是的：屏幕可读，可访问，其他所有内容。