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

SVG SMIL path animation not working in Safari

我使用 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>