css - 在 SVG 上居中文本元素-6ren

css - 在 SVG 上居中文本元素

转载作者：行者123 更新时间：2023-12-05 01:23:44

我有一个包含 SVG 元素的 div 元素和另一个包含文本的 div 元素。
我希望能够在 svg 上将文本元素居中，但我不确定该怎么做。我只能垂直对齐文本，但无法将其放在 svg 上并将其居中。

.table-text {
  color: black;
  font-size: 2em;
}

.my-table {
  display: flex;
  align-items: center;
}

<div tabindex="0" class="my-table">
   <svg xmlns="http://www.w3.org/2000/svg" class="my-svg" id="D1" style="fill: #399e54;" fill="none" stroke="black" stroke-width="2" viewBox="0 0 262 263" width="262" height="263">
      <path stroke="" stroke-width="" d="M 229.3 131.5 C 229.3 186.146 185.17 230.445 130.734 230.445 C 76.2972 230.445 32.1677 186.146 32.1677 131.5 C 32.1677 76.8544 76.2972 32.5553 130.734 32.5553 C 185.17 32.5553 229.3 76.8544 229.3 131.5 Z" />
      <path stroke="" stroke-width="" d="M 108.99 29.2536 C 108.936 29.8786 109.427 30.416 110.052 30.416 H 151.948 C 152.573 30.416 153.064 29.8786 153.01 29.2536 L 151.064 6.79053 C 151.016 6.23777 150.555 5.81352 150.003 5.81352 H 111.997 C 111.445 5.81352 110.984 6.23777 110.936 6.79053 L 108.99 29.2536 Z" />
      <path stroke="" stroke-width="" d="M 105.693 2.06967 C 105.693 1.47891 106.17 1 106.758 1 H 155.242 C 155.83 1 156.307 1.47891 156.307 2.06967 V 4.74385 C 156.307 5.33462 155.83 5.81352 155.242 5.81352 H 106.758 C 106.17 5.81352 105.693 5.33462 105.693 4.74385 V 2.06967 Z" />
      <path stroke="" stroke-width="" d="M 108.99 233.746 C 108.936 233.121 109.427 232.584 110.052 232.584 H 151.948 C 152.573 232.584 153.064 233.121 153.01 233.746 L 151.064 256.209 C 151.016 256.762 150.555 257.186 150.003 257.186 H 111.997 C 111.445 257.186 110.984 256.762 110.936 256.209 L 108.99 233.746 Z" />
      <path stroke="" stroke-width="" d="M 105.693 260.93 C 105.693 261.521 106.17 262 106.758 262 H 155.242 C 155.83 262 156.307 261.521 156.307 260.93 V 258.256 C 156.307 257.665 155.83 257.186 155.242 257.186 H 106.758 C 106.17 257.186 105.693 257.665 105.693 258.256 V 260.93 Z" />
      <path stroke="" stroke-width="" d="M 186.373 42.502 C 185.894 42.9055 185.863 43.6339 186.305 44.0775 L 215.93 73.8169 C 216.372 74.2605 217.098 74.2289 217.5 73.7486 L 231.947 56.4835 C 232.302 56.0587 232.275 55.4315 231.884 55.0392 L 205.011 28.0621 C 204.62 27.6698 203.995 27.6426 203.572 27.9994 L 186.373 42.502 Z" />
      <path stroke="" stroke-width="" d="M 203.049 20.8 C 203.465 20.3822 204.14 20.3822 204.556 20.8 L 238.839 55.2149 C 239.255 55.6326 239.255 56.3099 238.839 56.7277 L 236.955 58.6186 C 236.539 59.0363 235.864 59.0363 235.448 58.6186 L 201.165 24.2036 C 200.749 23.7859 200.749 23.1086 201.165 22.6909 L 203.049 20.8 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 189.251 C 44.9023 188.771 45.6278 188.739 46.0697 189.183 L 75.6953 218.923 C 76.1372 219.366 76.1057 220.094 75.6272 220.498 L 58.4283 235.001 C 58.0051 235.357 57.3803 235.33 56.9894 234.938 L 30.1157 207.961 C 29.7248 207.569 29.6977 206.941 30.0532 206.516 L 44.5003 189.251 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 206.272 C 22.745 206.69 22.745 207.367 23.1612 207.785 L 57.4444 242.2 C 57.8605 242.618 58.5352 242.618 58.9513 242.2 L 60.835 240.309 C 61.2511 239.891 61.2511 239.214 60.835 238.796 L 26.5518 204.381 C 26.1357 203.964 25.461 203.964 25.0448 204.381 L 23.1612 206.272 Z" />
      <path stroke="" stroke-width="" d="M 186.373 220.498 C 185.894 220.094 185.863 219.366 186.305 218.923 L 215.93 189.183 C 216.372 188.739 217.098 188.771 217.5 189.251 L 231.947 206.516 C 232.302 206.941 232.275 207.569 231.884 207.961 L 205.011 234.938 C 204.62 235.33 203.995 235.357 203.572 235.001 L 186.373 220.498 Z" />
      <path stroke="" stroke-width="" d="M 203.049 242.2 C 203.465 242.618 204.14 242.618 204.556 242.2 L 238.839 207.785 C 239.255 207.367 239.255 206.69 238.839 206.272 L 236.955 204.381 C 236.539 203.964 235.864 203.964 235.448 204.381 L 201.165 238.796 C 200.749 239.214 200.749 239.891 201.165 240.309 L 203.049 242.2 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 73.7486 C 44.9023 74.2289 45.6278 74.2605 46.0697 73.8169 L 75.6953 44.0775 C 76.1372 43.6339 76.1057 42.9055 75.6272 42.502 L 58.4283 27.9994 C 58.0051 27.6425 57.3803 27.6698 56.9894 28.0621 L 30.1157 55.0392 C 29.7248 55.4315 29.6977 56.0587 30.0532 56.4835 L 44.5003 73.7486 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 56.7277 C 22.745 56.3099 22.745 55.6326 23.1612 55.2149 L 57.4444 20.8 C 57.8605 20.3822 58.5352 20.3822 58.9513 20.8 L 60.835 22.6909 C 61.2511 23.1086 61.2511 23.7859 60.835 24.2036 L 26.5518 58.6186 C 26.1357 59.0363 25.461 59.0363 25.0448 58.6186 L 23.1612 56.7277 Z" />
      <path stroke="" stroke-width="" d="M 232.855 109.107 C 232.232 109.053 231.697 109.545 231.697 110.173 V 152.231 C 231.697 152.858 232.232 153.351 232.855 153.296 L 255.232 151.343 C 255.782 151.295 256.205 150.832 256.205 150.277 V 112.126 C 256.205 111.571 255.782 111.108 255.232 111.06 L 232.855 109.107 Z" />
      <path stroke="" stroke-width="" d="M 259.934 105.758 C 260.523 105.758 261 106.237 261 106.828 V 155.498 C 261 156.089 260.523 156.568 259.934 156.568 H 257.27 C 256.682 156.568 256.205 156.089 256.205 155.498 V 106.828 C 256.205 106.237 256.682 105.758 257.27 105.758 H 259.934 Z" />
      <path stroke="" stroke-width="" d="M 29.1454 109.704 C 29.768 109.649 30.3033 110.142 30.3033 110.769 V 152.827 C 30.3033 153.455 29.768 153.947 29.1454 153.893 L 6.7683 151.94 C 6.21765 151.892 5.79503 151.429 5.79503 150.874 V 112.723 C 5.79503 112.168 6.21766 111.705 6.7683 111.657 L 29.1454 109.704 Z" />
      <path stroke="" stroke-width="" d="M 2.06558 106.432 C 1.47708 106.432 1 106.911 1 107.502 V 156.172 C 1 156.763 1.47708 157.242 2.06558 157.242 H 4.72952 C 5.31802 157.242 5.7951 156.763 5.7951 156.172 V 107.502 C 5.7951 106.911 5.31802 106.432 4.72952 106.432 H 2.06558 Z" />
   </svg>
   <div class="table-text">
     TEST
   </div>
