refactor(clipPath): fix side-effect caused by #3367 (#3409)

Make x Axis clipPath y coordinate to be fixed

Ref #3367

src/ChartInternal/internals/clip.ts

@@ -61,12 +61,11 @@ export default {
 		const h = (isRotated ? (margin.top + height) + 10 : margin.bottom) + 20;
 
 		const x = isRotated ? -(1 + left) : -(left - 1);
-		const y = -Math.max(15, margin.bottom);
 		const w = isRotated ? margin.left + 20 : width + 10 + left;
 
 		node
 			.attr("x", x)
-			.attr("y", y)
+			.attr("y", -2)
 			.attr("width", w)
 			.attr("height", h);
 	},

test/internals/axis-x-spec.ts

@@ -227,5 +227,39 @@ describe("X AXIS", function() {
 				expect(lines.attr("d")).to.be.equal(initialPath);
 			});
 		});
+
+		describe("", () => {
+			before(() => {
+				args = {
+					data: {
+						x: "x",
+						columns: [
+							["x", "www.somesitename1.com", "www.somesitename2.com", "www.somesitename3.com", "www.somesitename4.com", "www.somesitename5.com", "www.somesitename6.com", "www.somesitename7.com", "www.somesitename8.com", "www.somesitename9.com", "www.somesitename10.com", "www.somesitename11.com", "www.somesitename12.com"],
+							["pv", 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400]
+						],
+						type: "bar"
+					},
+					axis: {
+						x: {
+							type: "category",
+							tick: {
+							rotate: 75,
+							multiline: false,
+							tooltip: true
+							},
+							height: 130
+						}
+					}
+				};
+			});
+
+			it("should clipPath for x axis size defined as x Axis' dimension.", () => {
+				const clipRect = chart.internal.$el.defs.select("[id$=xaxis] rect");
+				const axisRect = chart.$.main.select(`.${$AXIS.axisX}`).node().getBoundingClientRect();
+
+				expect(axisRect.height).to.be.below(+clipRect.attr("height"));		
+				expect(+clipRect.attr("y") > -50).to.be.be.ok;
+			});
+		});
 	});
 });