那些遇到过的问题

如何修复 SVG 动画在 Safari 中不起作用的问题

nTu*_*ply 3 svg svg-animate

就在昨天，我成功制作了一个在 Chrome 中完美运行的动画 SVG。我今天尝试在 Safari 中打开它，但动画不起作用。有针对这个的解决方法吗？我尝试过做一些研究，但大多数都显示 CSS3，而d:pathCSS 方法也不起作用，而且实际上更糟，因为什么也没有显示。

这是我的代码

<svg width="1279" height="650" viewBox="0 0 1279 650" xmlns="http://www.w3.org/2000/svg">
    <path d="M-138 -167.889C-138 -167.889 2002 -494.389 1020.73 -167.889C39.4558 158.611 1111.22 305.526 942.746 516.955C681.205 845.177 -138 458.649 -138 458.649V -167.889Z" 
    fill="#000000">
    
    <!-- First shape and last shape in values are the same -->
    <animate 
            repeatCount="indefinite" 
            fill="#454599" 
            attributeName="d" 
            dur="12s" 
            values="
                M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;

                M-138 -167.889C-138 -167.889 1923.96 -760.278 1020.73 -167.889C117.5 424.5 1248.99 269.909 942.746 516.954C636.5 764 -138 458.649 -138 458.649V-167.889Z;

                M-138 -167.889C-138 -167.889 1989.46 -765.777 1020.73 -167.889C52 430 1302.99 226.348 942.746 516.955C582.5 807.561 -138 458.649 -138 458.649V-167.889Z;

                M-138 -167.889C-138 -167.889 1986.46 -591.778 1020.73 -167.889C55 256 1148.99 306.909 942.746 516.954C736.5 727 -138 458.649 -138 458.649V-167.889Z;
            ">
        </animate>
    </path>
</svg>
Run Code Online (Sandbox Code Playgroud)

Ale*_*_TT 5

我尝试做一些研究，但大多数都显示 CSS3，而 d:path CSS 方法也不起作用，而且实际上更糟，因为什么也没有显示。

请参阅浏览器支持 d: path动画。
不幸的是，这在指定的浏览器中不起作用，包括 Safari。希望在不久的将来能看到更好的支持。

这个答案不会解决你的 CSS3 路径动画问题，因为这是不可能的，但它会让在所有现代浏览器（包括 Safari）中工作的 SVG 动画变得更容易。

指定路径数据：属性d：

对于动画来说，只有当路径数据字符串包含的结构相同时（即，路径数据命令的数量和类型完全相同且顺序相同），两个 d 属性值才能顺利插值。如果指定了动画并且路径数据命令列表不具有相同的结构，则必须使用离散动画类型对值进行插值。

为了满足这些要求，您可以使用此技术

步骤1

首先，您需要获取起始位置处的曲线形状：

在此输入图像描述

第2步

然后，通过在矢量编辑器中移动曲线的锚点，我们得到曲线的最终形状：

在此输入图像描述

步骤#3

接下来，我们编写一条命令来为曲线设置动画：

<animate attributeName="d" values="path1;path2;path1" />， 在哪里

path1 - 起点处的曲线形状

path2 - 完成曲线形状

正如@Kaiido在评论中所说，尽量不要在分号之前留出额外的空格

svg {
width:40%;
height:40%;
}
path {
fill:#2F3136;
stroke:black;
stroke-width:4;
}
Run Code Online (Sandbox Code Playgroud) 
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="770" height="770" viewBox="0 0 770 770" preserveAspectRatio="xMinYMin meet" >

<path d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate attributeName="d"
  dur="4s"
  values="
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
         M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
         repeatcount="indefinite"
         />
         
</path>

</svg>
Run Code Online (Sandbox Code Playgroud)

  • 带有背景图像和阴影的选项

.container {
width:75%;
height:75%;

}

path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;
-webkit-filter: drop-shadow(4px 4px 1px black);
    filter: drop-shadow(4px 4px 1px black);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 770 770" preserveAspectRatio="none" >
<image  xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
 
</image>
<path   d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
  dur="6s"
  begin="0s"
  values="
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
         M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
         repeatCount="indefinite"
         />
        
