主页 / 问题 / 1251927
Accepted
Monkey Mutant
Asked:2022-03-05 17:41:02 +0000 UTC2022-03-05 17:41:02 +0000 UTC

如何删除换行符？

  • 772

沿着轮廓有文本，但它在词法上不正确地中断

我画了一个带有两个拱门的圆圈......这是文本的路径

这是一个例子

<svg viewBox="-450 -100 1000 980" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px;">
  <path d="M0,0 
           A 400 400 0 0 0 100 830
           M0,0  
           A 400 400 0 0 1 100 780" fill="none" stroke="red" stroke-width="0" id="path" />

  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#path" font-size="105px" letter-spacing="5" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

如您所见，单词的顺序被破坏了

并且预计单词将按顺序进行

startOffset 和 text-anchor 等命令无法提供所需的外观

应该怎么做才能纠正这种情况？

svg

2 个回答

  1. Best Answer

    问题是在问题中，对于一个文本，在 中设置了两个起点<path d="M ... M ..."。路径线必须是连续的：

    <svg viewBox="-500 -100 1000 1000" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px; border:1px solid blue;">
  <path fill="none" stroke="red" stroke-width="1" id="newpath" 
        d="M0,0 a 1 1 0 0 0 0 800 a 1 1 0 0 0 0 -800" />
  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#newpath" font-size="105px" letter-spacing="12" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

    相同，但使用绝对坐标：

    <svg viewBox="-500 -100 1000 1000" xmlns="http://www.w3.org/2000/svg" style="max-width: 200px; border:1px solid green;">
  <path fill="none" stroke="red" stroke-width="1" id="newpath" 
        d="M0,0 A 1 1 0 0 0 0 800 A 1 1 0 0 0 0 0" />
  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#newpath" font-size="105px" letter-spacing="12" startOffset="50%" rotate="auto">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

    • 2

  2. 总的来说，问题就在路上

    <svg viewBox="-450 -100 1000 1480" xmlns="http://www.w3.org/2000/svg" style="max-width: 500px;">
  <path d="M0,0 A 400 400 0 0 0 100 830 A 400 400 0 0 0 0 0" fill="none" stroke="red" stroke-width="0" id="path" />

  <text text-anchor="middle" font-family="sans-serif">
    <textPath href="#path" font-size="105px" letter-spacing="5" startOffset="50%">
      Quick brown fox jumps over the lazy dog.
    </textPath>
  </text>
</svg>

    • 2

相关问题