我使用svg绘制原始地理数据。为了做到这一点,我将视图框设置为与现实世界相匹配,并使用GPS坐标。我想通过给定的坐标画一个圆,并在其中写一些文字。圈可以,但是文字在哪里?下面是一个小提琴示例。
<svg
id="svg"
width="1000" height="1000"
viewBox="27.9043663 -43.2012437 0.0366674 0.0366674"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<circle cx=27.9227000 cy=-43.1829100 r="0.016667" style="stroke:#000; stroke-width:0.00016667;" fill="none"/>
<text x=27.9227000 y=-43.1829100 fill="#000" font-family="'Lucida Grande', sans-serif" font-size="12">test</text>
</svg>
答案 0 :(得分:1)
您的文字很大。太大,您的圈子就停留在文本的空白内。尝试font-size=".014"
。恐怕小于此值将无法渲染。
svg{border:1px solid;width:90vh;}
<svg
id="svg"
viewBox="27.9043663 -43.2012437 0.0366674 0.0366674"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
xlink="http://www.w3.org/1999/xlink"
ev="http://www.w3.org/2001/xml-events"
shape-rendering="geometricPrecision"
>
<circle cx=27.9227000 cy=-43.1829100 r="0.016667" style="stroke:#000; stroke-width:0.00016667;" fill="none"/>
<text x=27.91 y=-43.179 fill="#000" font-family="'Lucida Grande', sans-serif" font-size=".014">test</text>
</svg>
我建议阅读有关The Limits of Numbers in SVG