我以为我做的事情非常微不足道;在SVG中制作一个蒙面形状的动画,但它完全让我感到困惑。
我有一个相对简单的设置:一个定义了clipPath
的SVG和一个使用所述掩码的path
。静态地,这完全符合预期 - clipPath
掩盖了我使用的模式。但是,我打算为path
设置动画,以便它可以很好地俯冲,创造出一个很好的文字效果:
我遇到的第一个问题是我无法在CSS中使用left
或top
来操纵路径的位置。我找到了一个线程here建议使用transform: translate(100px, 100px);
表面上似乎有效。但是,只要我移动path
,实际的clipMask
就会随之移动,以便整个事物显得偏离中心。
在某种程度上,我可以有点看看这有什么意义,但是从Flash背景来看,我习惯于在移动蒙面元素时保持静止。
我已设置jsFiddle来说明问题,这是一个代码段:
body {
font-family: Trebuchet MS, san-serif;
}
#helvetica {
width: 100%;
background-color: pink;
}
#helvetica svg path#pattern {
left: -300px;
/*transform: translate(-300px, 0);*/
}

<div id="helvetica">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="550" height="80" viewbox="0 0 550 80">
<defs>
<clipPath id="myMask">
<path fill="#FF00CC" d="M55.7 28 L61.6 28 61.6 38.25 72.4 38.25 72.4 28 78.3 28 78.3 54.75 72.4 54.75 72.4 43.2 61.6 43.2 61.6 54.75 55.7 54.75 55.7 28 M104.6 28 L109.9 28 109.9 54.75 104.6 54.75 104.6 28 M87.75 41.25 Q87.35 42.2 87.3 43 L95.95 43 Q95.6 40.95 94.65 39.9 93.65 38.85 91.75 38.85 90.05 38.85 89.1 39.55 88.15 40.3 87.75 41.25 M91.9 34.85 Q94.35 34.85 96.2 35.8 98 36.75 99.2 38.35 100.4 39.95 100.9 42 101.45 44.1 101.3 46.35 L87.3 46.35 Q87.4 48.85 88.65 50.1 89.85 51.3 92.05 51.25 93.7 51.25 94.85 50.45 96 49.7 96.25 48.75 L100.95 48.75 Q99.8 52.15 97.5 53.7 95.2 55.3 91.9 55.3 88.8 55.25 86.6 53.95 84.4 52.7 83.2 50.4 82 48.1 82 45.05 82 42.15 83.25 39.85 84.45 37.5 86.7 36.2 88.9 34.85 91.9 34.85 M133.95 39.85 Q135.15 37.5 137.4 36.2 139.6 34.85 142.6 34.85 145.05 34.85 146.9 35.8 148.7 36.75 149.9 38.35 151.1 39.95 151.6 42 152.15 44.1 152 46.35 L138 46.35 Q138.1 48.85 139.35 50.1 140.55 51.3 142.75 51.25 144.4 51.25 145.55 50.45 146.7 49.7 146.95 48.75 L151.65 48.75 Q150.5 52.15 148.2 53.7 145.9 55.3 142.6 55.3 139.5 55.25 137.3 53.95 135.1 52.7 133.9 50.4 132.7 48.1 132.7 45.05 132.7 42.15 133.95 39.85 M139.8 39.55 Q138.85 40.3 138.45 41.25 138.05 42.2 138 43 L146.65 43 Q146.3 40.95 145.35 39.9 144.35 38.85 142.45 38.85 140.75 38.85 139.8 39.55 M126.1 35.35 L131.4 35.35 124.85 54.75 118.9 54.75 112.3 35.35 117.85 35.35 121.95 48.6 122 48.6 126.1 35.35 M178.6 39.9 Q179.75 37.55 181.95 36.2 184.15 34.85 187.35 34.85 189.65 34.85 191.65 35.65 193.65 36.45 194.95 38.05 196.25 39.7 196.45 42.2 L191.25 42.2 Q191 40.55 189.95 39.7 188.95 38.85 187.3 38.85 185.6 38.85 184.6 39.85 183.6 40.8 183.2 42.25 182.75 43.7 182.75 45.15 182.75 46.6 183.15 48 183.6 49.35 184.55 50.3 185.5 51.25 187.2 51.25 189.05 51.25 190.1 50.2 191.15 49.15 191.4 47.35 L196.55 47.35 Q196 51.2 193.55 53.25 191.1 55.25 187.2 55.3 184.3 55.25 182.1 54 179.9 52.75 178.65 50.5 177.45 48.25 177.45 45.35 177.45 42.3 178.6 39.9 M168.5 28 L173.8 28 173.8 32.35 168.5 32.35 168.5 28 M168.5 35.35 L173.8 35.35 173.8 54.75 168.5 54.75 168.5 35.35 M165.75 35.35 L165.75 38.95 161.85 38.95 161.85 48.5 Q161.85 49.85 162.3 50.3 162.8 50.8 164.1 50.8 L164.95 50.75 165.75 50.65 165.75 54.8 164.25 54.95 162.65 54.95 159.6 54.65 Q158.25 54.25 157.4 53.25 156.55 52.3 156.55 50.35 L156.55 38.95 153.3 38.95 153.3 35.35 156.55 35.35 156.55 29.55 161.85 29.55 161.85 35.35 165.75 35.35 M238.75 43.7 L227.55 43.7 227.55 54.75 221.65 54.75 221.65 28 240.45 28 240.45 32.9 227.55 32.9 227.55 39.1 238.75 39.1 238.75 43.7 M204.95 47.2 Q204.05 47.8 204 49.25 204.05 50.7 205 51.2 205.95 51.75 207.3 51.7 208.85 51.7 209.7 51.2 L211 49.9 211.5 48.45 211.6 47.25 211.6 45.25 Q210.9 45.8 209.65 46 L207.15 46.4 Q205.9 46.6 204.95 47.2 M204.2 35.4 L208.4 34.85 211.4 35.05 Q212.85 35.25 214.15 35.85 215.35 36.45 216.15 37.5 216.9 38.6 216.95 40.35 L216.95 50.45 217.05 52.95 Q217.25 54.15 217.6 54.75 L212.2 54.75 211.95 53.85 211.8 52.9 Q210.55 54.2 208.8 54.75 L205.3 55.3 Q203.45 55.3 201.95 54.65 200.45 54.05 199.6 52.75 198.7 51.45 198.7 49.45 198.75 47.3 199.65 46.1 200.6 44.9 202.1 44.35 203.6 43.75 205.3 43.6 L208.4 43.2 210.7 42.55 Q211.6 42.1 211.6 41 211.6 39.9 211.1 39.35 210.65 38.75 209.9 38.55 L208.15 38.4 Q206.6 38.4 205.7 39.1 204.75 39.75 204.6 41.35 L199.3 41.35 Q199.5 38.85 200.8 37.45 202.15 36 204.2 35.4 M275.4 28 L280.7 28 280.7 54.75 275.4 54.75 275.4 28 M265.7 28 L271 28 271 54.75 265.7 54.75 265.7 28 M256.2 35.35 L261.5 35.35 261.5 54.75 256.45 54.75 256.45 52.05 256.35 52.05 Q255.3 53.7 253.7 54.5 252.15 55.3 250.4 55.3 247.6 55.25 246.05 54.25 244.5 53.3 243.9 51.5 243.3 49.7 243.35 47.3 L243.35 35.35 248.65 35.35 248.65 46.35 Q248.65 48.7 249.45 49.9 250.25 51.1 252.05 51.1 254.25 51.1 255.2 49.8 256.2 48.45 256.2 45.55 L256.2 35.35 M315.95 35.35 L319.85 35.35 319.85 38.95 315.95 38.95 315.95 48.5 Q315.95 49.85 316.4 50.3 316.9 50.8 318.2 50.8 L319.05 50.75 319.85 50.65 319.85 54.8 318.35 54.95 316.75 54.95 313.7 54.65 Q312.35 54.25 311.5 53.25 310.65 52.3 310.65 50.35 L310.65 38.95 307.4 38.95 307.4 35.35 310.65 35.35 310.65 29.55 315.95 29.55 315.95 35.35 M294.65 27.35 Q297.5 27.3 299.95 28.2 302.35 29.1 303.85 31 305.35 32.9 305.4 35.95 L299.7 35.95 Q299.6 34.35 298.85 33.45 298.15 32.6 297 32.25 L294.4 31.9 292.5 32.2 Q291.6 32.5 291 33.15 290.35 33.85 290.35 34.95 290.3 35.95 290.9 36.55 291.55 37.1 293.25 37.65 L298.35 39 300.4 39.55 Q301.7 39.95 303.05 40.8 304.4 41.65 305.3 43.1 306.25 44.55 306.3 46.8 306.3 49.3 305 51.2 303.75 53.15 301.25 54.25 298.8 55.35 295.15 55.4 292.9 55.4 290.85 54.8 288.8 54.25 287.2 53.1 285.6 51.95 284.65 50.15 283.75 48.35 283.75 45.85 L289.45 45.85 Q289.45 47.65 290.3 48.75 291.1 49.8 292.45 50.3 L295.35 50.8 297.65 50.55 Q298.85 50.3 299.7 49.55 300.55 48.85 300.6 47.5 300.55 46.05 299.4 45.3 298.25 44.5 296.45 44 L292.65 43.05 288.8 41.75 Q287 40.9 285.85 39.4 284.7 37.9 284.65 35.45 284.65 33.4 285.5 31.85 286.4 30.35 287.85 29.35 289.3 28.35 291.05 27.85 L294.65 27.35 M350.5 45.1 Q350.45 46.7 350.9 48.1 351.35 49.5 352.4 50.35 353.4 51.25 355.1 51.25 356.85 51.25 357.85 50.35 358.9 49.5 359.3 48.1 359.75 46.7 359.7 45.1 359.75 43.55 359.3 42.1 358.85 40.7 357.8 39.75 356.8 38.85 355.05 38.85 353.35 38.85 352.35 39.75 351.3 40.65 350.9 42.1 350.45 43.5 350.5 45.1 M356.25 34.85 Q359.25 34.85 361.25 36.3 363.2 37.75 364.1 40.1 365.05 42.45 365.05 45.25 365.05 47.9 364.1 50.15 363.15 52.4 361.25 53.85 359.4 55.25 356.55 55.3 354.8 55.3 353.25 54.55 351.7 53.8 350.75 52.35 L350.65 52.35 350.65 61.6 345.35 61.6 345.35 35.35 350.4 35.35 350.4 37.85 350.5 37.85 Q351.45 36.3 352.95 35.55 354.45 34.85 356.25 34.85 M327.15 45.1 Q327.15 46.65 327.6 48.05 328 49.45 329 50.35 330.05 51.25 331.85 51.25 333.65 51.25 334.7 50.35 335.75 49.45 336.15 48.05 336.6 46.65 336.55 45.1 336.6 43.5 336.15 42.1 335.75 40.65 334.7 39.75 333.65 38.85 331.85 38.85 330.05 38.85 329 39.75 328 40.65 327.6 42.1 327.15 43.5 327.15 45.1 M326.55 36.1 Q328.8 34.85 331.85 34.85 334.9 34.85 337.15 36.1 339.4 37.35 340.65 39.65 341.9 41.95 341.9 45.1 341.9 48.2 340.65 50.45 339.4 52.75 337.15 54 334.9 55.25 331.85 55.3 328.8 55.25 326.55 54 324.3 52.75 323.05 50.45 321.85 48.2 321.85 45.1 321.85 41.95 323.05 39.65 324.3 37.35 326.55 36.1 M368.5 49 L374.4 49 374.4 54.75 368.5 54.75 368.5 49"/>
</clipPath>
</defs>
<path id="pattern" clip-path="url(#myMask)" fill="#333333" d="M493.35 13.9 L450.6 66.4 446.1 66.4 488.85 13.9 493.35 13.9 M488.1 66.4 L483.6 66.4 526.35 13.9 530.85 13.9 488.1 66.4 M455.85 13.9 L413.1 66.4 408.6 66.4 451.35 13.9 455.85 13.9 M470.85 13.9 L428.1 66.4 423.6 66.4 466.35 13.9 470.85 13.9 M431.1 13.9 L388.35 66.4 383.85 66.4 426.6 13.9 431.1 13.9 M425.85 13.9 L383.1 66.4 378.6 66.4 421.35 13.9 425.85 13.9 M437.1 13.9 L394.35 66.4 389.85 66.4 432.6 13.9 437.1 13.9 M444.6 13.9 L401.85 66.4 397.35 66.4 440.1 13.9 444.6 13.9 M377.85 66.4 L14.15 66.4 56.9 13.9 420.6 13.9 377.85 66.4"/>
</svg>
</div>
<p>
Uncomment the <code>transform</code> line in the CSS to see the effect - the mask moves <em>with</em> the masked shape.
</p>
&#13;
还有另一种方法可以达到同样的效果吗?请注意,这将被放置在摄影图像上,因此动画GIF不会削减它,并且它必须是可扩展的而不会降低质量(因此,SVG)。
答案 0 :(得分:4)
如果您不希望剪辑移动,您只需将其放在不移动的部分上。
body {
font-family: Trebuchet MS, san-serif;
}
#helvetica {
width: 100%;
background-color: pink;
}
#helvetica svg path#pattern {
left: -300px;
transform: translate(-300px, 0);
}
<div id="helvetica">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="550" height="80" viewbox="0 0 550 80">
<defs>
<clipPath id="myMask">
<path fill="#FF00CC" d="M55.7 28 L61.6 28 61.6 38.25 72.4 38.25 72.4 28 78.3 28 78.3 54.75 72.4 54.75 72.4 43.2 61.6 43.2 61.6 54.75 55.7 54.75 55.7 28 M104.6 28 L109.9 28 109.9 54.75 104.6 54.75 104.6 28 M87.75 41.25 Q87.35 42.2 87.3 43 L95.95 43 Q95.6 40.95 94.65 39.9 93.65 38.85 91.75 38.85 90.05 38.85 89.1 39.55 88.15 40.3 87.75 41.25 M91.9 34.85 Q94.35 34.85 96.2 35.8 98 36.75 99.2 38.35 100.4 39.95 100.9 42 101.45 44.1 101.3 46.35 L87.3 46.35 Q87.4 48.85 88.65 50.1 89.85 51.3 92.05 51.25 93.7 51.25 94.85 50.45 96 49.7 96.25 48.75 L100.95 48.75 Q99.8 52.15 97.5 53.7 95.2 55.3 91.9 55.3 88.8 55.25 86.6 53.95 84.4 52.7 83.2 50.4 82 48.1 82 45.05 82 42.15 83.25 39.85 84.45 37.5 86.7 36.2 88.9 34.85 91.9 34.85 M133.95 39.85 Q135.15 37.5 137.4 36.2 139.6 34.85 142.6 34.85 145.05 34.85 146.9 35.8 148.7 36.75 149.9 38.35 151.1 39.95 151.6 42 152.15 44.1 152 46.35 L138 46.35 Q138.1 48.85 139.35 50.1 140.55 51.3 142.75 51.25 144.4 51.25 145.55 50.45 146.7 49.7 146.95 48.75 L151.65 48.75 Q150.5 52.15 148.2 53.7 145.9 55.3 142.6 55.3 139.5 55.25 137.3 53.95 135.1 52.7 133.9 50.4 132.7 48.1 132.7 45.05 132.7 42.15 133.95 39.85 M139.8 39.55 Q138.85 40.3 138.45 41.25 138.05 42.2 138 43 L146.65 43 Q146.3 40.95 145.35 39.9 144.35 38.85 142.45 38.85 140.75 38.85 139.8 39.55 M126.1 35.35 L131.4 35.35 124.85 54.75 118.9 54.75 112.3 35.35 117.85 35.35 121.95 48.6 122 48.6 126.1 35.35 M178.6 39.9 Q179.75 37.55 181.95 36.2 184.15 34.85 187.35 34.85 189.65 34.85 191.65 35.65 193.65 36.45 194.95 38.05 196.25 39.7 196.45 42.2 L191.25 42.2 Q191 40.55 189.95 39.7 188.95 38.85 187.3 38.85 185.6 38.85 184.6 39.85 183.6 40.8 183.2 42.25 182.75 43.7 182.75 45.15 182.75 46.6 183.15 48 183.6 49.35 184.55 50.3 185.5 51.25 187.2 51.25 189.05 51.25 190.1 50.2 191.15 49.15 191.4 47.35 L196.55 47.35 Q196 51.2 193.55 53.25 191.1 55.25 187.2 55.3 184.3 55.25 182.1 54 179.9 52.75 178.65 50.5 177.45 48.25 177.45 45.35 177.45 42.3 178.6 39.9 M168.5 28 L173.8 28 173.8 32.35 168.5 32.35 168.5 28 M168.5 35.35 L173.8 35.35 173.8 54.75 168.5 54.75 168.5 35.35 M165.75 35.35 L165.75 38.95 161.85 38.95 161.85 48.5 Q161.85 49.85 162.3 50.3 162.8 50.8 164.1 50.8 L164.95 50.75 165.75 50.65 165.75 54.8 164.25 54.95 162.65 54.95 159.6 54.65 Q158.25 54.25 157.4 53.25 156.55 52.3 156.55 50.35 L156.55 38.95 153.3 38.95 153.3 35.35 156.55 35.35 156.55 29.55 161.85 29.55 161.85 35.35 165.75 35.35 M238.75 43.7 L227.55 43.7 227.55 54.75 221.65 54.75 221.65 28 240.45 28 240.45 32.9 227.55 32.9 227.55 39.1 238.75 39.1 238.75 43.7 M204.95 47.2 Q204.05 47.8 204 49.25 204.05 50.7 205 51.2 205.95 51.75 207.3 51.7 208.85 51.7 209.7 51.2 L211 49.9 211.5 48.45 211.6 47.25 211.6 45.25 Q210.9 45.8 209.65 46 L207.15 46.4 Q205.9 46.6 204.95 47.2 M204.2 35.4 L208.4 34.85 211.4 35.05 Q212.85 35.25 214.15 35.85 215.35 36.45 216.15 37.5 216.9 38.6 216.95 40.35 L216.95 50.45 217.05 52.95 Q217.25 54.15 217.6 54.75 L212.2 54.75 211.95 53.85 211.8 52.9 Q210.55 54.2 208.8 54.75 L205.3 55.3 Q203.45 55.3 201.95 54.65 200.45 54.05 199.6 52.75 198.7 51.45 198.7 49.45 198.75 47.3 199.65 46.1 200.6 44.9 202.1 44.35 203.6 43.75 205.3 43.6 L208.4 43.2 210.7 42.55 Q211.6 42.1 211.6 41 211.6 39.9 211.1 39.35 210.65 38.75 209.9 38.55 L208.15 38.4 Q206.6 38.4 205.7 39.1 204.75 39.75 204.6 41.35 L199.3 41.35 Q199.5 38.85 200.8 37.45 202.15 36 204.2 35.4 M275.4 28 L280.7 28 280.7 54.75 275.4 54.75 275.4 28 M265.7 28 L271 28 271 54.75 265.7 54.75 265.7 28 M256.2 35.35 L261.5 35.35 261.5 54.75 256.45 54.75 256.45 52.05 256.35 52.05 Q255.3 53.7 253.7 54.5 252.15 55.3 250.4 55.3 247.6 55.25 246.05 54.25 244.5 53.3 243.9 51.5 243.3 49.7 243.35 47.3 L243.35 35.35 248.65 35.35 248.65 46.35 Q248.65 48.7 249.45 49.9 250.25 51.1 252.05 51.1 254.25 51.1 255.2 49.8 256.2 48.45 256.2 45.55 L256.2 35.35 M315.95 35.35 L319.85 35.35 319.85 38.95 315.95 38.95 315.95 48.5 Q315.95 49.85 316.4 50.3 316.9 50.8 318.2 50.8 L319.05 50.75 319.85 50.65 319.85 54.8 318.35 54.95 316.75 54.95 313.7 54.65 Q312.35 54.25 311.5 53.25 310.65 52.3 310.65 50.35 L310.65 38.95 307.4 38.95 307.4 35.35 310.65 35.35 310.65 29.55 315.95 29.55 315.95 35.35 M294.65 27.35 Q297.5 27.3 299.95 28.2 302.35 29.1 303.85 31 305.35 32.9 305.4 35.95 L299.7 35.95 Q299.6 34.35 298.85 33.45 298.15 32.6 297 32.25 L294.4 31.9 292.5 32.2 Q291.6 32.5 291 33.15 290.35 33.85 290.35 34.95 290.3 35.95 290.9 36.55 291.55 37.1 293.25 37.65 L298.35 39 300.4 39.55 Q301.7 39.95 303.05 40.8 304.4 41.65 305.3 43.1 306.25 44.55 306.3 46.8 306.3 49.3 305 51.2 303.75 53.15 301.25 54.25 298.8 55.35 295.15 55.4 292.9 55.4 290.85 54.8 288.8 54.25 287.2 53.1 285.6 51.95 284.65 50.15 283.75 48.35 283.75 45.85 L289.45 45.85 Q289.45 47.65 290.3 48.75 291.1 49.8 292.45 50.3 L295.35 50.8 297.65 50.55 Q298.85 50.3 299.7 49.55 300.55 48.85 300.6 47.5 300.55 46.05 299.4 45.3 298.25 44.5 296.45 44 L292.65 43.05 288.8 41.75 Q287 40.9 285.85 39.4 284.7 37.9 284.65 35.45 284.65 33.4 285.5 31.85 286.4 30.35 287.85 29.35 289.3 28.35 291.05 27.85 L294.65 27.35 M350.5 45.1 Q350.45 46.7 350.9 48.1 351.35 49.5 352.4 50.35 353.4 51.25 355.1 51.25 356.85 51.25 357.85 50.35 358.9 49.5 359.3 48.1 359.75 46.7 359.7 45.1 359.75 43.55 359.3 42.1 358.85 40.7 357.8 39.75 356.8 38.85 355.05 38.85 353.35 38.85 352.35 39.75 351.3 40.65 350.9 42.1 350.45 43.5 350.5 45.1 M356.25 34.85 Q359.25 34.85 361.25 36.3 363.2 37.75 364.1 40.1 365.05 42.45 365.05 45.25 365.05 47.9 364.1 50.15 363.15 52.4 361.25 53.85 359.4 55.25 356.55 55.3 354.8 55.3 353.25 54.55 351.7 53.8 350.75 52.35 L350.65 52.35 350.65 61.6 345.35 61.6 345.35 35.35 350.4 35.35 350.4 37.85 350.5 37.85 Q351.45 36.3 352.95 35.55 354.45 34.85 356.25 34.85 M327.15 45.1 Q327.15 46.65 327.6 48.05 328 49.45 329 50.35 330.05 51.25 331.85 51.25 333.65 51.25 334.7 50.35 335.75 49.45 336.15 48.05 336.6 46.65 336.55 45.1 336.6 43.5 336.15 42.1 335.75 40.65 334.7 39.75 333.65 38.85 331.85 38.85 330.05 38.85 329 39.75 328 40.65 327.6 42.1 327.15 43.5 327.15 45.1 M326.55 36.1 Q328.8 34.85 331.85 34.85 334.9 34.85 337.15 36.1 339.4 37.35 340.65 39.65 341.9 41.95 341.9 45.1 341.9 48.2 340.65 50.45 339.4 52.75 337.15 54 334.9 55.25 331.85 55.3 328.8 55.25 326.55 54 324.3 52.75 323.05 50.45 321.85 48.2 321.85 45.1 321.85 41.95 323.05 39.65 324.3 37.35 326.55 36.1 M368.5 49 L374.4 49 374.4 54.75 368.5 54.75 368.5 49"/>
</clipPath>
</defs>
<g clip-path="url(#myMask)">
<path id="pattern" fill="#333333" d="M493.35 13.9 L450.6 66.4 446.1 66.4 488.85 13.9 493.35 13.9 M488.1 66.4 L483.6 66.4 526.35 13.9 530.85 13.9 488.1 66.4 M455.85 13.9 L413.1 66.4 408.6 66.4 451.35 13.9 455.85 13.9 M470.85 13.9 L428.1 66.4 423.6 66.4 466.35 13.9 470.85 13.9 M431.1 13.9 L388.35 66.4 383.85 66.4 426.6 13.9 431.1 13.9 M425.85 13.9 L383.1 66.4 378.6 66.4 421.35 13.9 425.85 13.9 M437.1 13.9 L394.35 66.4 389.85 66.4 432.6 13.9 437.1 13.9 M444.6 13.9 L401.85 66.4 397.35 66.4 440.1 13.9 444.6 13.9 M377.85 66.4 L14.15 66.4 56.9 13.9 420.6 13.9 377.85 66.4"/>
</g>
</svg>
</div>