在 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