SVG仅在狩猎时resize
我有这个奇怪的问题，svg在safari中hover时resize。 我正在使用jquery的hover来替换svg略有不同的页面上的svg。 这项工作适用于所有浏览器，除了safari，由于某种原因完全调整了鼠标hover和鼠标输出的svg。
我的svg的高度设置在css中
img.svg-graphic { height: 180px; } 并在页面上显示为图像
当我将鼠标hover在容器上时，我将svg替换为另一个，然后当我将鼠标hover时返回默认值。
$('.container').hover(function() { $('.svg-graphic').attr('src', 'svg-icons/version2.svg'); }, function() { $('.svg-graphic').attr('src', 'https://stackoverflow.com/questions/21536937/svg-resizes-on-hover-in-safari-only/svg-icons/version1.svg'); });
关于什么可能导致safari完全忽略尺寸的任何想法？
这绝对是一个奇怪的Safari bug。 我认为这与Safari如何从缓存中恢复原始图像有关。 无论如何，我发现了一种适用于我们hover代码的解决方法。 如果通过额外的查询字符串参数使恢复的图像的URL唯一，则似乎避免了SVGresize错误。 这是我们网站的代码（请注意恢复时的“＆SafariFix”查询字符串参数）：
// activate any img hovers based on the hover-src attribute $("img[data-hover-src]").closest("a").hover( function () { var image = $(this).find("img[data-hover-src]"); if (image.data("originalSrc") === undefined) { image.data("originalSrc", image.attr("src")); } image.attr("src", image.data("hoverSrc")); }, function () { var image = $(this).find("img[data-hover-src]"); image.attr("src", image.data("originalSrc") + "&SafariFix"); } );
几天前我遇到了类似的问题 – 尝试在CSS中给SVG一个“width：auto”并尝试它是否有效。
img.svg-graphic { width: auto; height: 180px; }
这是一个令人讨厌的错误，简单而简单，并且可能无法做任何事情（我经常在搜索后找不到任何解决方案）。
图像报告的大小正确，即使您在图像周围放置1px边框，它也只会缩小到此边界框内。 它也非常不一致且不可重复。 如果您有响应式设计并调整页面大小，则图像会自行修复。
这是可能的解决方案
- 等待Safari 8（或者下一个版本的任何内容）并忘记它
- 禁用Safari的翻转
- 使用png / jpg图像
- 将两个图像叠加在一起，显示并隐藏它们而不是替换它们
我想我会采取两种图像的方法。
注意：我没有Safari for Mac，只在iOS7的iPad上进行测试
我有这个错误，我花了一段时间和相当多的实验（和挫折）终于找到了解决方案。
基本上，如果源和目标SVG图像的宽度和高度不相同，那么您将遇到此错误。
我能够通过编辑SVG文件本身的宽度和高度属性来克服这个错误：
width="20px" height="20px"
截图：
如果确保源SVG图像和目标SVG图像上的这些值相同，则应解决此错误。
这里提出的解决方案似乎都不适用于我目前正在进行的工作，因为我将svg加载为背景图像而不是img或svg标签。 我觉得hover效果对于UX来说比拥有SVG更重要，所以我针对包含SVG背景图像的元素并添加了一个safari类，因此我可以强制使用CSS来使用PNG后备。 当然可以有更好/更高效的处理方式，但这是我的jQuery：
if ( navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) { $('*').each( function() { if ( ! $(this).css('background-image') ) { return; } else if ( ~ $(this).css('background-image').indexOf(".svg") ) { $(this).addClass('safari'); } }); }
然后我只使用CSS中的safari helper类设置一些后备：
.element { background-image: url('img.png'); background-image: url('img.svg'); } .element:hover { background-image: url('img-hover.png'); background-image: url('img-hover.svg'); } .element.safari { background-image: url('img.png'); } .element.safari:hover { background-image: url('img-hover.png'); }
虽然这在这个具体案例中并没有真正帮助，但它可以帮助那些通过搜索偶然发现这个答案的人。
我尝试了这个线程中的所有解决方法在Safari 11.1上无济于事，但最终找到了一个新的。
该错误似乎只会触发影响背景的CSS转换 – 使用transition: color很好，但transition: all 不是 。
我已经整理了一个CodePen来展示这个问题。