</div>

我还创建了这个 fiddle

最佳答案

如果您不想在 SVG 中包含带有 <text> 的文本元素，您可以使用绝对定位将文本放置在 SVG 上。
然后你可以使用display: flex;像这样使文本垂直和水平居中:

.my-table {
  display: inline-block;
  position:relative;
}
.table-text {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: black;
  font-size: 2em;
}

<div tabindex="0" class="my-table">
   <svg xmlns="http://www.w3.org/2000/svg" class="my-svg" id="D1" style="fill: #399e54;" fill="none" stroke="black" stroke-width="2" viewBox="0 0 262 263" width="262" height="263">
      <path stroke="" stroke-width="" d="M 229.3 131.5 C 229.3 186.146 185.17 230.445 130.734 230.445 C 76.2972 230.445 32.1677 186.146 32.1677 131.5 C 32.1677 76.8544 76.2972 32.5553 130.734 32.5553 C 185.17 32.5553 229.3 76.8544 229.3 131.5 Z" />
      <path stroke="" stroke-width="" d="M 108.99 29.2536 C 108.936 29.8786 109.427 30.416 110.052 30.416 H 151.948 C 152.573 30.416 153.064 29.8786 153.01 29.2536 L 151.064 6.79053 C 151.016 6.23777 150.555 5.81352 150.003 5.81352 H 111.997 C 111.445 5.81352 110.984 6.23777 110.936 6.79053 L 108.99 29.2536 Z" />
      <path stroke="" stroke-width="" d="M 105.693 2.06967 C 105.693 1.47891 106.17 1 106.758 1 H 155.242 C 155.83 1 156.307 1.47891 156.307 2.06967 V 4.74385 C 156.307 5.33462 155.83 5.81352 155.242 5.81352 H 106.758 C 106.17 5.81352 105.693 5.33462 105.693 4.74385 V 2.06967 Z" />
      <path stroke="" stroke-width="" d="M 108.99 233.746 C 108.936 233.121 109.427 232.584 110.052 232.584 H 151.948 C 152.573 232.584 153.064 233.121 153.01 233.746 L 151.064 256.209 C 151.016 256.762 150.555 257.186 150.003 257.186 H 111.997 C 111.445 257.186 110.984 256.762 110.936 256.209 L 108.99 233.746 Z" />
      <path stroke="" stroke-width="" d="M 105.693 260.93 C 105.693 261.521 106.17 262 106.758 262 H 155.242 C 155.83 262 156.307 261.521 156.307 260.93 V 258.256 C 156.307 257.665 155.83 257.186 155.242 257.186 H 106.758 C 106.17 257.186 105.693 257.665 105.693 258.256 V 260.93 Z" />
      <path stroke="" stroke-width="" d="M 186.373 42.502 C 185.894 42.9055 185.863 43.6339 186.305 44.0775 L 215.93 73.8169 C 216.372 74.2605 217.098 74.2289 217.5 73.7486 L 231.947 56.4835 C 232.302 56.0587 232.275 55.4315 231.884 55.0392 L 205.011 28.0621 C 204.62 27.6698 203.995 27.6426 203.572 27.9994 L 186.373 42.502 Z" />
      <path stroke="" stroke-width="" d="M 203.049 20.8 C 203.465 20.3822 204.14 20.3822 204.556 20.8 L 238.839 55.2149 C 239.255 55.6326 239.255 56.3099 238.839 56.7277 L 236.955 58.6186 C 236.539 59.0363 235.864 59.0363 235.448 58.6186 L 201.165 24.2036 C 200.749 23.7859 200.749 23.1086 201.165 22.6909 L 203.049 20.8 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 189.251 C 44.9023 188.771 45.6278 188.739 46.0697 189.183 L 75.6953 218.923 C 76.1372 219.366 76.1057 220.094 75.6272 220.498 L 58.4283 235.001 C 58.0051 235.357 57.3803 235.33 56.9894 234.938 L 30.1157 207.961 C 29.7248 207.569 29.6977 206.941 30.0532 206.516 L 44.5003 189.251 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 206.272 C 22.745 206.69 22.745 207.367 23.1612 207.785 L 57.4444 242.2 C 57.8605 242.618 58.5352 242.618 58.9513 242.2 L 60.835 240.309 C 61.2511 239.891 61.2511 239.214 60.835 238.796 L 26.5518 204.381 C 26.1357 203.964 25.461 203.964 25.0448 204.381 L 23.1612 206.272 Z" />
      <path stroke="" stroke-width="" d="M 186.373 220.498 C 185.894 220.094 185.863 219.366 186.305 218.923 L 215.93 189.183 C 216.372 188.739 217.098 188.771 217.5 189.251 L 231.947 206.516 C 232.302 206.941 232.275 207.569 231.884 207.961 L 205.011 234.938 C 204.62 235.33 203.995 235.357 203.572 235.001 L 186.373 220.498 Z" />
      <path stroke="" stroke-width="" d="M 203.049 242.2 C 203.465 242.618 204.14 242.618 204.556 242.2 L 238.839 207.785 C 239.255 207.367 239.255 206.69 238.839 206.272 L 236.955 204.381 C 236.539 203.964 235.864 203.964 235.448 204.381 L 201.165 238.796 C 200.749 239.214 200.749 239.891 201.165 240.309 L 203.049 242.2 Z" />
      <path stroke="" stroke-width="" d="M 44.5003 73.7486 C 44.9023 74.2289 45.6278 74.2605 46.0697 73.8169 L 75.6953 44.0775 C 76.1372 43.6339 76.1057 42.9055 75.6272 42.502 L 58.4283 27.9994 C 58.0051 27.6425 57.3803 27.6698 56.9894 28.0621 L 30.1157 55.0392 C 29.7248 55.4315 29.6977 56.0587 30.0532 56.4835 L 44.5003 73.7486 Z" />
      <path stroke="" stroke-width="" d="M 23.1612 56.7277 C 22.745 56.3099 22.745 55.6326 23.1612 55.2149 L 57.4444 20.8 C 57.8605 20.3822 58.5352 20.3822 58.9513 20.8 L 60.835 22.6909 C 61.2511 23.1086 61.2511 23.7859 60.835 24.2036 L 26.5518 58.6186 C 26.1357 59.0363 25.461 59.0363 25.0448 58.6186 L 23.1612 56.7277 Z" />
      <path stroke="" stroke-width="" d="M 232.855 109.107 C 232.232 109.053 231.697 109.545 231.697 110.173 V 152.231 C 231.697 152.858 232.232 153.351 232.855 153.296 L 255.232 151.343 C 255.782 151.295 256.205 150.832 256.205 150.277 V 112.126 C 256.205 111.571 255.782 111.108 255.232 111.06 L 232.855 109.107 Z" />
      <path stroke="" stroke-width="" d="M 259.934 105.758 C 260.523 105.758 261 106.237 261 106.828 V 155.498 C 261 156.089 260.523 156.568 259.934 156.568 H 257.27 C 256.682 156.568 256.205 156.089 256.205 155.498 V 106.828 C 256.205 106.237 256.682 105.758 257.27 105.758 H 259.934 Z" />
      <path stroke="" stroke-width="" d="M 29.1454 109.704 C 29.768 109.649 30.3033 110.142 30.3033 110.769 V 152.827 C 30.3033 153.455 29.768 153.947 29.1454 153.893 L 6.7683 151.94 C 6.21765 151.892 5.79503 151.429 5.79503 150.874 V 112.723 C 5.79503 112.168 6.21766 111.705 6.7683 111.657 L 29.1454 109.704 Z" />
      <path stroke="" stroke-width="" d="M 2.06558 106.432 C 1.47708 106.432 1 106.911 1 107.502 V 156.172 C 1 156.763 1.47708 157.242 2.06558 157.242 H 4.72952 C 5.31802 157.242 5.7951 156.763 5.7951 156.172 V 107.502 C 5.7951 106.911 5.31802 106.432 4.72952 106.432 H 2.06558 Z" />
   </svg>
   <div class="table-text">
     TEST
   </div>
