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 数据框中选择列

postgresql - 组内级联的Postgres交叉表(文本，文本)
表架构 DROP TABLE bla; CREATE TABLE bla (id INTEGER, city INTEGER, year_ INTEGER, month_ INTEGER, val I
javascript - 按一定顺序分割字符串。例如文本/0000/文本/文本
我需要拆分字符串/或从具有以下结构的字符串中获取更容易的子字符串。字符串将来自 window.location.pathname 或 window.location.href，看起来像 text/n
ios - 将对象添加到数组时更新 textView 文本，而不覆盖前一个对象的 textView 文本
每当将对象添加到数组中时，我都会尝试更新 TextView ，并在 TextView 中显示该文本，如下所示: "object 1" "object 2" 问题是，每次将新对象添加到数组时，它都会覆盖
java - Html 2 文本 - 删除 "hidden"文本
我目前正在寻找使用 Java 读取网站可见文本并将其存储为纯文本字符串的方法。换句话说，我想转换成这样: Hello stupid World进入“ Hello World ” 或者类似的东西 Un
php - Pear Mail，如何以UTF-8发送纯文本/文本+文本/html
我正在尝试以文本和 HTML 格式发送电子邮件，但无法正确发送正确的 header 。特别是，我想设置 Content-Type header ，但我找不到如何为 html 和文本部分单独设置它。这
c# - 从资源 wpf 绑定(bind)文本 block 文本
我尝试了上面的代码，但我无法绑定(bind)文本，我怎样才能将资源内部文本 bloc
unity3d - Unity 网络播放器因 UI 文本(新 Canvas 文本)而崩溃
我刚刚完成了 Space Shooter 教程，由于没有 GUIText 对象，所以我创建了 UI.Text 对象并进行了相应的编码。它在统一播放器中有效，但在构建 Web 应用程序后无效。我花了一段
ios - 为什么 UITextField 文本 setter 无法识别 [UIView 文本] 选择器
我有这个代码: - (IBAction)setButtonPressed:(id)sender { NSUserDefaults *sharedDefaults = [[NSUserDefau
java - 在 JLabel 图标上添加 JLabel 文本。使用相同的 JLabel 文本
抱歉标题含糊不清，但我想不出我想在标题中做什么。无论如何，对于图像上的文本，我使用了 JLabel 文本并将其添加到图标中。 JLabel icon = new JLabel(new Imag
javascript - "The stylesheet was not loaded because its MIME type, "文本/html "is not "文本/css"
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
html - 是否可以使用 CSS 定位 HTML(文本)？ - 它显示为(文本)作为 ID
我在将 Twitter 嵌入到我从 HTML 5 转换的 wordpress 运行网站时遇到问题。我遇到的问题是推文不是我的自定义字体... 这是我无法使用任何 css 定位的 HTML 代码，我正
java - 将 logger.debug ("message: "+ 文本)转换为 logger.debug(消息 : {}", 文本)
我正在尝试找到解决由于使用以下形式的代码而导致的冗余字符串连接问题的最佳方法: logger.debug("Entering loop, arg is: " + arg) // @1 在大多数情况下，
java分组正则表达式无法匹配字符串+文本
我写了这个测试 @Test public void removeRequestTextFromRouteError() throws Exception { String input = "F
java正则表达式匹配&[文本]
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[文本]，并且需要获取文本。字符串可能类似于:something &[text] &[text] everything &[text] 等
CSS变形词/文本
有没有办法将标题文本从一个词变形为另一个词，同时保留两个词中使用的字母？我看过的许多 css 文本动画大多是视觉的，很少有旋转整个单词的。我想要做的是从一个词过渡，例如“BEACH”到“CHANGE
学习python中matplotlib绘图设置坐标轴刻度、文本
总结matplotlib绘图如何设置坐标轴刻度大小和刻度。上代码： ?
容器内的 Flutter 文本
我在容器 (1) 中创建了容器 (2)。你能帮忙如何向容器(1)添加文本吗？下面是我的代码 return Scaffold( body: Padding( padding: c
具有渐变和渐变轮廓的 CSS 文本
我似乎找不到任何人或任何人这样做过。我试图限制我们使用的图像数量，并想创建一个带有渐变作为其“颜色”的文本，并在其周围设置渐变轮廓/描边到目前为止，我还没有看到任何将两者结合在一起的东西。我可以自
从视频游戏截图中提取 Python 文本
我正在为视频游戏暗黑破坏神 2 使用 discord.py 构建一个不和谐机器人。其中一项功能要求机器人从暗黑破坏神 2 屏幕截图中提取项目的名称和属性。我目前正在为此使用 pytesseract，但
在ggplot2中旋转 strip 文本
我很难弄清楚如何旋转 strip.text theme 中的属性来自 ggplot2 .我使用的是 R 版本 3.4.2 和 ggplot2 版本 2.2.1。以下是 MWE 的数据。 > dput

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 在 SVG 上居中文本元素