Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.8k views
in Technique[技术] by (71.8m points)

What is the unit SVG text coordinates?

H i all. Can someone explain me what is the unit of Svg text coordinates? And how we translate them to pixels? Thank U.

Edit:

Thanks to Robert to his answer; But I have a problem with using it. Here is my code:

<svg viewBox="0 0 1000 1000"> 

<text x="23.5625" y="195.98749542236328" fill="red" style="font-size: 60px">Hi</text>

</svg>

<input style="position: absolute; left: 23.5625px; top: 195.987px">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Per the SVG specification omitted units are the same as pixels.

One px unit is defined to be equal to one user unit. Thus, a length of "5px" is the same as a length of "5".

Note that a viewBox applies a transform that makes the SVG responsive. If you want to match an absolutely positioned input then you don't want that. Also the baseline for text by default is the bottom of most letters, if we use hanging as the baseline instead then that will match the input.

I've also made the input opacity 0.5 so you can see the SVG is now underneath the input element.

html, body, svg {
  width: 100%;
  height: 100%;
}
<svg> 

<text x="23.5625" y="195.98749542236328" fill="red" style="font-size: 20px;dominant-baseline: hanging;">Hi</text>

</svg>

<input style="position: absolute; left: 23.5625px; top: 195.987px;opacity: 0.5;">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...