svg中不可以使用css 3d动画吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了svg中不可以使用css 3d动画吗?相关的知识,希望对你有一定的参考价值。

参考技术A svg有直接操纵图形的能力,不用css 参考技术B svg和html是不一样的,不是由css控制的

在 ie9 中不遵守 img 元素比例中的 SVG

【中文标题】在 ie9 中不遵守 img 元素比例中的 SVG【英文标题】:SVG in img element proportions not respected in ie9 【发布时间】:2012-04-04 08:23:57 【问题描述】:

CSS:

img
    max-height:30px;

HTML:

<img src="foo.svg" />

我正在寻找这个 svg 图像以按比例缩放到 30 像素高的最大高度。 svg 的自然尺寸为 200 像素 x 200 像素。在 FF 和 Chrome (30x30) 中效果很好,但在 IE9 中图像为 30x200。现在这是踢球者。它只发生在某些 SVG 文件中,其他 svg 可以正确缩放。

似乎不同的是,一个是由多边形组成的,另一个是由路径组成的。

无法正确缩放:

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

是否正确缩放:

知道为什么会发生这种情况,或者我如何让第一个在 ie9 中按比例缩放?

【问题讨论】:

你的图片消失了。 根据您是否将 IE 的 img 设置为 100%,有很多注意事项。我整理了一个测试页面,部分是为了让 IE 团队修复它,同时也为了了解使用不同属性时会发生什么:codepen.io/larrybotha/full/hmlAs 这篇文章可能会有所帮助:css-tricks.com/scale-svg 【参考方案1】:

要在浏览器中获得更一致的缩放,请始终确保指定 viewBox,但不要在 svg 元素上使用 widthheight 属性。我已经created a test page 比较了指定不同 SVG 属性与 CSS 中指定的宽度和高度相结合的效果。在几个不同的浏览器中并排比较,你会发现处理上有很多不同。

【讨论】:

现在的问题是,“高度受限”会出现问题。查看您的测试页面,ie9 中没有任何选项与 chrome 匹配。这是否意味着我需要为 ie9 提供单独的 svg? @Fresheyeball 要么就是这样,要么找到一种方法让它在限制宽度而不是高度的情况下工作。可能还值得研究 preserveAspectRatio 属性,看看是否明确设置它可以改善这种情况。 是的,目前我正在指定:高度、宽度、veiwbox 和 preserveAspectRatio。而且我同时限制了高度和宽度,但在图像仅受高度限制的情况下,它会扭曲。从您的示例中,如果我删除高度和宽度规范,ie9 会运行,但 chrome 不会。 这里还有一些有用的提示:blogs.msdn.com/b/ie/archive/2011/10/27/… 您可以使用$ find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*"//' -e 's/height="[0-9]*"//'递归删除当前文件夹中Mac上所有svg的宽度和高度属性(删除-i之后的空"" for linux)【参考方案2】:

在 ie9 中修复它而不是坚持这个。我不知道为什么,但是您应该通过 css-rule 设置 width:100%,而不是在 img-tag 中设置。长宽比会变魔术))它帮助了我,希望这篇文章能帮助其他人。

【讨论】:

可笑的是,这在 3 个版本的 IE 中都没有修复。 您可以添加以下内容以仅针对 IE9、IE10、IE11 中的 SVG:img[src*=svg] width/*\**/: 100%\9; 这解决了我在 IE11 上遇到的一个烦人的问题。谢谢。【参考方案3】:

我花了 数周 尝试各种解决方案,以便能够在适用于主要现代浏览器的大小自适应网站中使用 SVG。

SVG 需要使用 CSS 百分比进行缩放并包含嵌入的位图图像。

我在 IE 中发现的唯一解决方案是将外部 SVG 嵌入到 标记中。

有多种解决方案可以将 IE 中的 SVG 大小调整为严格的像素大小,但它们都不适用于百分比调整大小。

我创建了一个非详尽的测试套件here。

【讨论】:

你能举个例子吗? 我在答案中添加了一个简单测试套件的链接。【参考方案4】:

你也可以看这里:https://gist.github.com/larrybotha/7881691 - 这是这个“故事”的延续。


修复 &lt;img&gt; 标签中的 SVG 在 IE9、IE10、IE11 中无法缩放

当指定viewBoxwidthheight 属性时,IE9、IE10 和 IE11 无法正确缩放添加了img 标签的 SVG 文件。在不同的浏览器上查看this codepen。

当图像位于比图像宽度窄的容器内时,图像高度不会缩放。这可以通过两种方式解决。

在 bash 中使用 sed 删除 SVG 文件中的宽度和高度属性

根据this answer on ***,仅删除widthheight 属性即可解决此问题。

这个小脚本会递归地在你当前的工作目录中搜索 SVG 文件,并删除属性以实现跨浏览器兼容性:

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/ //' -e 's/ //'

注意事项

删除宽度和高度属性将强制图像在非 IE 浏览器中占据其容器的整个宽度。

IE10(其他浏览器需要测试)会将图像缩小到任意大小 - 这意味着您需要在 CSS 中添加 width: 100% 以使这些图像适合其容器。

使用 CSS 定位 IE

由于上述解决方案无论如何都需要 CSS,我们不妨使用 hack 来让 IE 正常运行,而不必担心必须管理每个单独的 SVG 文件。

以下内容将针对 IE6+ 中包含 SVG 文件的所有 img 标签(不过,只有 IE9+ 支持 SVG 文件)。

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] 
  width: 100%; 

/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 
  img[src*=".svg"] 
    width: 100%; 
  

注意事项

这针对 IE9、IE10 和 IE11 中每个包含“.svg”的img 标记 - 如果您不希望在特定图像上出现这种行为,则必须添加一个类来覆盖该图像的这种行为。

【讨论】:

【参考方案5】:

这个 scss 不知何故解决了我的问题。

ul 
  li 
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    img 
      height: 20px;
      margin: 0 10px;
      display: inline-block;
    
  

我实际上是在为我的页脚制作一个居中的徽标列表,并且遇到了宽度问题。通常我会创建一个内联块,其中包含一个块元素。用 inline-block 元素创建一个 inline 元素对我有用。这是该错误向我显示的特定实现,并不能真正解决每个错误,但希望它可以帮助阅读本文的人。

【讨论】:

【参考方案6】:

这个问题的一个罕见情况可能是在 webpack 中使用 image-webpack-loader。 加载程序可能正在删除某些 svg 的 viewBox 属性。您需要通过 webpack.config.js 禁用该选项

loader: 'image-webpack-loader',
    options: 
        svgo: 
            plugins: [
                removeViewBox: false,
            ],
        ,
    ,

【讨论】:

以上是关于svg中不可以使用css 3d动画吗?的主要内容,如果未能解决你的问题,请参考以下文章

SVG 元素的 CSS 动画在 Chrome 中不起作用

SVG动画在Edge或IE中不起作用

带有变换的css关键帧动画不适用于SVG

jQuery 动画不透明度在 Safari 中不起作用

CSS3 动画在 Firefox 中不起作用

svg +动画和 css3 动画的区别