svg glyph替代_使用SVG替代Imagemaps

svg glyph替代

To create a clickable map on a website – for example, to create a world map for an company with several international distribution centers –  imagemaps have been the traditional solution: bitmaps with linked “hotspots” written in HTML. While this works, imagemaps have several significant limitations in modern web design:

要创建一个网站上的点击地图-例如，创建一个公司的世界地图与多家国际配送中心- 图像映射一直是传统的解决方案：写在连接的“热点”位图HTML 。 在此可行的同时，图像映射在现代Web设计中具有几个重大限制：

• Imagemaps take significant time to develop, due to the fact that the hotspots must be plotted by hand.
  由于必须手动绘制热点，因此图像地图需要花费大量时间来开发。

• While you can scale the bitmaps that makes up the imagemap, the plotted points in HTML do not scale, “drifting” the hotspots out of registration with their associated visual area.

  虽然您可以缩放组成图像图的位图，但HTML中的绘制点不会缩放， 不会将热点“漂移”到其关联的可视区域中。

• Bitmaps tend to drop in quality or have an uncomfortably large file size when they are scaled, making them inappropriate for responsive websites.

  位图在缩放时往往会降低质量或具有不舒适的大文件大小，因此不适合响应式网站。

As an alternative, I would suggest using SVG, which avoids these limitations entirely:

作为替代方案，我建议使用SVG ，它可以完全避免这些限制：

• Accurate SVG maps of every nation and the world are already available for free (Wikipedia is a great resource, as is Régis Freyd’s MapsIcon project) with plotted outlines that can easily be turned into hyperlinked hotspots.

  每个国家和世界的准确SVG地图都已经免费提供( 维基百科是一个很好的资源， RégisFreyd的MapsIcon项目也是如此 )具有绘制的轮廓，可以轻松地将其转换为超链接的热点。

• As vector outlines, SVG files tend to be very small in file size.
  作为矢量轮廓，SVG文件的文件大小往往非常小。
• As vectors, SVG can be infinitely scaled without loss in quality or lack of registration.
  作为向量，SVG可以无限缩放，而不会损失质量或缺少配准。

As an example, I’ll use a map of lower western Canada, edited in Adobe Illustrator from Wikipedia’s SVG file of a Canadian map, then cleaned up in a text editor. The start of the file looks like this:

例如，我将使用加拿大下西部的地图，该地图是在Adobe Illustrator中从Wikipedia的加拿大地图的SVG文件中编辑的，然后在文本编辑器中进行了清理。 文件的开始看起来像这样：

<svg version="1.1" xmlns="//www.w3.org/2000/svg" viewBox="0 0 525 365">
	<path id="ab" fill="#D3D3D3" d="M351.371, 342.397c-55.342, 1.268-49.207, 1.742-54…" />
</svg>

Each path outlines the shape of a Canadian province.  They can be linked using standard <a> tags, with the href attribute and root svg element supplemented with the xlink namespace that SVG requires.

每条路径都概述了加拿大省的形状。 可以使用标准<a>标记链接它们，并在href属性和root svg元素后添加SVG所需的xlink命名空间 。

<svg version="1.1" xmlns="//www.w3.org/2000/svg" viewBox="0 0 525 365" xmlns:xlink="//www.w3.org/1999/xlink">
	<a xlink:href="//travelalberta.com/">
		<path id="ab" fill="#D3D3D3" d="M351.371,342.397c-55 …" />
	</a>
…
</svg>

If you try the SVG file in your browser, you’ll see that the link only becomes active when you hover over each vector shape, indicated by a cursor change. We want to provide a greater visual impact, and make the code more efficient at the same time. Removing the fill from each path, we recreate the appearance using an embedded style. As I’ve shown previously, you can address most any SVG element in a CSS declaration, just as you can HTML:

如果在浏览器中尝试SVG文件，则会看到只有将鼠标悬停在每个矢量形状上(由光标更改指示)时，该链接才会变为活动状态。 我们希望提供更大的视觉效果，并同时使代码更高效。 从每个路径中删除fill ，我们使用嵌入式样式重新创建外观。 正如我前所示，你可以在一个CSS声明应对几乎任何SVG元素，就像你可以HTML ：

path {
	transition: .6s fill;
	fill: #D3D3D3;
}
path:hover {
	fill: #22aa22;
}

(Vendor prefixes removed in order to save space).

(为了节省空间，删除了供应商前缀 )。

Finally, make the SVG fully responsive using this technique and embed the resulting code directly in the HTML page to take full advantage of the interaction you have built.

最后， 使用此技术使SVG充分响应， 并将结果代码直接嵌入HTML页面中 ，以充分利用您已建立的交互作用。

There’s a lot more that we can do with this technique, as shown in this reading list. I would suggest this approach as an excellent replacement for many imagemap applications.

如本阅读清单所示，我们可以使用此技术做更多的事情。 我建议这种方法可以很好地替代许多图像地图应用程序。

翻译自: https://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps

svg glyph替代