SVG Sprite - 悬停 - 响应式图像

Question

我在此页面中有以下代码 - http://s1080372.instanturl.net/student/default.html。我正在使用svg精灵来显示页面中间的三个框。此页面是用bootstrap编写的。

问题：

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

2. 为什么当我缩小屏幕尺寸时图像会变小？

       
    
       

Answer 1

1. 只需更新src属性即可指向其他区域。
2. 如果svg图像的父div变小，则应调整大小。可以通过多种不同方式实现这一点，例如使用css media-queries。主要问题似乎是祖父母div的固定宽度为655px，因此内部的三个div不会小于三分之一。

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

如果长宽比不匹配，＆lt; img＆gt;可能会发生另一种类似example的情况。视口以虚线边框表示。