我絕對是 SVG 的初學者,我需要在這個月亮周圍放置文字......我試圖在路徑周圍制作文字,但無法獲得正確的尺寸并將其與月亮相匹配。

<svg viewBox="-6 -6 30 40">
<defs>
<mask id="earth">
<rect fill="white" x="-5" y="-5" width="10" height="10"></rect>
<circle fill="black" cx="3.141592654" r="5" />
</mask>
</defs>
<circle r="5" fill="currentColor" mask="url(#earth)" transform="rotate(-25)"/>
</svg>
uj5u.com熱心網友回復:
用路徑畫月亮。(并編輯:https ://yqnn.github.io/svg-path-editor/ )
路徑是逆時針繪制的,如果你想像你的設計一樣繪制innermoon文本,添加順時針繪制的第二條路徑更容易。
通過查找檔案中您不知道的所有屬性,設定pathLength有助于定位。startoffset
<svg viewBox="0 0 80 60">
<rect width="100%" height="100%" fill="skyblue"/>
<path id="Moon" pathLength="10" d="m16 2a12 12 0 1018 13 1 1 0 01-18-13z"/>
<text>
<textPath href="#Moon"
startoffset="1" text-anchor="left" dominant-baseline="hanging"
fill="blue" font-size="3px">Outside moon</textPath>
</text>
<text>
<textPath href="#Moon"
startoffset="6" text-anchor="right" dominant-baseline="hanging"
fill="rebeccapurple" font-size="4">Inside moon</textPath>
</text>
</svg>
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/475343.html
