SVG Sprite - 悬停 - 响应式图像

Question

我有以下代码作为此页面的一部分 - http://s1080372.instanturl.net/student/default.html。我正在使用 svg sprite 来显示页面中间的三个框。此页面是用引导程序编写的。

问题：

1. 如何将精灵的另一个区域包含为悬停图像？

2. 为什么我缩小屏幕尺寸后图像没有变小？

Answer 1

1. 只需更新src 属性以指向另一个区域。
2. 如果 svg 图像的父 div 变小，则应调整其大小。可以通过多种不同的方式来做到这一点，例如使用 css 媒体查询。主要问题似乎是祖父 div 的固定宽度为 655 像素，因此内部的三个 div 不会小于该宽度的三分之一。

如果预期的显示区域（又名 viewport，在这种情况下由 元素大小定义）具有与您引用的 svg 视图不同的纵横比，那么其中的一些其他资源svg 可能会变得可见，如您的示例所示。

这是另一个类似的example，如果纵横比不匹配会发生什么， 视口由虚线边框指示。