Welcome to OGeek Q&A 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 Reply

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;">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...