我有一个我在illustrator中创建的场景,导出为svg。它是一个矩形内的wrightflyer飞机。我正在使用snapsvg加载svg文件,我试图将它从矩形的一边动画到另一边,矩形是剪贴蒙版。我希望飞机在从矩形边界框出来时消失。
我可以让剪辑路径在简单的静态(非动画)形状(如圆圈等)上正常工作。剪辑路径我剪裁平面组简单无效。根本没有剪裁。以下是我的SVG给我带来麻烦的部分,有人可以帮我诊断吗?
<g id="wrightclipgroup">
<defs>
<clipPath id="wrightclip">
<rect x="675.855" y="341.69" width="375.542" height="302.107"/>
</clipPath>
</defs>
<g id="wrightflyer" clip-path="url(#wrightclip)">
<rect x="721.875" y="438.898" fill="#565656" width="65.048" height="1.432"/>
<g id="wrightbrother">
<circle fill="#E2D19C" cx="780.253" cy="437.305" r="3.918"/>
<path fill="#623619" d="M780.253,433.387c-2.164,0-3.918,1.754-3.918,3.918c0,0.505,0.104,0.984,0.278,1.428l0.245,0.1
c0.428,0.155,0.948,0.008,1.232-0.348c0.231-0.289,0.299-0.671,0.424-1.019c0.125-0.348,0.357-0.708,0.721-0.777
c0.383-0.073,0.74,0.203,1.122,0.281c0.655,0.134,1.282-0.326,1.727-0.826c0.412-0.464,0.744-1.007,0.958-1.587
C782.33,433.836,781.344,433.387,780.253,433.387z"/>
<g>
<path fill="#4068B2" d="M788.92,451.728c-0.185-1.142-0.183-2.385-1.438-2.647c-0.647-0.135-3.458,2.14-4.441,2.946
c-1.724,1.415-2.08,1.869-3.353,3.699c0.129-0.984,1.908-1.983,2.037-2.967l0-0.001c-2.284,0.319-4.527,0.914-6.671,1.763
c0.199,1.201,0.51,2.41,0.824,3.681c0.139,0.564,0.378,1.277,0.776,1.701c0.381,0.405,0.797,0.531,1.349,0.595
c2.609,0.299,3.473,0.237,4.767-0.893c0.981-0.857,2.172-2.852,2.938-4.227l-0.067,0.124l0.157,5.283l2.549-0.049
c0.127,0.007,0.269,0.009,0.362-0.077c0.072-0.066,0.097-0.169,0.117-0.264c0.151-0.722,0.266-1.452,0.344-2.186
C789.4,456.039,789.269,453.875,788.92,451.728z"/>
<path fill="#355587" d="M785.677,460.912l-0.148-4.963c-1.073,1.875-1.972,3.135-2.677,3.751
c-0.922,0.805-1.635,1.077-2.828,1.077c-0.492,0-1.082-0.045-2.035-0.154c-0.559-0.063-1.015-0.196-1.426-0.633
c-0.335-0.356-0.606-0.947-0.806-1.756l-0.099-0.4c-0.282-1.137-0.549-2.211-0.728-3.291l-0.016-0.1l0.094-0.037
c2.162-0.855,4.416-1.452,6.7-1.771l0.236-0.033l-0.099,0.196c-0.006,0.038-0.014,0.076-0.024,0.114
c0.311-0.288,0.677-0.601,1.14-0.981c2.408-1.978,3.909-2.98,4.459-2.98c0.031,0,0.06,0.003,0.086,0.008
c1.183,0.246,1.33,1.298,1.473,2.316c0.02,0.145,0.041,0.29,0.064,0.433c0.383,2.361,0.465,4.491,0.251,6.513
c-0.078,0.736-0.194,1.476-0.346,2.199c-0.02,0.093-0.049,0.233-0.155,0.331c-0.11,0.101-0.255,0.113-0.354,0.113
c0,0,0,0,0,0c-0.033,0-0.066-0.001-0.099-0.003L785.677,460.912z M785.767,455.532l0.152,5.125l2.426-0.047
c0.037,0.001,0.066,0.003,0.094,0.003h0c0.093,0,0.15-0.014,0.186-0.047c0.043-0.039,0.062-0.116,0.079-0.198
c0.15-0.715,0.265-1.446,0.342-2.174c0.212-2,0.131-4.108-0.249-6.447c-0.023-0.145-0.044-0.292-0.064-0.438
c-0.137-0.975-0.266-1.896-1.276-2.105c-0.01-0.002-0.022-0.003-0.036-0.003c-0.222,0-1.087,0.285-4.301,2.924
c-1.738,1.427-2.096,1.9-3.33,3.674l-0.293,0.422l0.066-0.509c0.07-0.533,0.569-1.052,1.052-1.554
c0.4-0.416,0.812-0.844,0.946-1.249c-2.169,0.318-4.31,0.887-6.368,1.693c0.177,1.036,0.434,2.075,0.707,3.172l0.099,0.4
c0.189,0.766,0.439,1.32,0.745,1.645c0.36,0.383,0.754,0.497,1.272,0.556c0.944,0.108,1.525,0.152,2.007,0.152
c1.137,0,1.784-0.247,2.664-1.015c0.745-0.651,1.725-2.062,2.911-4.194l0.219,0.12L785.767,455.532z"/>
</g>
<g>
<path fill="#355587" d="M781.471,443.27c-0.544-1.063-1.693-1.788-2.887-1.822c-1.193-0.034-2.382,0.624-2.987,1.653
c-0.463,0.788-0.609,7.245-0.701,8.155c-0.111,1.109-0.022,2.185,0.157,3.267c2.144-0.849,4.387-1.444,6.67-1.763
C781.899,451.421,782.085,444.47,781.471,443.27z"/>
<path fill="#355587" d="M774.956,454.696l-0.025-0.153c-0.208-1.254-0.258-2.303-0.158-3.299
c0.023-0.228,0.05-0.824,0.084-1.578c0.138-3.042,0.3-6.061,0.633-6.628c0.612-1.042,1.792-1.716,3.006-1.716l0.092,0.001
c1.23,0.036,2.434,0.795,2.995,1.89c0.636,1.243,0.439,8.238,0.266,9.563l-0.012,0.095l-0.095,0.013
c-2.265,0.316-4.5,0.907-6.642,1.755L774.956,454.696z M778.495,441.571c-1.126,0-2.222,0.625-2.79,1.593
c-0.33,0.561-0.505,4.433-0.599,6.513c-0.035,0.758-0.062,1.357-0.085,1.591c-0.094,0.934-0.052,1.917,0.131,3.082
c2.086-0.813,4.258-1.385,6.459-1.7c0.164-1.488,0.337-8.172-0.252-9.323c-0.521-1.016-1.637-1.721-2.779-1.754
L778.495,441.571z"/>
</g>
<path fill="#E2D19C" d="M777.009,451.274c0.484,0.074,0.976-0.031,1.45-0.155c1.749-0.46,3.411-1.196,5.064-1.929
c1.009-0.447,2.018-0.895,3.027-1.342c0.316-0.14,0.656-0.301,0.817-0.607c0.263-0.499-0.113-1.143-0.63-1.368
c-0.517-0.224-1.11-0.146-1.666-0.052c-2.57,0.437-5.098,1.133-7.511,2.121c-0.966,0.395-2.051,1.025-2.124,2.066
C775.689,450.666,776.312,451.167,777.009,451.274z"/>
<path fill="#355587" d="M785.983,435.363c-0.058-0.067-0.156-0.082-0.244-0.092c-0.735-0.082-1.473-0.129-2.212-0.157
c0.061-0.231,0.235-0.442,0.413-0.613c0.248-0.237,0.534-0.484,0.586-0.823c0.008-0.054,0.009-0.114-0.024-0.158
c-0.03-0.04-0.08-0.058-0.128-0.073c-0.423-0.13-0.866-0.183-1.307-0.232c-1.835-0.204-3.709-0.362-5.513,0.034
c-0.334,0.073-0.668,0.167-0.961,0.342s-0.544,0.442-0.641,0.769c-0.054,0.185-0.058,0.381-0.048,0.574
c0.021,0.383,0.069,0.718,0.298,1.029c0.203,0.275,0.514,0.454,0.841,0.539c0.413,0.108,0.847,0.083,1.273,0.054
c2.419-0.162,4.829-0.432,7.234-0.739c0.128-0.016,0.264-0.036,0.365-0.116C786.019,435.624,786.068,435.461,785.983,435.363z
"/>
</g>
<path fill="#565656" d="M878.392,431.787l-1.012,29.019c-3.535,1.211-19.144,5.778-63.924,10.202
c-8.71,0.861-17.233,1.595-25.406,2.226l3.238-62.418l-2.925-0.152l-3.257,62.793c-14.935,1.118-28.577,1.881-39.791,2.397
l25.043-11.64l-1.234-2.656l-31.468,14.626c-11.9,0.481-19.985,0.651-22.306,0.693l-14.889-17.398l-2.226,1.904l15.784,18.443
l0.686-0.009c0.214-0.003,10.398-0.158,26.55-0.851l15.146,8.668c-0.51,1.243-0.586,2.71-0.014,4.213
c0.512,1.345,1.604,2.437,2.949,2.949c4.257,1.62,8.256-1.883,7.543-6.055c-0.101-0.592-0.307-1.15-0.589-1.664l14.151-10.342
c10.51-0.747,21.748-1.671,33.302-2.813c52.715-5.208,65.156-10.523,65.66-10.747l0.837-0.372l1.078-30.915L878.392,431.787z
M765.443,485.924c-0.792-0.83-1.835-1.42-3-1.619c-2.168-0.371-4.148,0.537-5.329,2.086l-13.18-7.543
c9.632-0.432,21.157-1.05,33.825-1.926L765.443,485.924z"/>
<rect x="748.401" y="412.873" transform="matrix(0.9999 0.0144 -0.0144 0.9999 6.3635 -10.7405)" fill="#565656" width="2.929" height="48.302"/>
<rect x="745.169" y="436.197" transform="matrix(0.3088 0.9511 -0.9511 0.3088 947.8507 -430.3655)" fill="#565656" width="49.688" height="1.464"/>
<path fill="#ED5822" d="M889.244,432.359c-8.505,0.197-17.01,0.394-25.516,0.59c-3.108,0.072-6.281,0.135-9.249-0.79
c6.325-1.477,12.867-1.7,19.359-1.917c5.995-0.2,12.057-0.395,17.934,0.807C891.608,432.072,890.279,432.335,889.244,432.359z"
/>
<path fill="#ED5822" d="M888.898,442.284c-8.505,0.197-17.01,0.394-25.516,0.59c-3.108,0.072-6.281,0.135-9.249-0.79
c6.325-1.477,12.867-1.7,19.359-1.917c5.995-0.2,12.057-0.395,17.934,0.807C891.261,441.997,889.933,442.26,888.898,442.284z"
/>
<path fill="#EC5924" d="M698.652,466.032c-1.954-0.835-3.907-1.67-5.861-2.505c-0.823-0.352-1.695-0.743-2.181-1.495
c-0.374-0.579-0.465-1.29-0.539-1.976c-0.711-6.516-0.852-13.095-0.422-19.635c4.482-0.948,8.918-2.116,13.286-3.499
c0.075,8.595,0.15,17.191,0.225,25.786c0.012,1.387-0.141,3.063-1.38,3.687C700.81,466.883,699.65,466.458,698.652,466.032z"/>
<path fill="#ED5822" d="M800.45,415.003c-16.447,0.38-32.894,0.761-49.341,1.142c-6.01,0.139-12.146,0.261-17.885-1.527
c12.232-2.857,24.881-3.288,37.435-3.706c11.594-0.387,23.315-0.763,34.68,1.56C805.019,414.447,802.45,414.956,800.45,415.003
z"/>
<path fill="#ED5822" d="M798.731,464.273c-16.447,0.38-32.894,0.761-49.341,1.142c-6.01,0.139-12.146,0.261-17.885-1.527
c12.231-2.857,24.881-3.288,37.435-3.706c11.594-0.387,23.315-0.763,34.68,1.56
C803.301,463.717,800.731,464.227,798.731,464.273z"/>
<path id="wrightprop" fill="#B73E18" d="M721.875,439.189c-0.004-0.085-3.994-19.75-0.498-20.062
c3.496-0.311,1.051,18.368,0.498,20.858c-0.553,2.491-3.315,21.169-0.297,20.028
C724.596,458.872,721.984,441.713,721.875,439.189z"/>
</g>
</g>