</path>

</svg>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 边框动画加整块大小动画

.container {
width:75%;
height:75%;

}

path {
fill:#2F3136;
stroke:black;
stroke-width:0;
fill-opacity:0.5;

}
Run Code Online (Sandbox Code Playgroud) 
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0 0 770 770" preserveAspectRatio="none" >
<defs>
<filter id='shadow'>
    <feGaussianBlur in='SourceAlpha' stdDeviation='2' />
    <feOffset dx='3' dy='3' result='blur' />
    <feMerge>
      <feMergeNode in='blur' />
      <feMergeNode in='SourceGraphic' />
    </feMerge>
  </filter>
  </defs>
<image  xlink:href="https://i.stack.imgur.com/ABxSm.jpg" x="10" width="1125px" height="750px" >
 
</image>
<path filter="url(#shadow)"  d="M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z" >
<animate id="an_d" attributeName="d"
  dur="6s"
  begin="0s;an_t.end"
  values="
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
         M8.1 1.2V721.6c0 0 76.8 2.3 110.7-24.2 67.7-52.9 94.4-1.3 137.3-18.5 40.1-16.1 39.1-57.3 105-76.1 93.8-26.8 81.5-74.9 124.6-109.6 22.3-17.9 50.6-23.4 69.2-50.8 41.5-61.1 14.5-80.4 66.9-115.4 0 0 28.1-21.9 36.9-36.9 16.5-28.3 27.7-30.3 26.5-94.6-0.4-21.7 2.5-76.9 19.6-94.6C730.2 67.3 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z;
         M8.1 1.2V721.6c0 0 73.2 20.7 105 16.1 39.9-5.6 63.5-61.7 105-66.9 35-4.4 74.9 1 105-13.8 41.9-20.7 60.2-90.1 92.3-108.4 30.9-17.7 74.9-13.9 101.5-33.5 63.3-46.3 5.3-81.5 76.1-145.3 0 0 47.9-24.3 61.1-46.1 19.6-32.3 18.5-61.6 18.5-111.9 0-21.7 15.2-38.8 32.3-56.5C730.2 121.6 752.7 68.8 719.8 2.9 516.8-0.6 218-0.6 8.1 1.2Z"
         repeatcount="1"
         />
        <animateTransform id="an_t" attributeName="transform" type="scale" dur="12s" begin="an_d.end" values="1;0.5;0.5;1" /> 
</path>

</svg>
</div>
Run Code Online (Sandbox Code Playgroud)

  • 美丽的解决方案。这很有趣，因为这正是我凭直觉制作最初的 SVG 动画的方式。很高兴更深入地了解基本理论。谢谢！我的例子中的问题实际上是尾随空格，这非常荒谬，哈哈。但现在可以了。感谢额外的样式示例，它们对我的一些用例确实很有帮助。 (2认同)

归档时间：

查看次数：

1085 次

最近记录：

5 年，4 月 前
相关归档
svg:svg是什么意思？ 24
在 create-react-app 中找不到 svg 模块打字稿错误 7
d3.js缩放仅在光标在图像的像素上时起作用 6
SVG：元素组的边框轮廓 6
增加我的D3树布局的节点之间的差距 5
如何实现 SVG 图像元素的延迟加载？ 5
我如何将id分配给svg元素？(对raphaeljs酒吧) 4
如何使用PHP Imagick读取给定大小的SVG？ 3
TypeError:n在D3.js中未定义,尝试复制Hierarchical Edge Bundling 3
自定义SVG进度条填充 -1
难疑归档
使用"let"和"var"在JavaScript中声明变量有什么区别？ 4199
"git add -A"和"git add"之间的区别. 2788
显式关键字是什么意思？ 2753
迭代对象属性 1904
npm package.json文件中依赖项,devDependencies和peerDependencies之间有什么区别？ 1872
在不应用它的情况下查看存储中的内容 1650
修复一个Git分离的头？ 1318
我如何开始使用Node.js 1264
如何使用CSS设置<select>下拉列表的样式？ 1258
有哪些常用的命名git分支实例的例子？ 1034