在路径坐标中引用 SVG 文本元素答案

【问题标题】：Reference SVG text element in path coordinates在路径坐标中引用 SVG 文本元素
【发布时间】：2023-02-09 04:15:15
【问题描述】：

是否可以在创建路径时以编程方式引用文本边界框的范围？例如，根据所选的字体、比例和字形，特定文本可能更大或更小。例如，我总是想要一条恰好在文本下方绘制的路径。或者在文本上（不使用 text-decoration: underline/overline 属性，而是使用路径）。或者，如果我需要猜测文本的宽度，是否可以在不知道其确切范围的情况下至少将路径相对于文本块水平居中？

我玩弄了“50%”属性，但这些属性似乎总是与页面相关，而不是单个 SVG 元素。

例子：

    <svg height="200" width="300">
      <text x="0" y="50" style="fill: red">Blue line on top, green line on right</text>
      <path d="m 0 0 h 50" style="stroke-width: 2px; stroke: blue" />
      <path d="m 50 0 v 15" style="stroke-width: 2px; stroke: green" />
    </svg>

如何使蓝线的路径恰好在顶部边界框上，绿线恰好在文本元素的右侧？

【问题讨论】：

您可以使用getComputedTextLength 或getBBox 来获取文本的宽度。为了获得更多帮助，请尝试整理一个代码示例并将其添加到您的问题中
也许使用 textPath。
但是 getComputedTextLength 或 getBBox 不是只能在 HTML/JavaScript 中使用吗？我不是在浏览器中渲染，我希望这一切都在 SVG 中。
或者也许在文本元素上创建一个过滤器，如果您可以创建一个在其边缘呈现的过滤器，那么它将调整元素的大小。

标签： svg

【解决方案1】：

也许真正的 SVG 大师可以插话并创建您想要的东西。

不需要 JavaScript/Web 组件，我只是不想复制/粘贴 SVG 代码

customElements.define("svg-text-border", class extends HTMLElement{
  connectedCallback(){
    setTimeout(()=>{ // wait till innerHTML is parsed
      this.innerHTML = 
      `<svg viewbox="0 0 220 30" style="background:pink">
        <path d="M10 20h200"  stroke="red" pathLength="100" id="R" />
        <path d="M210 20v-15" stroke="green"/>
        <path d="M210 5h-200" stroke="blue"/>
        <text textLength="90%">
          <textPath href="#R" startoffset="100" text-anchor="end">
            ${this.innerHTML.trim()}
          </textPath>
        </text>
      </svg>`;
    });
  }
})

<style>svg{ max-height:60px }</style>

<svg-text-border>The quick brown fox jumps over the lazy dog</svg-text-border>

<svg-text-border>Hello World!</svg-text-border>

<svg-text-border>Web Components are Cool!</svg-text-border>

【讨论】：