SVG CSS变换缩放动画在Safari或Firefox上不起作用

文章/答案/技术大牛

发布

1回答

css、svg

我创建了一个SVG动画，它在Chrome上工作得很好，但在Firefox和Safari上，缩放动画到处都是。我已经调整到它可以在Chrome和Firefox中运行的位置，但不能在Safari中运行。我尝试过transform-box:fill-box，它在Firefox中似乎有帮助，但在Safari中却没有帮助。这倾向于在Firefox中工作，但在其他浏览器中不起作用这里有没有一个可以同时适用于所有三种浏览器的解决

浏览 11提问于2018-08-02得票数 0

回答已采纳

1回答

Safari SVG蒙版渲染故障(剪辑路径)

svg、safari、mask、clip-path

我正在尝试使用SVG蒙版制作图像揭幕效果，其中具有相当复杂几何形状的路径通过CSS变换进行缩放：看起来Safari仍然没有完全支持clip-path属性，但是它应该能够支持这个特殊的属性。有什么想法吗？

浏览 0提问于2020-05-06得票数 0

1回答

为什么iOS safari浏览器中的填充和边距看起来不一样？

android、html、css、safari

在safari浏览器的iphone设备上，我的网站看起来就不一样了。我有一些填充和边际的问题。我如何解决我的问题？.gallery .images>div.active { height: 400px; } 这是在safari

浏览 30提问于2020-07-17得票数 1

1回答

SVG动画在Firefox和Safari上不起作用

html、css、animation、svg、css-animations

在Chrome上运行完美，但在Firefox上没有动画效果，而在safari上根本不显示。你知道问题出在哪里吗？https://codepen.io/jamalfaiez/pen/zYwVKPq <div class="circle_anim rndm_01 rndm_rotate_03"> <svg version142" cy="142" r="137"></circl

浏览 58提问于2021-09-04得票数 0

1回答

带有css缩放的JQuery / Javascript智能向导

jquery、html、css、jquery-ui

该项目使用可变缩放级别，我已在代码中对此进行了补偿。但是，我不能让这段代码和我的智能向导代码一起工作。 <div class="objectx"></div></

浏览 1提问于2014-05-12得票数 1

1回答

为什么SVG在webkit浏览器下缩放时会变得模糊？

css、animation、svg、webkit

当使用CSS比例变换缩放SVG图像时，图像在Chrome或Safari下变得模糊？

浏览 0提问于2014-10-23得票数 11

0回答

javascript动画在safari或firefox上不起作用

javascript、jquery、ruby-on-rails、cross-browser

我的代码中有一个javascript动画，它在chrome中似乎可以工作，但在safari或firefox中就不行了。然而，当我创建了小提琴，并在safari和firefox中运行小提琴时，它工作了。

浏览 2提问于2016-12-29得票数 1

1回答

不同浏览器中奇怪的内联SVG故障

html、css、svg、sketch-3

-All svg的笔画宽度为“2”，但是twitter svg需要'4'的笔画宽度才能达到同样的效果(适用于Chrome、Firefox和Safari) ‘解决方案’.通过将fill="#999999"更改为twitter svg‘rect’标

浏览 4提问于2017-08-17得票数 0

2回答

放大后的SVG在Safari中显示模糊文本

html、svg、safari

我尝试了很多webkit css的东西。也许我在错误的元素上使用了它们，或者它们就是不起作用。safari： position: fixed;

浏览 0提问于2018-08-10得票数 0

1回答

Firefox下拉阴影CSS悬停动画在SVG上不起作用

html、css、animation、svg、drop-shadow

