如何在 svg 路径中添加文本？
How can I add text insde svg path?
我正在尝试在我从 figma 复制的 svg 路径中添加文本。
这是它在 figma 中的样子：
这是我的代码库：
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
主要是交换路径和文本元素的顺序，使文本元素绘制在路径之上。之后，您只需将文本放在您想要的位置，并确保它具有填充颜色，以便您可以看到它。
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>
我正在尝试在我从 figma 复制的 svg 路径中添加文本。
这是它在 figma 中的样子：
这是我的代码库：
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
主要是交换路径和文本元素的顺序，使文本元素绘制在路径之上。之后，您只需将文本放在您想要的位置，并确保它具有填充颜色，以便您可以看到它。
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>