SVG SMIL 路径动画在 Safari 中不起作用-6ren

SVG SMIL 路径动画在 Safari 中不起作用

转载作者：行者123 更新时间：2023-12-04 09:39:29

我使用 SVG SMIL 动画是因为我还没有找到另一种方法来制作曲线形状的动画。这种方法适用于除 iOS 浏览器之外的所有浏览器。

这是我的 SVG 代码:

<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 540 450" style="enable-background:new 0 0 540 450;" xml:space="preserve">
<style type="text/css">
    .st0{fill:rgba(115, 203, 232, 0.3);}
</style>
<path id="t" class="st0" d="M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;">
    <animate
        attributeName="d"
        attributeType="XML"
        dur="10s"
        repeatCount="indefinite"
        values="
            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;
            M393.620000,413.170000C314.860000,451.100000,219.884470,381.470294,91.370310,296.084829C-59.166688,186.229543,29.222773,79.276069,119.102773,81.566069C208.982773,83.866069,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,431.408010,79.499494,495.938010,159.869494C560.458010,240.249494,566.460000,329.930000,393.620000,413.170000Z;
            M374.262300,334.744023C295.502300,372.674023,219.884470,464.784206,91.370310,379.398742C-59.166688,269.543456,86.027714,124.720021,175.907714,127.010021C265.787714,129.310021,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,434.437607,63.594111,498.967607,143.964111C563.487607,224.344111,547.102300,251.504023,374.262300,334.744023Z;
            M270,376.835237C191.240000,414.765237,181.548418,328.452349,53.034258,243.066884C-97.502740,133.211598,86.319021,36.861713,176.199021,39.151713C266.079021,41.451713,336.324192,10.071305,405.399674,50.570962C472.843833,113.093459,600.249772,160.249902,501.647635,230.831974C407.113801,294.083100,442.840000,293.595237,270,376.835237Z;
            M328.727569,304.241436C302.169852,351.959364,192.967667,434.488238,64.453507,349.102773C-86.083491,239.247487,100.185252,122.506085,163.148450,79.934747C247.318825,36.557748,311.038710,-14.398515,380.114192,26.101142C447.558351,88.623639,604.328075,280.967683,505.725938,351.549755C411.192104,414.800881,411.029233,229.973703,328.727569,304.241436Z;
            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;
    "/>

</path>
<path id="t" class="st0" d="M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z">
    <animate
        attributeName="d"
        dur="10s"
        repeatCount="indefinite"
        values="
            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;
            M314.232437,343.451865C235.022437,340.801865,68.622550,431.473244,28.022550,304.423244C-12.567450,177.363244,80.443183,65.747277,145.108413,88.464874C255.317034,138.502506,258.603391,56.904805,315.533391,33.824805C372.463391,10.744805,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,488.062437,349.281865,314.232437,343.451865Z;
            M284.310494,403.295750C205.100494,400.645750,119.359757,400.250347,78.759757,273.200347C38.169757,146.140347,137.685161,85.261587,188.039896,57.241977C302.151379,35.727137,344.466357,155.777310,381.882047,136.600173C446.617771,113.520173,551.309427,137.307909,523.686036,212.055507C467.431656,320.627909,458.140494,409.125750,284.310494,403.295750Z;
            M283.009540,355.160451C119.237528,330.394232,92.039722,396.347485,51.439722,269.297485C10.849722,142.237485,60.928873,8.505299,120.390286,55.941023C256.617988,143.706323,233.885264,158.379218,288.213356,167.823070C367.259574,178.567875,462.844553,181.540346,435.221162,256.287944C378.966782,364.860346,456.839540,360.990451,283.009540,355.160451Z;
            M307.727667,404.596704C149.159471,399.344795,63.418734,479.608543,22.818734,352.558543C-17.771266,225.498543,127.277529,224.463669,173.729402,166.522116C278.734207,50.037633,336.660633,79.021023,361.066782,102.775369C416.695828,196.781232,491.465542,207.559427,485.958369,299.219428C479.140242,367.462255,481.557667,410.426704,307.727667,404.596704Z;
            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;
    "/>

</path>

</svg>

我注意到在 Safari 和其他 iOS 浏览器中，如果 attributeName 属性具有不同的值(例如 fill)，动画就会起作用。但我需要使用 arrtributeName = 'd' 因为它是关于更改表单的。

请告诉我如何解决这个问题。

最佳答案

在 values 的最后路径末尾有一个额外的分号。 d 属性的末尾还有额外的分号

svg{width:300px; border:solid}

<svg viewBox="0 0 540 450" >
<style type="text/css">
    .st0{fill:rgba(115, 203, 232, 0.3);}
