我正在尝试使用路径剪切来产生火箭燃料填充效果。我已经从 illustrator 中导出了 SVG 路径，现在我正在尝试使用 a 剪裁这些路径并增加它的高度以提供漂亮的“填充”动画，但由于某种原因矩形没有剪裁路径。
我正在使用这个矩形进行裁剪:
<rect class="clipping-rect" x="20.681" y="14.884" fill-rule="evenodd" clip-rule="evenodd" fill="#407DC0" stroke="#000000" stroke-miterlimit="10" width="360.87" height="601.449"/>
当我在其上使用 clip-path 属性时，它完全消失了:
<rect class="clipping-rect" clip-path="url('#rocket')" x="20.681" y="14.884" fill-rule="evenodd" clip-rule="evenodd" fill="#407DC0" stroke="#000000" stroke-miterlimit="10" width="360.87" height="601.449"/>
火箭的剪辑路径是:
<defs>
<clipPath id="rocket">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" stroke="#000000" stroke-miterlimit="10" d="M959,236l-4,1l-5,6l-23,40
l-14,28l-12,27c0,0-1.556,3.346,0,5s3,1,3,1h7h15h14h9h30h27h9l3-2v-2l-8-18l-14-27l-9-18l-11-20l-14-20L959,236z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M896,349h126l23,57
c0,0,0.374,3.977-3,4s-167,0-167,0s-2.341,0.37-1-4S896,349,896,349z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M871,416l176-1
c0,0,0.674,0.259,2,4s15,52,15,52s3.026,6.081-1,6s-207,0-207,0s-4.266,1.087-2-7c2.266-8.087,15-52,15-52L871,416z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M852,482h214
c0,0,0.853,0.547,2,6s10,50,10,50s2.055,4.948-2,5s-234,0-234,0s-2.751,0.376-2-5s10-52,10-52S850.474,482.509,852,482z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M840,548h238
c0,0,1.153,0.599,2,8s3.882,49.833,3,51c-0.882,1.168-0.031,1.561-3,2s-240.647,1.306-243,1s-2.63,0.191-3-4s4-56,4-56
S838.474,548,840,548z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M836,614h246
c0,0,2.036-0.282,2,3s-2.253,52.434-5,56s-0.482,2.626-2,3s-4.916,0.012-9,0c-4.084-0.012-227,0-227,0s-2.024-1.073-3-7
c-0.976-5.927-4.133-26.776-4-39c0.132-12.224,0-15,0-15L836,614z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M845,681h228
c0,0,4.289-0.288,3,4s-10.711,28.944-14,33s-11.723,16.909-13,18s-14.193,13.995-14,14s-1.181,1.417-3,1s-9.41-1.656-14-2
s-28.494-3.15-31-3s-35.928-1.114-49,0c-13.072,1.114-52,4-52,4s-2.879,0.018-8-5s-11.578-12.212-15-17s-11.47-16.998-14-24
s-7-18-7-18s-1-3.192,0-4S845,681,845,681z"/>
</clipPath>
</defs>
这是 JSFiddle:https://jsfiddle.net/amigoo/29j4Lmmo/
非常感谢任何帮助。
最佳答案
为什么您要为您的 <clipPath> 使用完全不同的形状？比你原来的火箭形状？只需对两者使用相同的形状即可。
.clipping-rect {
y: 496.333;
height: 120px;
}<svg version="1.1" id="RocketWrapper" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="480px" height="640px" >
<defs>
<clipPath id="rocket">
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M233.32,17.181l-4.674,1.168
l-5.842,7.01l-26.873,46.736l-16.357,32.715l-14.021,31.547c0,0-1.817,3.909,0,5.841c1.818,1.933,3.505,1.169,3.505,1.169h8.179
h17.526h16.358h10.516h35.053h31.546h10.516l3.505-2.337v-2.337l-9.347-21.031l-16.358-31.547l-10.516-21.032l-12.852-23.368
L236.825,18.35L233.32,17.181z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M159.71,149.211h147.219
l26.874,66.599c0,0,0.437,4.646-3.505,4.673c-3.942,0.028-195.124,0-195.124,0s-2.736,0.433-1.168-4.673
C135.573,210.704,159.71,149.211,159.71,149.211z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M130.5,227.494l205.64-1.168
c0,0,0.787,0.302,2.337,4.673c1.549,4.372,17.526,60.758,17.526,60.758s3.536,7.104-1.168,7.01c-4.704-0.094-241.86,0-241.86,0
s-4.984,1.271-2.337-8.179c2.647-9.449,17.526-60.757,17.526-60.757L130.5,227.494z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M108.301,304.608h250.038
c0,0,0.997,0.64,2.337,7.011c1.341,6.371,11.685,58.421,11.685,58.421s2.401,5.781-2.337,5.841c-4.738,0.061-273.407,0-273.407,0
s-3.214,0.44-2.336-5.841c0.877-6.282,11.684-60.758,11.684-60.758S106.518,305.203,108.301,304.608z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M94.28,381.724H372.36
c0,0,1.347,0.7,2.337,9.347c0.989,8.647,4.535,58.225,3.505,59.589c-1.031,1.365-0.037,1.823-3.505,2.336
c-3.469,0.514-281.174,1.526-283.923,1.168c-2.749-0.357-3.072,0.224-3.505-4.674c-0.433-4.897,4.673-65.43,4.673-65.43
S92.497,381.724,94.28,381.724z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M89.606,458.838h287.428
c0,0,2.378-0.33,2.336,3.505s-2.632,61.264-5.842,65.43c-3.209,4.167-0.563,3.069-2.336,3.505c-1.773,0.437-5.744,0.014-10.516,0
c-4.772-0.014-265.228,0-265.228,0s-2.365-1.254-3.505-8.179s-4.828-31.286-4.673-45.568c0.154-14.281,0-17.526,0-17.526
L89.606,458.838z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.122,537.122h266.396
c0,0,5.011-0.337,3.505,4.674c-1.506,5.01-12.515,33.818-16.358,38.557c-3.842,4.739-13.697,19.756-15.189,21.031
c-1.493,1.275-16.583,16.352-16.358,16.359c0.225,0.005-1.379,1.654-3.505,1.168c-2.126-0.487-10.995-1.936-16.358-2.337
c-5.364-0.402-33.292-3.681-36.221-3.505c-2.928,0.176-41.978-1.301-57.252,0c-15.274,1.302-60.757,4.674-60.757,4.674
s-3.364,0.02-9.347-5.843c-5.983-5.862-13.528-14.269-17.526-19.862c-3.998-5.594-13.401-19.86-16.357-28.042
c-2.957-8.181-8.18-21.031-8.18-21.031s-1.168-3.73,0-4.674C97.785,537.347,100.122,537.122,100.122,537.122z"/>
</clipPath>
</defs>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M233.32,17.181l-4.674,1.168
l-5.842,7.01l-26.873,46.736l-16.357,32.715l-14.021,31.547c0,0-1.817,3.909,0,5.841c1.818,1.933,3.505,1.169,3.505,1.169h8.179
h17.526h16.358h10.516h35.053h31.546h10.516l3.505-2.337v-2.337l-9.347-21.031l-16.358-31.547l-10.516-21.032l-12.852-23.368
L236.825,18.35L233.32,17.181z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M159.71,149.211h147.219
l26.874,66.599c0,0,0.437,4.646-3.505,4.673c-3.942,0.028-195.124,0-195.124,0s-2.736,0.433-1.168-4.673
C135.573,210.704,159.71,149.211,159.71,149.211z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M130.5,227.494l205.64-1.168
c0,0,0.787,0.302,2.337,4.673c1.549,4.372,17.526,60.758,17.526,60.758s3.536,7.104-1.168,7.01c-4.704-0.094-241.86,0-241.86,0
s-4.984,1.271-2.337-8.179c2.647-9.449,17.526-60.757,17.526-60.757L130.5,227.494z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M108.301,304.608h250.038
c0,0,0.997,0.64,2.337,7.011c1.341,6.371,11.685,58.421,11.685,58.421s2.401,5.781-2.337,5.841c-4.738,0.061-273.407,0-273.407,0
s-3.214,0.44-2.336-5.841c0.877-6.282,11.684-60.758,11.684-60.758S106.518,305.203,108.301,304.608z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M94.28,381.724H372.36
c0,0,1.347,0.7,2.337,9.347c0.989,8.647,4.535,58.225,3.505,59.589c-1.031,1.365-0.037,1.823-3.505,2.336
c-3.469,0.514-281.174,1.526-283.923,1.168c-2.749-0.357-3.072,0.224-3.505-4.674c-0.433-4.897,4.673-65.43,4.673-65.43
S92.497,381.724,94.28,381.724z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M89.606,458.838h287.428
c0,0,2.378-0.33,2.336,3.505s-2.632,61.264-5.842,65.43c-3.209,4.167-0.563,3.069-2.336,3.505c-1.773,0.437-5.744,0.014-10.516,0
c-4.772-0.014-265.228,0-265.228,0s-2.365-1.254-3.505-8.179s-4.828-31.286-4.673-45.568c0.154-14.281,0-17.526,0-17.526
L89.606,458.838z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.122,537.122h266.396
c0,0,5.011-0.337,3.505,4.674c-1.506,5.01-12.515,33.818-16.358,38.557c-3.842,4.739-13.697,19.756-15.189,21.031
c-1.493,1.275-16.583,16.352-16.358,16.359c0.225,0.005-1.379,1.654-3.505,1.168c-2.126-0.487-10.995-1.936-16.358-2.337
c-5.364-0.402-33.292-3.681-36.221-3.505c-2.928,0.176-41.978-1.301-57.252,0c-15.274,1.302-60.757,4.674-60.757,4.674
s-3.364,0.02-9.347-5.843c-5.983-5.862-13.528-14.269-17.526-19.862c-3.998-5.594-13.401-19.86-16.357-28.042
c-2.957-8.181-8.18-21.031-8.18-21.031s-1.168-3.73,0-4.674C97.785,537.347,100.122,537.122,100.122,537.122z"/>
<rect class="clipping-rect" x="20.681" y="14.884" fill-rule="evenodd" clip-rule="evenodd" fill="#407DC0" stroke="#000000" stroke-miterlimit="10" width="360.87" height="601.449" clip-path="url('#rocket')"/>
</svg>请注意，使用 CSS 设置矩形位置(即 y 和 height)是 SVG 2 的事情，目前仅在 Chrome 中受支持。
关于html - SVG:剪辑路径不适用于矩形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42254400/