</div>

关于css - 在 SVG 上居中文本元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71917814/

文章推荐： r - 取消列出并拆分列以添加到行而不会丢失 R 中其他列的信息

文章推荐：划分两个 float 时的 C 怪异行为

文章推荐：具有动态键的对象的 GraphQL 模式类型

文章推荐： python - 如何使用多行条件从 Pandas 数据框中选择列

css - 如何将 CSS 文件的 CSS 规则包含到另一个 CSS 文件的选择器中？
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
css - 将 css 文件移动到新的 css 文件夹后无法从我的 css 访问我的图片
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
css - css 3 中是否有任何 css 类分组 css 类？
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
css - 使用内联 CSS 删除从 CSS 文件继承的 CSS 属性
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
css - 初始规模与 desktop.css+phone.css+tablet.css？
我刚刚发现了 initial-scale 元属性。以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
css - LESS CSS - 提取生成的 CSS
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
css - 如何将内联 CSS 转换为外部 CSS？
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？最佳答案就像有人说的那样，“
css - 来自样式化组件时 CSS 模块中的动态 CSS
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
css - 在 CSS 中引用 CSS
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
css - 如何基于一个元素的 CSS 或它的前一个相邻兄弟的 CSS？
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。我的问题在于让按
css - 浏览器是否在加载 CSS 文件时解析 CSS？
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？这个问题不是 Load and executi
css - 将已经定义的 CSS 添加到另一个 CSS
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。标题有点乱，我给大家看一下。假
css - css/main.css 是否还有其他用途？
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
css - 如果缺少所需的 css，则加载备用 css
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。我有很多 css
css - CSS 框架和 CSS 网格有什么区别
请告诉我 CSS 框架和 CSS 网格之间的区别。最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
css - 如何摆脱从 css 文件继承的 css？
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
css - 带有 CSS 模块的普通 CSS
我以前使用 bootstrap css import 很好。但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
css - CSS 中的嵌套 CSS 选择器
有没有办法在 css 选择器中创建一个 css 组。例如: .SectionHeader { include: .foo; include: .bar; include: .
css - CSS 定位和 CSS 边距之间的区别
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
css - Gulp CSS 任务不会覆盖现有的 CSS
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 在 SVG 上居中文本元素