腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
用animateTransform动画SVG
、
尝试用skewX动画SVG元素。然而,它的工作方式并不完全是我所希望的。 Now:底部移动到左目标:上半部分应该移动到右边(并且底部保持位置) 我和transform-origin试过了,但没成功。有什么办法解决这个谜团吗? <svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" viewBox="-50 -50 102 102"> <g> <rect width="10%" height=
浏览 2
提问于2020-04-26
得票数 0
回答已采纳
1
回答
是否可以在SVG中按指定方向缩放矩形?
这是我的SVG代码: <svg> <path transform="matrix(1.00 0.00 0.00 1.00 0.72 0.60)" fill="none" stroke="#000000" d="M 0.00 0.00 L 0.00 78.87" /> <path transform="matrix(1.00 0.00 0.00 1.00 79.11 0.48)" fill="none" stroke="#000000" d="
浏览 0
提问于2017-06-10
得票数 0
2
回答
SVG -从中心重复的尺度路径(脉动)
、
我有一个svg图形,中心点在(100,100)。 <g id="centre"> <circle cx="100" cy="100" r="2"/> </g> 一条路径(就像一个圆圈)应该围绕着它并脉动--我的意思是,它应该将自己从0扩展到值,在点上集中式 (100,100)。在执行此操作时,脉冲还应该从opacity=0、opacity=0.5和opacity=0开始。(我不想用路径代替路径。) 整件事看起来是这样的: <g transform="translate(100,
浏览 4
提问于2013-11-02
得票数 3
回答已采纳
1
回答
SVG animateTransform切换只工作一次
、
、
、
、
如果在矩形上单击两次后续的按钮,则会看到一个动画切换: <svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container"> <rect id="project-10-activator" class="" stroke="black" stroke-width=&
浏览 5
提问于2021-04-04
得票数 1
回答已采纳
1
回答
SVG animateTransform不工作于css3变换
、
、
、
SVG animateTransform不像css3转换那样工作。 svg.truck { overflow: visible; } .smoke{ transform-origin: 50% 50%; animation: smoke 1.5s infinite ease-out; } @keyframes smoke { from {transform: translate(0, 5px) scale(1, 1);} to { transform: translate(40px, 10px) scale(4, 4);} } <svg class='tr
浏览 1
提问于2015-12-15
得票数 1
回答已采纳
2
回答
SVG缩放动画从中心点而不是左上角开始
、
、
如何在SVG中使用animateTransform从中心点而不是左上角缩放对象? 示例: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"> <circle style="fill:blue;" cx="50" cy="50" r="4
浏览 6
提问于2015-08-28
得票数 14
回答已采纳
1
回答
SVG animateTransform同时旋转和缩放同一对象?
、
、
我想同时对一个物体进行缩放和旋转。到目前为止,我的尝试失败了。我只能连锁动画(旋转,然后缩放),但不能旋转和缩放在一起。 我错过了什么? 我试图删除“additive=”和,但这只是覆盖和忽略规模动画. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3
浏览 2
提问于2015-01-07
得票数 4
回答已采纳
2
回答
SVG动画在旋转时转换为0,0
、
我正在尝试让SVG动画旋转工作,理想的情况是围绕它的中心(我一直尝试它的旋转作为平移点+ 1/2宽度和高度,但我猜我错过了一些矩阵和翻译?) 当我尝试时,它在执行旋转之前将对象转换为0,0,而不是围绕它的中心(或附近),这是我想要避免的。 这里的小小提琴 <svg xmlns="http://www.w3.org/2000/svg" height="800" width="800" version="1.1"> <g id="1003_moveable" transform="tr
浏览 1
提问于2013-10-17
得票数 1
回答已采纳
1
回答
带有scg路径和raphaeljs的三维翻转
、
、
、
、
我使用来绘制一些六边形的形状,使用rapheal的.path()方法。效果很好。现在,我想旋转形状围绕y轴,以板条箱的三维翻转效果,并显示“背面”的形状,当用户盘旋在形状上。据我所知,像rotateY这样的东西在svg中还不可能实现,对吗? 我的问题是:还有其他方法来达到这个效果吗?也许使用CSS转换?(这在IE <9中可能不起作用)或者用某种3x3变换矩阵来伪装效果? 我还找到了,但我不确定它是否能帮助我,也不确定如何与raphaeljs一起使用它: 谢谢你的帮助! 尼克
浏览 1
提问于2013-08-23
得票数 0
回答已采纳
2
回答
从圆到线的SVG动画
、
、
我想把一个圆画成一条线(路径)。 这个是可能的吗? 也许问题出在我用谷歌搜索的方式上。 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95.28 95.28"> <title>circle</title> <circle cx="47.64" cy="47.64" r="47.14" fill="n
浏览 0
提问于2017-02-02
得票数 0
1
回答
垂直和水平方向的SVG动画圆圈
、
、
、
我正在尝试创建一个SVG加载占位符,我希望将3个动画圆圈垂直和水平地放置在矩形中,而不相互重叠。我试着将它们放入一个g中,并使用CSS应用width和margin,但这不起作用。是否有办法实现这一目标? <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="200" viewBox="0 0 500 100"> <rect widt
浏览 2
提问于2021-09-25
得票数 0
1
回答
SVG动画缩放,同时防止组在一端移动
、
我试着用svg动画来得到蜻蜓的翅膀。 我是通过缩放x轴上的左翼和右翼来做到这一点的。问题是,当我缩放它时,机翼就会移动。我希望机翼的左或右边缘保持在一个地方时,它的规模。 这是一个机翼的代码 <g id="wing_left"> <g> <path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4 c15.2,14.8,88.3,17.3,109.3,11.3C162.
浏览 1
提问于2014-10-29
得票数 0
回答已采纳
1
回答
SVG animateTransform转换和缩放同时失败
、
我有一个我想要使用animateTransform动画的路径。我想同时平移和缩放路径。它不起作用。显然,只有第二个动画有效:在本例中是scale。我做错了什么? svg{ width:300px; border:1px solid; fill:none; stroke:black; } <svg viewBox="-100 -100 200 200"> <path d="M-36.911,0C-36.911,-19.833,-19.833,-35.911,0,-35.911C19.833,-35.911,35.911,-19.833,35.9
浏览 37
提问于2019-03-17
得票数 3
回答已采纳
2
回答
我如何动画一组SVG,而不是一次只动画一个?
、
、
、
、
我有一个小的svg绘图,我想要动画,它由几个SVG元素组成。我希望能够将它们放在一起制作动画,就好像它们是同一件事一样。 到目前为止,我已经将它们组合在一起,并在每个SVG的末尾放置了一个单独的动画,如下所示: <g id="buildings"> <rect fill="#aad4ff" height="22" width="90" x="223.5" y="376.5"> <animate attributeType="XML" att
浏览 0
提问于2019-02-13
得票数 1
2
回答
如何为svg的animateTransform设置起始点
、
如果您查看此SVG,我将动画transform属性,默认情况下它从左上角移动。我如何将它从中间改为动画呢? <svg width="400" height="400" viewBox="0 0 400 400"> <rect width="400" height="400" fill="#495ade"/> <g> <circle cx="50" cy="50" r="50" fill="
浏览 2
提问于2021-03-02
得票数 2
回答已采纳
1
回答
手动设置pan.x和pan.y时动画svg pan
、
、
我有一个动态生成的svg图像,我正在使用Ariutta的SVG-pan-缩放插件。当我双击svg图像时,我设置pan.x = centerOfScreenX,并将pan.y = centerOfScreenY设置为在屏幕中间对图像进行居中。ie: $('.svg').dblclick(function(){ zoom.pan({'x':centerOfScreenX, 'y':centerOfScreenY }); }); 目前,这导致图像只是突然移动到屏幕的中心。有没有一种方法,我可以动画这个变化的潘位置,使图像双目移动沿路径到屏幕的中
浏览 2
提问于2015-03-21
得票数 0
回答已采纳
2
回答
带href的SVG animateTransform
、
试图移动一个SVG元素使用javascript的互动游戏; <!DOCTYPE html> <html> <body> <svg width="300" height="300"> <circle id="circ" cx="50" cy="50" r="40" fill="black" ></circle> <animateTra
浏览 1
提问于2018-07-06
得票数 0
回答已采纳
1
回答
用矩阵动画gradientTransform
、
、
我试图将一个由更多svg对象组成的形状变形为另一个。对于所有需要变形的元素,我都使用了动画功能。一切都很顺利,直到我注意到原本应该是灰色的阴影实际上是白色的,我发现问题出在gradientTransform上。我对一个对象使用一个gradientTransform(矩阵(a,b,c,d,e,f)),对另一个对象使用另一个。我在文档中看到gradientTransform能够动画,那么为什么这不起作用呢?这是否意味着当动画gradientTransform不接受矩阵作为值?还是有其他方法可以做到? 这里是一个小提琴,只有一部分动画复制问题。您可以清楚地看到,有两个阴影形状,一个灰色的顶部左侧部分
浏览 0
提问于2015-09-08
得票数 0
回答已采纳
1
回答
SVG动画如何累加应用值
、
、
、
我正在做一些工作,需要从javascript中旋转一些SVG中的元素。为此,我一直在测试如何设置SVG项,定义动画,然后基于SVG本身之外的任意事件运行动画(来自js)。在运行动画之前,我设置了旋转的度数,以及我希望旋转发生的速度。 这一切都运行得很好。 我的问题是,当动画完成时,svg会恢复到它的原始状态。这意味着如果我将SVG旋转到90度,当动画完成时,SVG会立即恢复到0度。 我在上看过svg文档,特别是加法和累加选项,但它们似乎对我不起作用。 我确信这是微不足道的,但我看不出问题的原因是什么。 多亏了罗伯特,我找到了解决方案。我已经添加了下面的解决方案。
浏览 2
提问于2012-09-26
得票数 0
回答已采纳
1
回答
在按钮上方悬停时播放SVG动画
、
、
、
所以我得到了这个SVG,它已经包含在svg本身中,现在我的问题是如何启动动画,同时在svg图标上盘旋,svg已经为每个移动的部分提供了id。 当悬停在svg之外时,我如何重新设置它呢? <?xml version="1.0" encoding="utf-8"?> <svg id="family" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" widt
浏览 1
提问于2017-04-03
得票数 0
回答已采纳
1
回答
CSS转换-不工作在Chrome中的SVG
、
、
、
、
我试着用SMIL动画化对象中心周围的比例转换,它在Firefox 38中工作,但在Chrome 43中不工作,在Chrome中CSS转换-原来的属性似乎由于某种原因被忽略了。 原始 document.querySelector("#trigger").addEventListener("click", function(e){ if (e.ctrlKey) document.querySelector("#triggerScaleOut").beginElement(); else document.querySel
浏览 1
提问于2015-07-01
得票数 0
回答已采纳
1
回答
在没有viewBox的情况下围绕中心进行缩放?
、
、
我知道有很多关于这个问题的争论,但我想知道是否有一种方法可以在不使用viewBox的情况下围绕元素的中心进行缩放(据我所知,它必须应用于svg,而不是单个对象)。在本练习中,我正在努力理解svg缩放的逻辑,我希望出现(不可见的)红色圆圈,然后在单击黄色矩形时缩放(就像它弹出一样)。有人能帮我吗?提前感谢 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns:dc="http://purl.org/dc/elements/1.1/
浏览 1
提问于2017-04-01
得票数 0
1
回答
将SVG动画的结尾另存为png (快速)
、
、
、
、
下面的动画svg显示了从左到右平移的点: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="432px" height="574px" viewBox="0 0 432 574"> <path d="M217.074,165.651c-36.607,0-6
浏览 17
提问于2021-02-14
得票数 1
1
回答
SVG元素是否有调整大小的动画
、
我有一些由JS代码动态生成的svg元素,比如由一些几何图形组成的直线和圆,我想要实现的是尝试使用svg动画功能连续地重新缩放图形。我的意思是,当然,我可以重新计算直线上每个点的坐标,和圆的中心点,然后从那里开始,但这将是一个太乏味的解决方案,我该如何做得更好呢? 非常感谢!
浏览 0
提问于2013-08-07
得票数 0
1
回答
一条路径的简单SVG缩放
、
、
我现在有以下SVG,并希望对路径进行动画化: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="112.5px" height="115.4px" viewBox="0 0 112.5 115.4" enable-backgroun
浏览 4
提问于2015-05-27
得票数 0
回答已采纳
2
回答
有没有人有每个SVG元素的允许内容元素的列表?
、
我正在尝试构建一个perl散列,它描述每个SVG元素允许的内容元素。有没有人有可以做到这一点的perl脚本?
浏览 1
提问于2013-09-11
得票数 0
1
回答
使用SVG animateTransform在SVG内旋转路径
、
、
、
这是我之前问过的一个问题的后续,。在@Peter o.的建议下,我重新设计了我的软件以使用SVG而不是HTML画布。我现在更愿意创建一个高质量的图像: 整个对象有一个外部<svg>。每个视图都有一个翻译好的<svg>。相反,箭头是作为路径绘制的。 下面是生成箭头的相关代码: transformForPiece(p) { return 'translate(' + this.radius + ',' + this.radius + ') rotate('+p.angle+')'
浏览 5
提问于2020-12-29
得票数 1
回答已采纳
1
回答
SVG动画在错误的位置旋转
、
我是SVG动画的新手,我对它有一点纠结。 我已经编写了下面的代码来围绕中心点旋转图像。然而,它正在切断图像的顶部和左侧。 <svg width="350" height="350"> <g transform="translate(175, 175)"> <svg> <g> <animateTransform attributeType="xml" attributeName="transform
浏览 10
提问于2019-12-04
得票数 0
回答已采纳
1
回答
移动形状时未正确应用SVG动画
、
、
我正在尝试将SVG动画应用于一个移动了(100,100)像素的三角形: <svg width="800" height="600"> <polyline shapeId="triangle" fill="transparent" stroke="gray" points="0,0 52.5,160 105,0 0,0 " transform=" translate(100 100)"> </polyline> </svg
浏览 5
提问于2021-04-29
得票数 0
回答已采纳
2
回答
为什么蓝色的圆圈不在自己的中心旋转?
、
、
为什么蓝色的圆不是在自己的轴线的中心旋转呢?下面你可以找到我以前的代码。 这里您可以看到我的CSS和比例SVG circle { animation: grow 2s infinite; transform-origin: center; } @keyframes grow { 0% { transform: scale(1); } 50% { transform: scale(0.5); } 100% { transform: scale(1); } } <svg xmlns="http://www.w3.org/2
浏览 1
提问于2019-05-29
得票数 0
回答已采纳
2
回答
CSS动画每秒钟重复一次
、
、
、
我当前正在动画一个svg元素,如下所示 .r1 { transform-box: fill-box; transform-origin: 50% 50%; animation-name: simpleRotation,xRotation; animation-delay: 0s, 2s; animation-duration: 2s; animation-iteration-count: 1, 1; animation-timing-function: linear; animation-directi
浏览 16
提问于2022-02-11
得票数 0
回答已采纳
2
回答
是否重新启动整个SVG animateTransform序列?
、
、
、
、
我有一个SVG图形,我是通过animateTransform动画。它会在屏幕上设置动画,然后一直显示在屏幕上,直到您单击它,然后它会缩小到0并且无法恢复。我想做的是在最后一个动画结束(缩放到0)后2秒内重新开始整个动画序列,这样它就会重新开始动画。 我该怎么做呢?谢谢! <!-- Keep scaled at 0 on load --> <animateTransform attributeName="transform" attributeType="XML" type="scale" f
浏览 4
提问于2013-08-20
得票数 2
1
回答
SVG feTurbulence过滤器不会在火狐上旋转animateTransform
、
、
、
、
这段代码保存在一个.SVG文件中,它在大多数浏览器上按预期进行动画,但在火狐上则不然。 feTurbulence过滤器和旋转动画分别在任何其他形状上工作,但是当组合在一起时,整个svg就会中断,什么也不会显示。 我不知道这是否是我的错,它是否不被支持,或者我是否应该报告它是一个错误。 <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 100 100"> <filter id="THE_F
浏览 9
提问于2022-08-29
得票数 1
回答已采纳
1
回答
如何围绕另一个正在移动的元素的中心旋转svg元素?
、
、
我不知道如何将一个svg元素的旋转中心设置为另一个正在移动的svg元素的中心。 我应该怎么做才能使元素"c2“(红圈)的旋转中心成为圆"c1”(蓝圈)的中心,这样通过改变"c1“的位置,"c2”就会在"c1“(围绕”c1“的中心)内旋转? <style> svg { background-color: yellow; } #c2 { transform-box: fill-box; transform-origin: 50% 0%; } </
浏览 17
提问于2021-04-22
得票数 3
回答已采纳
1
回答
用动画变换旋转地球svg
、
、
我试图使用SVG <animateTransform>属性来动画地球自转,遵循这个。 它工作得很好,但是当我把它应用到我自己的SVG上时,我很难在圆圈内维护地球地图,我不明白为什么,因为它和教程的代码相同,宽度也不同。 Note 搜索地球找到相关代码。 当我把它应用到我的SVG上时,我做错了什么?
浏览 7
提问于2020-06-13
得票数 2
回答已采纳
1
回答
使用变换原点设置SVG圆的动画
、
我正在尝试在一个SVG中制作3个独立的圆的动画。我让他们动起来了,但是他们已经把位置移到了左上角。当我添加以下CSS时,就会出现这种情况: .payment svg * { transform-origin: center; /* or transform-origin: 50% */ transform-box: fill-box; } <div class="payment"> <svg width="689px" height="370px" viewB
浏览 29
提问于2020-03-20
得票数 1
回答已采纳
2
回答
是否可以在不丢失累积信息的情况下暂停svg动画?
、
您可以不受限制地停止和重复动画,但如果重新启动不确定的动画,它将丢失其累积值并从初始值开始。 也许我应该用一个例子来说明一下;以这个动画为例: <animate id="main" attributeName="transform" attributeType="XML" begin="startbox.click" dur="1s" end="endbox.click" from="rotate(0)" to="rotate(360)
浏览 0
提问于2012-10-03
得票数 3
回答已采纳
1
回答
如何向svg文本中添加变换矩阵属性?
、
我有svg代码,我需要在svg标记转换中添加矩阵属性。我已经从给定的svg值中添加了矩阵代码属性。实际上,我正在使用生成的svg值中的php重新创建svg元素。或者有一种方法来计算svg变换矩阵的性质。 我计算矩阵的方法是(itemzoom_first_value+1)和(itemzoom_second_value+1)。 <svg> <g id="0.601788739906624" transform="matrix(1.6636363636364 0 0 1.7414965986395 -6 372.3537414966)"&
浏览 2
提问于2017-09-29
得票数 2
回答已采纳
1
回答
在SVG动画中围绕舞台原点以外的位置旋转路径
、
、
试着做一个时钟动画。 当前版本在此: 看起来手在舞台的0,0周围旋转,我不知道如何改变旋转手的点。 我在这里改编自Codrops教程: 我是SVG动画的新手,因此任何帮助都将不胜感激。提前谢谢。
浏览 0
提问于2013-10-19
得票数 1
1
回答
同时使用多个svg转换。
是否可以在同一个svg上使用多个转换?我的代码中已经有一个transform="translate(-186.57429,-373.01893)",但是我希望将图像的大小减少到使用scale(0.5)的一半。 我一直找不到答案,也许我的谷歌搜索技巧很差。任何帮助都将不胜感激。这是SVG代码 <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w
浏览 3
提问于2014-03-02
得票数 4
回答已采纳
3
回答
当通过Javascript DOM完成时,SVG动画元素的endEvent处理程序没有被调用
、
、
我正在构建图形使用HTML5 SVG,通过Javascript DOM。 我使用动画将svg元素(即主svg元素的子元素)沿x坐标(y常量)移动。 var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate"); animate.id = i; animate.setAttribute('attributeName','x'); animate.setAttribute('begin','indefinite
浏览 0
提问于2013-10-22
得票数 2
回答已采纳
1
回答
使用javascript捕获chrome浏览器引擎输出,以捕获SMIL SVG动画的光栅化帧
、
、
、
我的最终目标是将动画SMIL SVG转换为APNG文件。我已经找到了不容易做到这一点的方法,所以我正在做一些迂回的事情:我编写了一个node.js + express.js应用程序,它拥有一个简单的后端来在我的本地文件系统上获取svg图像,我还编写了一个vue.js应用程序,它将把这些图像拉出来并在google浏览器上呈现出来。然后播放SVG并尝试捕获呈现的“框架”,并将这些帧保存为静态png文件( SVG动画的每秒大约有30个静态PNG文件)。然后,我计划将这些静态png文件转换成一个动画png / apng文件,使用另一个程序。我被困住的部分:实际上试图捕捉svg的一个光栅化的“框架”。
浏览 13
提问于2022-06-15
得票数 1
回答已采纳
1
回答
SVG元素上的多个动画
、
、
如果我有一个SVG元素和多个与它相关的动画元素,那么哪个动画将首先执行并在SVG上生效? 示例代码: <svg ...... > <animation id="1" .... /> <animation id="2" .... /> <animation id="3" .... /> </svg> 如果动画来自不同的类型- animateTransform,animateColor,动画,animatePath,有什么区别吗? 提前谢谢你
浏览 1
提问于2013-09-26
得票数 3
回答已采纳
2
回答
SVGPanZoom丢弃原始viewBox
、
、
、
我正在使用SVGPanZoom来管理我的混合安卓系统中SVG图像的缩放(无论出于什么目的和目的,行为都与Chrome相同)。虽然放大效果很好,但我发现了一个奇怪的问题。我最初的内联SVG元素如下 <svg id='puzzle' viewBox='0 0 1600 770' preserveAspectRatio='none' width='100vw' height='85.5vh' fill-rule='evenodd' clip-rule='evenodd'
浏览 1
提问于2019-05-16
得票数 0
回答已采纳
2
回答
将SVG组无限期旋转360度,不使用CSS或Java
、
这是我第一次深入研究SVG。有没有可能在没有css或javascript/jquery的情况下无限期地旋转这个组360?到目前为止,我让它在左上角旋转,但我似乎想不出如何将它居中。 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="576"
浏览 0
提问于2013-06-08
得票数 2
回答已采纳
1
回答
使内部SVG旋转
、
下面是我的代码中的一个示例: <div style="width:100%;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 400 200"> <svg class="a"> <g> <path class="area1" d="M52,5 A50,50 0 0,1
浏览 1
提问于2015-02-09
得票数 0
回答已采纳
1
回答
macOS Safari中不同缩放级别img标记中的SVG动画中断
、
、
、
我有一个SVG动画,运行良好的每个浏览器。但是,当放大Safari时,动画就中断了。看上去动画从右边和底部的边缘开始流血。 而且,只有当SVG位于一个img 标记中时,才会发生这种情况。如果SVG是内联使用的,那么就没有问题了。 当页面在macOS Safari上放大到125%时,您将得到 起初,它看起来像是我的屏幕上的一个问题,或者是我在浏览器中设置的个人喜好。但是,这是一个真正的问题,我也可以在其他机器上复制,也可以用其他动画SVG复制。例如,打开或在macOS Safari中的缩放级别不是100%,因为您将看到相同的行为。 片段(将此SVG保存为.svg映像,并在img标记中使
浏览 8
提问于2022-06-23
得票数 3
1
回答
为什么这个SVG动画不能跨浏览器工作?
、
、
、
、
我有一个由www.loading.io为我生成的SVG图像,动画只在Google上运行(48节)。我尝试在Internet 11、Firefox (44节)和Edge (25节)中打开该文件,它们只呈现最初的图像,没有任何动画。。您也可以通过下载SVG 来观察自己的行为。 下面是SVG标记: <?xml version="1.0" encoding="utf-8"?> <svg width='50px' height='50px' xmlns="http://www.w3.org/2000/svg"
浏览 1
提问于2016-02-19
得票数 1
回答已采纳
2
回答
如何在SVG中引入图像?
、
、
我想出了这个SVG图像。 <svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <def> </def> <g id="i-define-a-black-ring-yellow
浏览 0
提问于2018-06-11
得票数 0
回答已采纳
1
回答
Python svgwrite和同步animationTransforms
、
、
我正在尝试使用python svgwrite来使对象同时缩放和旋转。到目前为止,我的工作是添加两个连续的"animateTransform“。然而,它似乎只考虑了最后一个操作,如我的示例所示。 import svgwrite path = [(100,100),(100,200),(200,200),(200,100)] image = svgwrite.Drawing('test.svg',size=(300,300)) rectangle = image.add(image.polygon(path,id ='polygon',stroke
浏览 29
提问于2020-12-30
得票数 0
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS基础(九)-viewBox(svg
对SVG动画进行异步懒光栅化处理每日前端夜话
百度开源ECharts4.0——厉害了
值得推荐的数据可视化工具
前端女程序员教你,图片加载时,使用 SVG 作为图片 placehold
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券