主页 / 问题 / 1089717
Accepted
ioprst
Asked:2020-03-02 19:37:51 +0000 UTC2020-03-02 19:37:51 +0000 UTC

为什么除了最后一行之外的所有多行文本都向左移动一个字符？

  • 772

1）为什么除了最后一行之外的所有多行文本都向左移动？

<svg xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" baseProfile="full" height="100%" version="1.1" viewBox="0 0 448 320" width="100%">
  <rect fill="#FFFFFF" height="320" stroke="none" width="448"/>
  <g id="root" transform="translate(0,0)">
    <g id="graph" transform="translate(64,64)">
      <rect id="background" width="320" height="192" stroke="#000000" stroke-width="1.0" fill="#e0e0e0"/>
      <g id="history" transform="translate(0, 14.666666666666668)" stroke-width="none" font-family="Consolas" font-size="12pt" fill="#000000">
        <text x="320" text-anchor="end">
          <tspan>Abcdefabcd</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="275.8333333333333" dy="2em" text-anchor="middle">Abc</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
          <tspan x="320" dy="1em">Abcd F</tspan>
        </text>
        <line stroke="#FFFF00" stroke-width="1.0" x1="231.66666666666666" y1="14.666666666666668" x2="258.1666666666667" y2="14.666666666666668"/>
        <line stroke="#00FF00" stroke-width="1.0" x1="231.66666666666666" y1="29.333333333333336" x2="258.1666666666667" y2="29.333333333333336"/>
        <line stroke="#FF0000" stroke-width="1.0" x1="231.66666666666666" y1="44.0" x2="258.1666666666667" y2="44.0"/>
        <line stroke="#808000" stroke-width="1.0" x1="231.66666666666666" y1="93.83333333333334" x2="258.1666666666667" y2="93.83333333333334"/>
        <line stroke="#008000" stroke-width="1.0" x1="231.66666666666666" y1="109.66666666666669" x2="258.1666666666667" y2="109.66666666666669"/>
        <line stroke="#800000" stroke-width="1.0" x1="231.66666666666666" y1="125.50000000000001" x2="258.1666666666667" y2="125.50000000000001"/>
      </g>
    </g>
  </g>
</svg>

在此处输入图像描述

您可以将所有文本（最后一行除外）向左移动一个字符宽度（仅使用等宽字体）。

2）但是如何正确计算第n个字体字符的大小？到目前为止，我只计算了 Consolas 字体的近似系数，但它们并不精确。有没有通用的解决方案？

svg

1 个回答

  1. Best Answer

    内联和“先锋距离”

    在这种情况下，问题在于 SVG，但对于 HTML 来说，这一切都是正确的。

    我将立即回答这个问题：发生偏移是因为在内联标记之间（在这种情况下是<tspan>）有一个换行符，它被解释为一个空格字符。

    为了对抗这种现象，最常用的三种方法之一是：

    方法一是正确的

    在使用 SVG 时，没有必要忽略 CSS。首先，你仍然不能没有样式。其次，CSS 在选择选择器方面有很大的灵活性。第三，风格是为此而设计的。第四，内联样式是不礼貌的，因为它更难规定，最重要的是，它们不能被任何东西打断，因为 他们有最高优先级。

    因此，我们style从标签中删除并<style>在块或 CSS 文件中写入以下内容：

    #history > text { font-size: 0; } /* Задаём нулевой размер шрифта для контейнера */
#history > text > tspan { font-size: 12pt; } /* Задаём нужный размер для текстовых блоков */

    那。我们“折叠”文本块中的任何字符（ ），但在具有明确指定字体大小<text>的包装器之外。<tspan>

    第二种方式简单明了

    我们只是不产生多余的不必要的字符，而是将标签写在一行中，不带连字符：

    <text><tspan>A</tspan><tspan>Б</tspan><tspan>В</tspan><tspan>Г</tspan><tspan>Д</tspan></text>

    很明显，“没有转移 - 没有问题”。

    方法三——肮脏的hack

    为什么是“肮脏的黑客”？“Hack”，因为它不适合这种用途，但它可以工作。并且“脏”，因为它体面地阻塞了标记。尽管如此，它在过去经常被使用。

    众所周知，注释标签 ( <!-- -->) 及其内容在显示文档时会被完全忽略。因此，在这个标签中进行转移是合乎逻辑的：

    <text x="320" text-anchor="end">
    <tspan x="320" dy="1em">Abcd F</tspan><!--
 --><tspan x="320" dy="1em">Abcd F</tspan><!--
 --><tspan x="320" dy="1em">Abcd F</tspan><!--
 --><tspan x="320" dy="1em">Abcd F</tspan>
</text>

    如您所见，这种方法极大地使代码的视觉感知复杂化，并且为了可读性而进行连字符。那。“把锥子换成了肥皂。”

    处理这种祸害的更多方法 -内联元素之间的“神秘缩进”

    • 3

相关问题