svg响应式折线_使用SVG创建响应式图像映射

svg响应式折线

While traditional imagemaps remain a very effective UI pattern for certain sites – especially those that need a visitor to enter a geographical location, or used in navigation that has a particularly strong visual theme – they bring with them two significant disadvantages that make them ill-suited for modern web development:

尽管传统的图像地图对于某些站点仍然是非常有效的UI模式，尤其是那些需要访问者输入地理位置的站点，或者用于具有特别强烈的视觉主题的导航中，但它们却带来了两个重大缺点，使它们不适合使用用于现代Web开发：

• Imagemap hotspots can take a long time to plot out, and are difficult to modify once created.
  Imagemap热点可能需要很长时间才能绘制出来，并且一旦创建便很难进行修改。

• Traditional imagemaps cannot be made responsive; while the image can be rescaled, the imagemap coordinates will not, meaning that hotspots will drift out of registration with the underlying image as the picture is resized.

  传统的图像映射无法做出响应 ; 虽然可以调整图像的大小，但是图像地图的坐标不会调整大小，这意味着在调整图像大小时，热点将偏离与基础图像的配准。

I’ve shown how to recreate simple imagemaps with SVG shapes, but that version did not incorporate bitmaps. As we’ll see, it’s entirely possible to integrate the two formats together.

我已经展示了如何使用SVG形状重新创建简单的图像映射 ，但是该版本未包含位图。 正如我们将看到的，完全有可能将两种格式集成在一起。

向量和位图，最后一起 (Vectors & Bitmaps, Together At Last)

SVG is generally understood as its acronym: Scalable Vector Graphics. It’s not generally appreciated that an SVG file can also incorporate bitmap images. Placing a JPEG in a new Adobe Illustrator document, cropping the artboard to the size of the image, and exporting the result as an SVG file will produce the following code, after a little cleanup:

SVG通常被理解为它的缩写：可缩放矢量图形。 通常不知道SVG文件还可以包含位图图像。 在稍作清理后，将JPEG放置在新的Adobe Illustrator文档中，将画板裁剪为图像的大小，并将结果导出为SVG文件将产生以下代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
	<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
	</image>
</svg>

Note that the <image> element in SVG is very similar to the standard HTML tag, and that the cleaned-up result is already responsive. Once we have that, we can return to Illustrator to overlay a feature of interest in the bitmap image with a vector shape, shown here partially opaque for the purpose of illustration:

请注意， SVG中的<image>元素与标准HTML标签非常相似，并且清理后的结果已经具有响应性。 有了这些信息后，我们可以返回Illustrator将位图图像中感兴趣的特征与矢量形状叠加在一起，出于说明目的，此处显示为部分不透明：

A bitmap in SVG overlaid with a vector shape

SVG中的位图覆盖有矢量形状

The code with a rectangular shape added:

添加了具有矩形形状的代码：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
	<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
	</image>
	<rect x="535" y="28" fill="#fff" opacity="0.5" width="150" height="750" />
</svg>

You can probably see where this is going. It’s easy to link vector shapes to URLs, using SVG’s variation of the <a> tag. To make a linked vector shape invisible, you can either fill it with a transparent color (using rgba) or set its opacity to 0:

您可能会看到前进的方向。 使用SVG的<a>标签变体，可以很容易地将矢量形状链接到URL。 要使链接的矢量形状不可见，可以用透明颜色填充(使用rgba )或将其opacity设置为0 ：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" >
	<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
	</image>
	<a xlink:href="//burjkhalifa.ae/en">
		<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />
	</a>
</svg>

It’s important to keep your hotspots fairly large relative to the image, so that they remain at least 50px × 50px in size when the imagemap is reduced to mobile screen sizes. That way, the interface can still be interacted with via touch.

重要的是，将热点相对于图像保持相对较大，以便在将图像映射表缩小为移动屏幕尺寸时，热点至少保持50px×50px的大小。 这样，界面仍然可以通过触摸进行交互。

To get the responsive imagemap on your page, simply add the SVG result into your HTML. To remove the generated space above and below the imagemap, use the responsive SVG technique I’ve demonstrated previously:

要在页面上获取自适应图像图，只需将SVG结果添加到HTML中即可。 要删除图像图上方和下方的生成空间，请使用我之前演示的SVG技术 ：

<figure id=burj>
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet" >
	<image width="1200" height="808" xlink:href="burj-khalifa.jpg">
	</image>
	<a xlink:href="//burjkhalifa.ae/en/">
		<rect x="535" y="28" fill="#fff" opacity="0" width="150" height="750" />
		</a>
	</svg>
</figure>

The CSS:

CSS ：

#burj {
	position: relative;
	width: 100%;
	padding-bottom: 77%;
	vertical-align: middle;
	margin: 0;
	overflow: hidden;
}
#burj svg { 
	display: inline-block;
	position: absolute;
	top: 0; left: 0;
}

In an article for Creative Bloq /Net magazine I showed how to use SVG to make an even more impressive form of responsive imagemap.

在Creative Bloq / Net杂志的一篇文章中，我展示了如何使用SVG制作响应式图像贴图的更令人印象深刻的形式。

翻译自: https://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG

svg响应式折线