[英]Is there a way to draw a rectangle around single letters on a SVG textpath
[英]Is there a way to identify which part of a SVG TextPath was clipped
我有一個 SVG textPath 如下所示。
<text class="text" dominant-baseline="middle" style="font-size: 0.3em">
<textPath class="text-path" href="#2abd837a-0">Cats and dogs</textPath>
</text>
此 textPath 根據 #2abd837a-0 引用的路徑長度正確顯示剪輯。
我將如何 go 關於使用 javascript 來查找剪輯和不可見文本的長度? 這甚至可能嗎?
您可以使用getComputedTextLength
方法計算文本長度。 您可以使用getTotalLength
方法計算路徑長度。
let textLength = elText.getComputedTextLength(); let pathLength = abd837a.getTotalLength(); let invisibleTextLength = textLength > pathLength? textLength - pathLength: 0; console.log(textLength,pathLength,invisibleTextLength)
<svg viewBox="120 100 100 100"> <path id="abd837a" d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> <text id="elText" class="text" dominant-baseline="middle" style="font-size: 16px"> <textPath class="text-path" href="#abd837a">Cats and dogs</textPath> </text> </svg>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.