1
我以爲我在做一些非常平凡的事情;在一個SVG中動畫蒙版的形狀，但它完全讓我困惑。使用CSS使用clipPath動畫SVG路徑
我有一個相對簡單的安裝程序：一個定義爲clipPath的SVG和一個使用上述掩碼的path。靜態地，這與預期完全相同 - clipPath掩蓋了我正在使用的模式。不過，我打算動畫path以便它猛撲很好，創造了很好的文字效果：
我遇到的是，我無法使用left或top在CSS操縱的第一個問題路徑的位置。我發現一個線程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">
\t <defs>
\t \t <clipPath id="myMask">
\t \t \t <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"/>
\t \t </clipPath>
\t </defs>
\t
\t <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"/>
\t
</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>有另一種方式來達到同樣的效果呢？請注意，這將放置在照片圖像上，因此動畫GIF不會削減它，並且它必須可擴展而不會損失質量（因此，SVG）。
爾加 - 謝謝！我嘗試了各種與''標籤的組合（因爲我讀過它實際上並不佔用SVG中的空間），但是我的錯誤是將我試圖爲_group_設置動畫的ID應用，而不是將其留在_path_上。公認！ –
indextwo