在动画上滴 SVG 剪辑路径

Posted 2023-03-28

【中文标题】在动画上滴 SVG 剪辑路径

【英文标题】：Dripping SVG clip-path on animation

【发布时间】：2022-01-13 05:37:36

【问题描述】：

在下面的示例中，我应用了一个剪辑路径并为该路径中的一个块设置动画以模拟浇注。问题是，虽然它看起来在 Safari 中渲染得很好，但我们可以在 Chrome 中看到动画路径的框边界。知道为什么，以及如何摆脱它们吗？

.fill 
    animation-name: fillAction;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.2, .6, .8, .4);
    animation-duration: 4s;
    animation-fill-mode: forwards;

#waveShape 
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s;
    fill: #300f0f;

@keyframes fillAction 
    0% 
        transform: translate(0, 700px);
    
    100% 
        transform: translate(0, 250px);
    

@keyframes waveAction 
    0% 
        transform: translate(380px, 0);
    
    100% 
        transform: translate(-235px, 0);
    

<svg class="h-full w-full" viewBox="0 0 1500 1500">
    <defs>
        <clipPath id="drop">
            <path d="M 537.5,714.5 C 744.168,714.167 950.834,714.5 1157.5,715.5C 1170.62,825.317 1137.29,918.15 1057.5,994C 970.54,1067.47 871.54,1090.14 760.5,1062C 667.845,1033.01 601.012,974.512 560,886.5C 536.431,831.281 528.931,773.948 537.5,714.5 Z" />
        </clipPath>
    </defs>
    <g clip-path="url(#drop)">
        <g class="fill">
            <path
                id="waveShape"
                d="M 265.5,488.5 C 265.897,487.475 266.563,487.308 267.5,488C 266.906,488.464 266.239,488.631 265.5,488.5 Z M 888.5,488.5 C 888.897,487.475 889.563,487.308 890.5,488C 889.906,488.464 889.239,488.631 888.5,488.5 Z M 248.5,490.5 C 258.172,490.334 267.839,490.5 277.5,491C 292.931,492.686 308.264,495.019 323.5,498C 340.141,499.478 356.808,499.811 373.5,499C 407.587,492.498 441.92,490.831 476.5,494C 502.019,497.965 527.686,500.132 553.5,500.5C 564.855,500.46 576.188,499.96 587.5,499C 618.82,494.292 650.32,492.126 682,492.5C 705.194,492.581 728.36,493.414 751.5,495C 769.224,497.858 787.058,499.692 805,500.5C 827.502,499.666 849.668,496.5 871.5,491C 884.529,490.231 897.529,490.564 910.5,492C 922.5,494 934.5,496 946.5,498C 963.141,499.478 979.808,499.811 996.5,499C 1030.59,492.498 1064.92,490.831 1099.5,494C 1125.02,497.965 1150.69,500.132 1176.5,500.5C 1187.86,500.46 1199.19,499.96 1210.5,499C 1259.65,492.451 1308.99,490.784 1358.5,494C 1371.26,494.455 1383.93,495.788 1396.5,498C 1395.48,498.519 1394.82,499.353 1394.5,500.5C 1395.5,753.146 1395.83,1005.81 1395.5,1258.5C 978.833,1258.5 562.167,1258.5 145.5,1258.5C 145.5,1004.83 145.5,751.167 145.5,497.5C 180.445,502.459 214.778,500.126 248.5,490.5 Z"
            />
        </g>
    </g>
</svg>

【问题讨论】：

您遇到了“部分像素”的问题。尝试放大和缩小，您可能会看到线条来来去去或变得越来越细。系统在必须显示部分 CSS 像素时遇到困难 - 将其映射到构成现代显示器上 CSS 像素的多个屏幕像素。一些屏幕像素“落后”。

【参考方案1】：

作为一种可能的解决方案，您可以改用掩码：

.fill 
    animation-name: fillAction;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.2, .6, .8, .4);
    animation-duration: 4s;
    animation-fill-mode: forwards;

#waveShape 
    animation-name: waveAction;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 2s;
    fill: #300f0f;

@keyframes fillAction 
    0% 
        transform: translate(0, 700px);
    
    100% 
        transform: translate(0, 250px);
    

@keyframes waveAction 
    0% 
        transform: translate(380px, 0);
    
    100% 
        transform: translate(-235px, 0);
    

<svg class="h-full w-full" viewBox="0 500 1500 1000">
    <defs>
        <mask id="drop">
          <rect y="500"   />
            <path d="M 537.5,714.5 C 744.168,714.167 950.834,714.5 1157.5,715.5C 1170.62,825.317 1137.29,918.15 1057.5,994C 970.54,1067.47 871.54,1090.14 760.5,1062C 667.845,1033.01 601.012,974.512 560,886.5C 536.431,831.281 528.931,773.948 537.5,714.5 Z" fill="white" />
        </mask>
    </defs>
    <g mask="url(#drop)">
        <g class="fill">
            <path
                id="waveShape"
                d="M 265.5,488.5 C 265.897,487.475 266.563,487.308 267.5,488C 266.906,488.464 266.239,488.631 265.5,488.5 Z M 888.5,488.5 C 888.897,487.475 889.563,487.308 890.5,488C 889.906,488.464 889.239,488.631 888.5,488.5 Z M 248.5,490.5 C 258.172,490.334 267.839,490.5 277.5,491C 292.931,492.686 308.264,495.019 323.5,498C 340.141,499.478 356.808,499.811 373.5,499C 407.587,492.498 441.92,490.831 476.5,494C 502.019,497.965 527.686,500.132 553.5,500.5C 564.855,500.46 576.188,499.96 587.5,499C 618.82,494.292 650.32,492.126 682,492.5C 705.194,492.581 728.36,493.414 751.5,495C 769.224,497.858 787.058,499.692 805,500.5C 827.502,499.666 849.668,496.5 871.5,491C 884.529,490.231 897.529,490.564 910.5,492C 922.5,494 934.5,496 946.5,498C 963.141,499.478 979.808,499.811 996.5,499C 1030.59,492.498 1064.92,490.831 1099.5,494C 1125.02,497.965 1150.69,500.132 1176.5,500.5C 1187.86,500.46 1199.19,499.96 1210.5,499C 1259.65,492.451 1308.99,490.784 1358.5,494C 1371.26,494.455 1383.93,495.788 1396.5,498C 1395.48,498.519 1394.82,499.353 1394.5,500.5C 1395.5,753.146 1395.83,1005.81 1395.5,1258.5C 978.833,1258.5 562.167,1258.5 145.5,1258.5C 145.5,1004.83 145.5,751.167 145.5,497.5C 180.445,502.459 214.778,500.126 248.5,490.5 Z"
            />
        </g>
    </g>
</svg>

我已经更改了 svg 元素的 viewBox，因为我想要视图中的动画，但您可以将其更改回您想要的。