Question

这里是我的React组件演示：https://codesandbox.io/s/epic-brown-osiq1，我现在使用viewBox的值getBBox和getBoundingClientRect()来实现一些计算以便放置元素。目前，我已经根据控制台从getBoundingClientRect()日志中提供的收益输入了原始值。您可以在我实现了getBoundingClientRect()的元素上看到它，即<svg>的根元素和clip-path的{{1}}元素。更好，但text的位置更高，实际上位于屏幕的中心，与text框的中心对齐-您可以看到“ So”一词位于“食物”一词，而不是在text的中心对齐。所以我目前在这一点上。感谢您的反馈。*

注意：您将在沙箱中看到一些评论，这些信息提供了我的部分信息或以前的试验。 我的代码做什么？具体来说，我显示的是box的文本，其中有一些动画的面板在clip-path之间移动，这是clip-path，为合成提供了一些动态。{{1 }}，使构图更深入。

期望：显示color_panel_group's element的{{1}}，该响应位置位于广告的垂直和水平 中心视口。
问题：：我的text隐藏了clip-path的一部分，而我尝试将元素相对于视口居中的操作却很繁琐。
我尝试过的事情：我尝试使用元素的宽度和元素的text的位置-主要是clip-path，{{1 }}，text和两种情况。甚至尝试通过在其中实现某个类来使用x元素，但最终还是得到了非常近似的结果。同样，在text和clip-path中，我尝试使用symbol的属性，同样具有非常近似的结果。我尝试使用use和tspan-主要在symbol的CSS选择器上玩-仍然具有近似结果。

我想知道我在想什么。也许有人可以对我的代码的行为做出一些解释？

这是我第二次演示的结果代码（大约是React组件生成的代码）：

position absolute

感谢任何提示。

Answer 1

SVG中的文本对齐方式不适合我们习惯于HTML和CSS的方式，在HTML和CSS中，一切都是具有一定尺寸的盒子，我们可以应用例如text-align: center。

在<svg:text>中，起始坐标定义点将从其展开文本行。 text-anchor属性控制此扩展将发生的方向：center值表示它将双向扩展，因此初始锚点将位于边界框宽度的中间（对于水平书写系统）。请参见出色的答案，说明此text-anchor是将文本居中SVG的最佳方式：https://stackoverflow.com/a/23272367/540955。另外，SVG内没有CSS位置属性（左/上），只有x / y坐标，也没有空白和余量，就像您在HTML中所知道的那样。

因此，在您的代码中添加text-anchor="middle"并向右移动x坐标将产生居中文本。我建议使用裸露的<text>元素而不是<tspan>，因为用dx / dy进行移位是相对于最后一个前一个字符，并且该字符可能是父<text>的一些空格（取决于代码格式）会导致不平衡的居中。为了简化计算，dominant-baseline ="central"（或者对于水平书写系统仅为middle）很有用，因为它将锚点从基线移动到“中心线”。因此，使用dy属性（如您已经做的那样）将行高的第一行“一半”向上移动，另一行向下移动，应该可以解决问题：

<svg viewBox="0 0 800 200" text-anchor="middle" dominant-baseline="central" font-size="100">
 <!-- Outline and diagonals with center point for illustration: -->
 <path d="M0,0h800v200h-800zl800,200m0 -200L0,200" fill="#FC9" stroke-width="1" stroke="rgba(0,0,0,0.3)"></path>
 <circle cx="50%" cy="50%" r="10" fill="red"></circle>
 <!-- Centered text: -->
 <text x="50%" y="50%" fill="rgba(0,0,0,0.3)">So</text>
 <!-- Shifted up and down: -->
 <text x="50%" y="50%" dy="-0.5em">So</text>
 <text x="50%" y="50%" dy="+0.5em">Food</text>
</svg>

（不完全相关：仅可以使用background-clip: text在CSS中进行剪辑；这是您设计的粗略变化，因为它出现在Chrome浏览器中，带有动画文本背景，但没有阴影。不幸的是添加阴影会我认为需要更多的元素或属性。这应该在任何支持background-clip的浏览器中都可以使用。）

div {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 30vh;
	line-height: 30vh;
	font-weight: bold;
	font-family: Impact;
}
span {
	color: #fff;
	background-color: #000;
	width: 100%;
	text-align: center;
}
@supports (-webkit-text-fill-color: transparent) and (-webkit-background-clip: text) {
	span {
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		animation: 2s wohoo infinite alternate cubic-bezier(1,0,1,1);
		background-position: 0 0;
		background-size: 100% 100%;
		background-color: transparent;
		background-image: linear-gradient(
			to right,
			#f2385a 0,
			#f2385a 20%,
			#f5a503 0,
			#f5a503 40%,
			#e9f1df 0,
			#e9f1df 60%,
			#56d9cd 0,
			#56d9cd 80%,
			#3aa1bf 0,
			#3aa1bf 100%
		);
		background-repeat: no-repeat;
		transform-origin: center center;
	}
}

@keyframes wohoo {
	from {
		background-size: 0 100%;
		background-position: -5vh 0;
		transform: scale(0.7);
	}
	50% {
		transform: scale(0.7);
	}
	90% {
		transform: scale(0.9);
	}
	to {
		background-size: 500% 100%;
		background-position: 0vh 0;
		transform: scale(0.9) 
	}
}

html,body{margin:0;overflow:hidden;}
body {
	background-color: #1d1f20;
	color: snow;
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
}

<div>
	<span>Baz</span>
	<span>Gazonk</span>
	<span>Qux</span>
</div>

如何将剪切路径的文本相对于视口居中并显示所有剪切路径的文本？

1 个答案: