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
元素上使用 width
和 height
属性。我已经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 - 这是这个“故事”的延续。
修复 <img>
标签中的 SVG 在 IE9、IE10、IE11 中无法缩放
当指定viewBox
、width
和height
属性时,IE9、IE10 和 IE11 无法正确缩放添加了img
标签的 SVG 文件。在不同的浏览器上查看this codepen。
当图像位于比图像宽度窄的容器内时,图像高度不会缩放。这可以通过两种方式解决。
在 bash 中使用 sed
删除 SVG 文件中的宽度和高度属性
根据this answer on ***,仅删除width
和height
属性即可解决此问题。
这个小脚本会递归地在你当前的工作目录中搜索 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动画吗?的主要内容,如果未能解决你的问题,请参考以下文章