我想要一個使用 SVG、CSS 和 HTML 以曲線為中心的 html 頁面標題。第一個字母在頁面上的高度應該與最后一個字母相同，這樣它就形成了一個半橢圓形，并且文本的中間被抬高了。
我得到的最接近的是：
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<path id="MyPath" fill="none" stroke="red" d="M100,200
Q250,100 400,200" />
<text class="title is-4">
<textPath href="#MyPath" startOffset="80">
Curved Title
</textPath>
</text>
</svg>紅線不需要在那里，我只想要文字。
我希望 SVG 下方的內容沒有很大的差距，目前它將 div 中的其他元素推到頁面的中間，并帶有空白。
我查看了有關堆疊溢位和網路的示例，大部分文本要么是一個完整的圓圈，要么是不均勻的文本，標題的開頭或結尾懸掛較低或形狀不均勻。我希望能夠將它集中在具有動態寬度的 div 中。
uj5u.com熱心網友回復：
首先，您可以text-anchor結合使用pathLengthandstartOffset將文本放在中間。這里路徑長度為 2，因此起始偏移量為 1，并且錨點設定為“中間”。
其次，我稍微改變了路徑；縮放它并將其放置在 SVG 的頂部（拱在中間命中 y=0）。它仍然是相同的形狀。我曾經dominant-baseline讓文本“掛”在路徑下。
現在視圖框也可以縮放。如果它的高度為 5，則可以看到整個路徑，如果將其設定為 3（第二個示例），則以下內容將更靠近。
另一種方法是將 SVG 作為 CSS 的一部分作為內容的背景。
svg {
display: block;
}<svg viewBox="0 0 30 5" xmlns="http://www.w3.org/2000/svg">
<path id="MyPath" fill="none" stroke="red" stroke-width=".1" d="M 0 5 Q 15 -5 30 5" pathLength="2" />
<text class="title is-4" font-size="2" dominant-baseline="hanging" text-anchor="middle">
<textPath href="#MyPath" startOffset="1">
Curved Title
</textPath>
</text>
</svg>
<div style="background:silver">More content</div>svg {
display: block;
}<svg viewBox="0 0 30 3" xmlns="http://www.w3.org/2000/svg">
<path id="MyPath" fill="none" stroke="red" stroke-width=".1" d="M 0 5 Q 15 -5 30 5" pathLength="2" />
<text class="title is-4" font-size="2" dominant-baseline="hanging" text-anchor="middle">
<textPath href="#MyPath" startOffset="1">
Curved Title
</textPath>
</text>
</svg>
<div style="background:silver">More content</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435027.html
上一篇：當需要非本地表單提交的欄位時，在輸入數字型別欄位中允許“0”
下一篇：文本位置的HTMLDIV設定