shadow(-.04px 0px .02px #5C0704) drop-shadow(.02px 0px .05px #5C0704); }提前谢谢你。

浏览 0提问于2018-07-16得票数 0

1回答

CSS转换导致SVG在Firefox中摇摆

css、firefox、svg、css-transitions

我在我的应用程序中有一个播放按钮的SVG，我在悬停时对其应用了CSS变换效果，并以少量的比例放大。这在Chrome中运行良好，但是在Firefox54中，当动画在移除:hover伪类后重置时，内部多边形会轻微摆动。我已经尝试了的答案，但都没有用。我正在使用的SVG和CSS，请确保在Firefox中查看。这个问题非常微妙，似乎三角形的缩放重置到了一个不同的位置，一旦过渡结束，它就会迅速恢复到原来的位置。我如何在Firefox<

浏览 3提问于2017-06-26得票数 0

2回答

CSS动画在iPad chrome或Safari上不起作用

css、ipad

我有一个简单的CSS动画，它在桌面上运行良好，但似乎不能在iPad上工作。Chrome和Safari我都试过了。

浏览 0提问于2017-06-24得票数 1

1回答

Firefox中的SVG文本剪辑路径

css、svg、css-transforms、clip-path

我正在使用一个文本剪辑路径来创建一个显示文本的SVG，这样我就可以动画背景来获得一个有趣的文本显示效果。 <!479.07 -11.62 395.78 -11.62 429.52 153.84 512.8 153.84 479.07 -11.62" style="fill: #f89c2c"/>

浏览 8提问于2017-07-06得票数 1

回答已采纳

2回答

带有SVG文本动画的工件(CSS3)

css、svg、css-animations、svg-animate、visual-artifacts

在大多数现代浏览器中，我都在体验用于文本动画/缩放的工件: Chrome 29、IE10、Safari 5.1 ( Windows )、Safari 6.0.5 (Mac)和Opera 16。只有Firefox (23版本测试)运行良好(除了Safari 6)。背景：这是标记云的一部分。SVG元素由公司内部库(在jsfiddle中硬编码)生成。我增强了我们的实现，以添加这个

浏览 4提问于2013-09-17得票数 3

回答已采纳

2回答

svg笔划-dashoffset动画在safari或firefox中不起作用

svg、safari、css-animations、mozilla

我有这个css：fill:#97e8da;}fill: #46ceb4;} stroke-width看起来像这样： <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/199

浏览 0提问于2015-01-25得票数 1

3回答

如何检测SVG动画是否可用

animation、webkit、svg、mozilla、smil

有没有一种好的方法来检测SVG动画是否可用，然后适当地调整DOM？我正在使用animateMotion来动画一个包含images的g的运动。

浏览 2提问于2011-04-10得票数 4

回答已采纳

1回答

字体脸高谭不是工作在我的IE 8,9,10，但在我朋友的IE工作良好？

css、internet-explorer、fonts、font-face

我将CSS中的字体设置为： font-family: 'GothamBold';} font-family: 'GothamBook';/fonts/GothamBook.svg#Goth

浏览 0提问于2014-09-18得票数 1

回答已采纳

2回答

JavaScript缩放整个分区

javascript、jquery、html、zooming

我正在寻找一个可以放大整个div的JQuery脚本。我找到了以下插件：这些插件提供了我需要的东西(只需使用滚轮进行放大和缩小)。但我有一个问题，我需要有一个在一个完整的分区放大脚本。有人能帮帮我吗？

浏览 1提问于2011-08-15得票数 4

1回答

Chrome或IE中悬停不工作的不透明度

css、google-chrome、wordpress、internet-explorer-10

我使用一个WordPress插件来创建悬停时具有不透明度效果的框，但是它似乎在Chrome或IE上不起作用，相反，它们会减弱为不透明度:1 (100%)，尽管我已经将CSS修改为不透明: 0.2。在Safari和Firefox上工作得很好，但Chrome或IE就不行了。这会是webkit的问题吗？滑块下方的框：

浏览 1提问于2015-03-29得票数 1

回答已采纳

2回答

缩放具有复杂动画路径的SVG

javascript、jquery、html、css、svg

我的页面上有SVG的代码。这是一条赛道，我有一辆车，当你沿着这一页往下走时，它会沿着小路滚动。<div class="my-svg-container"> position: absolute; " class="my-svg" preserveAspectRatio="xMinYMin meet"><d

浏览 0提问于2018-02-12得票数 2

回答已采纳

点击加载更多