SVG: Путь клипа не работает на прямоугольнике

Question

Я пытаюсь получить эффект заполнения ракеты топливом с помощью обрезки дорожек. Я экспортировал пути 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"/> 

Она полностью исчезает, когда я использую атрибут клип путь на нем:

<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/

Любая помощь очень ценится.

Answer 1

Почему вы используете совершенно другую форму для своего <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" 
 
\t width="480px" height="640px" > 
 
\t \t 
 
\t \t <defs> 
 
\t \t \t <clipPath id="rocket"> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M233.32,17.181l-4.674,1.168 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t L236.825,18.35L233.32,17.181z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M159.71,149.211h147.219 
 
\t \t \t 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 
 
\t \t \t C135.573,210.704,159.71,149.211,159.71,149.211z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M130.5,227.494l205.64-1.168 
 
\t \t \t 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 
 
\t \t \t s-4.984,1.271-2.337-8.179c2.647-9.449,17.526-60.757,17.526-60.757L130.5,227.494z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M108.301,304.608h250.038 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M94.28,381.724H372.36 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t S92.497,381.724,94.28,381.724z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M89.606,458.838h287.428 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t L89.606,458.838z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.122,537.122h266.396 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 
\t \t \t </clipPath> 
 
\t \t </defs> 
 

 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M233.32,17.181l-4.674,1.168 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t L236.825,18.35L233.32,17.181z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M159.71,149.211h147.219 
 
\t \t \t 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 
 
\t \t \t C135.573,210.704,159.71,149.211,159.71,149.211z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M130.5,227.494l205.64-1.168 
 
\t \t \t 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 
 
\t \t \t s-4.984,1.271-2.337-8.179c2.647-9.449,17.526-60.757,17.526-60.757L130.5,227.494z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M108.301,304.608h250.038 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M94.28,381.724H372.36 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t S92.497,381.724,94.28,381.724z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M89.606,458.838h287.428 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t L89.606,458.838z"/> 
 
\t \t <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#000000" stroke-miterlimit="10" d="M100.122,537.122h266.396 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 

 
\t \t <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>

Обратите внимание, что установка позиции прямоугольника (т.е.. y и height) с помощью CSS является SVG 2 вещь, и в настоящее время поддерживается только в Chrome.