javascript - 如何将剪辑路径文本相对于视口(viewport)居中并显示所有剪辑路径文本？

Question

这是我的 React 组件演示:https://codesandbox.io/s/epic-brown-osiq1 ，我现在使用viewBox的值，getBBox和getBoundingClientRect()实现一些计算以定位我的元素。目前，我已根据控制台从getBoundingClientRect()向我提供的返回值输入原始值。的日志。你可以在我实现了 getBoundingClientRect() 的元素上看到它上，即<svg>的根元素和 clip-path的text的元素。更好的是text更多的地方是屏幕中心的塔真正与 text 的中心对齐的框 - 您可以看到“So”的单词位于“Food”单词的开头，而不是在 box 上对齐。的中心。所以我现在就处于这个阶段。感谢您的反馈。*

注意:您将看到一些评论，提供我以前在沙箱内进行的试验的信息或部分内容。我的代码做什么？具体来说，我显示 clip-path的文本，其中有一些动画面板在 clip-path 上行驶- 这是color_panel_group's element - 给构图带来一些活力。 text 后面还有一个阴影为构图赋予一定的深度。

• 期望:显示 clip-path的text响应式地定位在视口(viewport)的垂直和水平中心。
• 问题:我的 clip-path隐藏 text 的一部分我将元素相对于视口(viewport)居中的尝试未能取得成果。
• 我尝试过的:我尝试调整元素的宽度和 x元素的位置 - 主要是 text , clip-path , symbol以及两种情况。甚至尝试玩 use元素通过在其中实现一些类，但最终得到的结果非常近似。也在 tspan和symbol我尝试玩 x的属性，同样具有非常近似的结果。我尝试玩 position absolute和一个 relative container -主要是关于SVG直接使用 CSS 选择器，仍然具有近似结果。

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

这是我的第二个演示的生成代码(大约是 React 组件生成的代码):

body {
  background: orange;
}

svg {
  background: green;
  display: block;
  margin: auto;
  position: relative;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.component {
  min-width: 100vw;
  min-height: 100vh;
  font-size: 100%;
}

.fade_in_background {
  opacity: 1;
  visibility: visible;
  transition: all 1.5s ease-out 0s;
}

.brandtype {
  margin: auto;
  text-align: center;
}

.brandtype_use {
  position: absolute;
  transform: translate(-112.65px, 0)
}

.clipPath_text {
  text-align: center;
}

.color_panel_group {
  padding: 25px;
}

.shape_animation {
  transform-origin: 0;
  transform: scale(0, 1) translate(0, 0);
  animation: moving-panel 3s 1.5s 1 alternate forwards;
}

.shadow {
  transform: translate(10px, 10px)
}

.shape_animation_shadow {
  fill: black;
  fill-opacity: .505;
  transition: all 1.3s ease-out 0.3s;
}

.brandtype {
  font-size: 6.8em;
}

@keyframes moving-panel {
  to {
    transform: scale(1, 1) translate(20px, 0);
  }
}

<div class="component">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 965 657">
    <defs>
      <symbol id="panel_animation" y="0">
        <clipPath class="clipPath_text" id="clipPath_text"><text class="brandtype" word-spacing="-.45em">
            <tspan x="0%" y="50%" dy="1.6em">So</tspan>
            <tspan x="0%" y="50%" dy="3em">Food</tspan>
          </text></clipPath>
        <g class="shadow" clip-path="url(#clipPath_text)">
          <rect class="shape_animation shape_animation_shadow" width="100%" height="100%" x="-25px">
          </rect>
        </g>
        <g class="color_panel_group" clip-path="url(#clipPath_text)">
          <rect class="shape_animation" fill="#F2385A" width="100%" height="100%"></rect>
          <rect class="shape_animation" fill="#F5A503" width="80%" height="100%"></rect>
          <rect class="shape_animation" fill="#E9F1DF" width="60%" height="100%"></rect>
          <rect class="shape_animation" fill="#56D9CD" width="40%" height="100%"></rect>
          <rect id="shape_animation_ref" class="shape_animation" fill="#3AA1BF" width="20%" height="100%" x="-25px">
          </rect>
        </g>
      </symbol>
    </defs>
    <rect width="100%" height="100%" filter="url(#background_light)"></rect>
    <use width="500px" height="100%" x="50%" xlink:href="#panel_animation" class="brandtype_use"></use>
  </svg>
</div>

感谢您的任何提示。

Answer 1

SVG 中的文本对齐方式与我们习惯的 HTML 和 CSS 方式不同，其中所有内容都是具有某些尺寸的框，我们可以应用例如text-align: center .

在 <svg:text>起始坐标定义文本行扩展的点。 text-anchor 属性控制此扩展将发生的方向:center值意味着它将双向扩展，因此初始 anchor 将位于边界框宽度的中间(对于水平书写系统)。请参阅说明此问题的优秀答案 text-anchor作为 SVG 中文本居中的最佳方式:https://stackoverflow.com/a/23272367/540955 。此外，SVG 内部没有 CSS 位置属性(左/上)，只有 x/y 坐标，也没有边距和盒子模型的其余部分，正如您在 HTML 中所知道的那样。

因此在您的代码中添加 text-anchor="middle"并移动x坐标进一步向右将产生居中文本。我建议使用裸 <text>与 <tspan> 相对的元素s，因为用 dx 来移动它们/dy相对于最后一个前面的字符，该字符可能是父级 <text> 中的一些空格(取决于代码格式)什么会产生不平衡的居中。也为了更容易计算 dominant-baseline ="central" (或者只是 middle 对于水平书写系统)很有用，因为它将 anchor 从基线移动到“中心线”。所以使用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>

<小时/>

(不完全相关:剪裁只能在 CSS 中使用 background-clip: text 来完成；这是您的设计在 Chrome 浏览器中出现的粗略变化，具有动画文本背景，但没有阴影。不幸的是，添加阴影需要更多我认为元素或属性。这应该适用于任何支持背景剪辑的浏览器。)

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>