在 html 中将 textPath 与 javascript 而不是 xlink:href 链接？

Question

有没有办法直接通过 javascript 将 textPath 链接到路径？

像这样的东西？

 let path=document.querySelector("path"); let txt_path=document.querySelector("textPath"); textPath.href=path

 <svg id="svg1" width="1000" height="1000"> <path fill="none" stroke="black" d="M 0 0 L 300 300" stroke-width="3"/> <text id="txt1" font-size="24" dy="-10"> <textPath id="result" text-anchor="middle" startOffset="50%" > Hello there </textPath> </text> </svg>

整个想法是我有太多路径，不能为每个路径分配一个 ID，而是直接将它们与 javascript 链接会更方便

这样的事情甚至可能吗？ 还是没有解决方法ID？

注意：我试过这个，但它似乎不支持跨浏览器

Answer 1

路径需要一个 id，然后 textPath 指向该 id。

 let path=document.querySelector("path"); let textPath=document.querySelector("textPath"); path.id = self.crypto.randomUUID(); textPath.href.baseVal = "#" + path.id;

 <svg id="svg1" width="1000" height="1000"> <path fill="none" stroke="black" d="M 0 0 L 300 300" stroke-width="3"/> <text id="txt1" font-size="24" dy="-10"> <textPath id="result" text-anchor="middle" startOffset="50%" > Hello there </textPath> </text> </svg>

Answer 2

都是通过 ID 完成的（只有 FireFox 在textPath上有path属性）

为生成唯一 ID 的语义 HTML: <svg-text-path>编写 Web 组件。 那时不需要 shadowDOM，所有全局CSS 都适用。

 <svg-text-path>Hello</svg-text-path> <svg-text-path>Wonderful</svg-text-path> <svg-text-path d="M0,90H180">Web Components</svg-text-path> <style> svg { background:pink } textPath { fill: green } [d*="H"] svg {background:lightgreen} </style> <script> customElements.define("svg-text-path", class extends HTMLElement { connectedCallback() { setTimeout(() => { // make sure innerHTML is parsed let id = Math.random()*1e32; this.innerHTML = `<svg width="180" height="180"> <path id="TP${id}" pathLength="100" fill="none" stroke="black" d="${this.getAttribute("d")||'M0,0L180,180'}" stroke-width="3"/> <text font-size="24" dy="-10"> <textPath href="#TP${id}" text-anchor="middle" startOffset="50" > ${this.innerHTML}</textPath></text></svg>`; }) } }) </script>

• 注意：您只能在 HTML 命名空间extends HTMLElement中创建 Web 组件，可惜（还不能）在 SVG 命名空间中。 但是如图所示可以使用 Web 组件来创建 SVG