SVG：剪辑路径不适用于矩形答案

【问题标题】：SVG: Clip Path not working on rectangleSVG：剪辑路径不适用于矩形
【发布时间】：2017-07-04 09:50:48
【问题描述】：

我正在尝试使用路径剪辑来获得火箭燃料填充效果。我已经从 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/

非常感谢任何帮助。

【问题讨论】：

标签： html css svg

【解决方案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"
	 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 中受支持。

【讨论】：

我太傻了。我对 SVG 完全陌生，所以请多多包涵。我使用 rect 只是为了让它工作，从来不知道它的兼容性问题。您能否建议/指导我最好使用什么来代替矩形来获得水箱的波浪填充效果而不是为矩形的 Y 设置动画？
见blogs.adobe.com/creativecloud/… 的一个例子。
我使用 SnapSVG 让它工作了：s = Snap("#RocketWrapper"); s.select('rect.clipping-rect').animate({y: '0'} , 5000);