</style>
<path class="st0" d="M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z">
    <animate
        attributeType="XML"
        attributeName='d'
        dur="10s"
        repeatCount="indefinite"
        values="
            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z;
                
            M393.620000,413.170000C314.860000,451.100000,219.884470,381.470294,91.370310,296.084829C-59.166688,186.229543,29.222773,79.276069,119.102773,81.566069C208.982773,83.866069,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,431.408010,79.499494,495.938010,159.869494C560.458010,240.249494,566.460000,329.930000,393.620000,413.170000Z;
                
            M374.262300,334.744023C295.502300,372.674023,219.884470,464.784206,91.370310,379.398742C-59.166688,269.543456,86.027714,124.720021,175.907714,127.010021C265.787714,129.310021,254.758124,59.826606,334.437194,45.676998C441.848727,37.237015,434.437607,63.594111,498.967607,143.964111C563.487607,224.344111,547.102300,251.504023,374.262300,334.744023Z;
                
            M270,376.835237C191.240000,414.765237,181.548418,328.452349,53.034258,243.066884C-97.502740,133.211598,86.319021,36.861713,176.199021,39.151713C266.079021,41.451713,336.324192,10.071305,405.399674,50.570962C472.843833,113.093459,600.249772,160.249902,501.647635,230.831974C407.113801,294.083100,442.840000,293.595237,270,376.835237Z;
                
            M328.727569,304.241436C302.169852,351.959364,192.967667,434.488238,64.453507,349.102773C-86.083491,239.247487,100.185252,122.506085,163.148450,79.934747C247.318825,36.557748,311.038710,-14.398515,380.114192,26.101142C447.558351,88.623639,604.328075,280.967683,505.725938,351.549755C411.192104,414.800881,411.029233,229.973703,328.727569,304.241436Z;
                
            M393.620000,413.170000C314.860000,451.100000,167.780000,449.910000,62.920000,346.580000C-41.940000,243.250000,16.830000,139.920000,106.710000,142.210000C196.590000,144.510000,248.440000,113.510000,292.230000,61.840000C336.020000,10.170000,425.890000,-12.790000,490.420000,67.580000C554.940000,147.960000,566.460000,329.930000,393.620000,413.170000Z"/>

</path>
<path  class="st0" d="M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z">
    <animate
        attributeName="d"
        dur="10s"
        repeatCount="indefinite"
        values="
            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z;
            M314.232437,343.451865C235.022437,340.801865,68.622550,431.473244,28.022550,304.423244C-12.567450,177.363244,80.443183,65.747277,145.108413,88.464874C255.317034,138.502506,258.603391,56.904805,315.533391,33.824805C372.463391,10.744805,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,488.062437,349.281865,314.232437,343.451865Z;
            M284.310494,403.295750C205.100494,400.645750,119.359757,400.250347,78.759757,273.200347C38.169757,146.140347,137.685161,85.261587,188.039896,57.241977C302.151379,35.727137,344.466357,155.777310,381.882047,136.600173C446.617771,113.520173,551.309427,137.307909,523.686036,212.055507C467.431656,320.627909,458.140494,409.125750,284.310494,403.295750Z;
            M283.009540,355.160451C119.237528,330.394232,92.039722,396.347485,51.439722,269.297485C10.849722,142.237485,60.928873,8.505299,120.390286,55.941023C256.617988,143.706323,233.885264,158.379218,288.213356,167.823070C367.259574,178.567875,462.844553,181.540346,435.221162,256.287944C378.966782,364.860346,456.839540,360.990451,283.009540,355.160451Z;
            M307.727667,404.596704C149.159471,399.344795,63.418734,479.608543,22.818734,352.558543C-17.771266,225.498543,127.277529,224.463669,173.729402,166.522116C278.734207,50.037633,336.660633,79.021023,361.066782,102.775369C416.695828,196.781232,491.465542,207.559427,485.958369,299.219428C479.140242,367.462255,481.557667,410.426704,307.727667,404.596704Z;
            M281.180000,400.830000C201.970000,398.180000,84.420000,335.380000,43.820000,208.330000C3.230000,81.270000,93.960000,23.010000,165.130000,62.640000C236.310000,102.270000,291,99.180000,347.930000,76.100000C404.860000,53.020000,486.680000,72.370000,504.590000,164.030000C522.490000,255.690000,455.010000,406.660000,281.180000,400.830000Z"/>

</path>

</svg>

关于SVG SMIL 路径动画在 Safari 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62395030/

文章推荐： r - Network_plot 'names' 属性

文章推荐： npm - 如何为 BuckleScript/ReasonML 打包节点模块？

文章推荐： python - Pygame 问题 : My player image won't move

