Fatal编程技术网
  • svg/
  • SVG Sprite-悬停-响应图像

SVG Sprite-悬停-响应图像

svg

SVG Sprite-悬停-响应图像,svg,hover,sprite,Svg,Hover,Sprite,我有以下代码作为本页的一部分-。我使用SVG精灵来显示页面中间的三个盒子。此页面是用引导程序编写的 问题: 如何将精灵的另一个区域包含为悬停图像 为什么当我缩小屏幕尺寸时，图像不会变小 只需将src属性更新为指向另一个区域 如果svg图像的父div变小，则应调整其大小。可以通过多种不同的方式实现这一点，例如使用css媒体查询。主要的问题似乎是祖父母div的固定宽度是655px，所以里面的三个div都不小于三分之一 如果预期的显示区域（在本例中由元素大小定义的称为视口）的纵横比与您引用的s

我有以下代码作为本页的一部分-。我使用SVG精灵来显示页面中间的三个盒子。此页面是用引导程序编写的

问题:

  • 如何将精灵的另一个区域包含为悬停图像
  • 为什么当我缩小屏幕尺寸时，图像不会变小

  • 只需将
    src
    属性更新为指向另一个区域
  • 如果svg图像的父div变小，则应调整其大小。可以通过多种不同的方式实现这一点，例如使用css媒体查询。主要的问题似乎是祖父母div的固定宽度是655px，所以里面的三个div都不小于三分之一
    • 如果预期的显示区域（在本例中由元素大小定义的称为视口）的纵横比与您引用的svg视图不同，则svg中的一些其他资源可能会变得可见，如您的示例所示

    下面是另一个类似的情况，如果纵横比不匹配，视口由虚线边框指示