smil - SMIL 是死了，还是可能只是渴望峡湾？
SMIL ( Synchronized Multimedia Integration Language ) 对于现代应用程序来说已经死了吗？是否有替代它的用于组合媒体的标准化格式？最佳答案从缺乏
html - SMIL 中的动画
有人有学习 SMIL 动画的资源吗？最佳答案这些应该让你继续: W3Schools SVG Reference Hefty tutorial连同 66 page PDF tutorial Anim
SVG SMIL animateTransform 缓动
我正在尝试向简单的 SVG SMIL 动画添加计时功能。显然可以使用 keySplines 设置时间/缓动属性，但是在我的示例中它不起作用:
svg - 有没有另一种方法可以在不使用 SMIL 的情况下制作动画路径或多边形
SMIL is deprecated and not going to work on chrome anymore 我刚开始学习如何制作动画 svg，我偶然发现了这个声明。我不知道这是不是真的(我希
SVG SMIL 路径动画在 Safari 中不起作用
我使用 SVG SMIL 动画是因为我还没有找到另一种方法来制作曲线形状的动画。这种方法适用于除 iOS 浏览器之外的所有浏览器。这是我的 SVG 代码: .st0{fill:rgba(
svg - 使用 SMIL 链接两个
我试图在我的 SVG 中让两个动画相继运行。这就是它们的写入方式。它们被写入一个组，里面有一些原语。我正在尝试让整个组旋转然后平移。但是当我运行这个时，变换似乎在第一个动画结束时重置
animation - 什么是纯 SVG，什么是 SMIL？
上下文:我正在使用 SVG 制作信息图。我希望借助动画，尤其是通过链接动画，让文档变得栩栩如生。我已经熟悉 SVG，但最近才开始学习 SVG 动画。由于 SMIL 已被弃用，我正在尝试用纯 SVG
javascript - SMIL 动画在动态加载的外部 SVG 上失败
我创建了一个包含超过 3000 条路径的怪物动画 SVG 文件。每个路径都使用声明性 SMIL 动画独立地进行动画处理。它在所有新浏览器中播放缓慢但精美，为 IE9 使用一点 js 回退。 (我会发布
javascript - SVG SMIL animateMotion 只触发一次
我有一张布拉格机场航类目的地的 SVG map 。我想沿着通往这些机场中的每一个的路径制作一个圆圈。获取代码here (对此感到抱歉，不适用于 jsfiddle)。处理“飞行”动画的代码如下所示:
css - SMIL 动画不在 Mouseout 上结束
我正在尝试制作一个 SVG 图标，该图标在悬停时使用 SMIL 进行动画处理(好吧，我不在乎它是 SMIL 还是 CSS，我只是不想使用 JS)并且我已经走了很远但是我遇到了一个无法在网上找到答案甚至
html - SVG/SMIL 回流/重绘的性能影响？
过去我在 javascript 方面做过很多工作，包括一些 DOM 操作。从那里我了解到回流/重绘在某些情况下可能是一个很大的性能问题，并且通常应该限制在最低限度。例如，当添加一组 div 时，您应该
linux - 从 SMIL 文件中提取 jpeg
我需要我的 perl 脚本从 SMIL 文件中提取 jpeg。我看到在 linux 中执行此操作的唯一方法是使用以下命令。 xxd -c1 -p wapenc\?T\=mavodi-6-13b-1f-
html - SMIL(同步多媒体集成语言)的 future ？
SMIL(同步多媒体集成语言)最后一次更新是在 2008 年，有谁知道在同步多媒体文件时是否有更好的协议(protocol)可遵循？最佳答案 SMIL 没有天然的竞争对手，因此任何其他解决方案都将依
javascript - 如何在运动路径上有效地反转 SVG (SMIL) 动画？
我正在尝试确定如何有效地反转此 SVG 动画(使用 SMIL)，它使用 animateMotion 和 path 上的 d 属性元素。我需要动画围绕形状逆时针运行。当前动画可以查here相关代码如下
svg - 浏览器对 SVG SMIL(动画)的支持水平
有谁知道流行浏览器中 SVG SMIL 动画支持的当前状态？看起来 Safari、Chrome 和 Opera 都支持它。 Firefox 在他们的开发页面中有关于添加了 SMIL 支持的令人困惑的报
javascript - Safari 的 SVG SMIL 动画解决方法？
我在 Safari 中遇到基本 SVG 动画的问题。它通过仅显示没有动画的 SVG 优雅地失败了，但如果可能的话，我希望它也能在 Safari 中工作。动画与找到的示例非常相似 here :
javascript - 使用 SMIL 制作 SVG 动画
我正在尝试使用 SVG 为视频元素创建 UI。我正在寻找一个简单的解决方案来为控制栏设置动画，当鼠标在其中时(如 YouTube)，我想从窗口底部升起。这是我想做的:
javascript - 是否可以从 javascript 访问 SMIL 计时器？
我正在尝试使用 SMIL以动画方式将文本输入到嵌入在 SVG 中的字段中。我每晚在 Chrome 和支持 SMIL 的 Firefox 中尝试了以下代码，但没有效果:
javascript - Safari 中的 SVG SMIL 动画错误
我一直在看一篇关于 SVG 动画的文章。 Code: http://codepen.io/chriscoyier/pen/DpFfE 文章:http://css-tricks.com/svg-shap
javascript - 使用 SMIL 的 SVG 动画
我对使用 smil SVG 动画和使用 javascript/jquery otf 更改内容有一些疑问。这是我已经尝试过的: HTML/XML:

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

SVG SMIL 路径动画在 Safari 中不起作用