在360極速等低版本殼瀏覽器和行動裝置瀏覽器中,svg中<tspan>標籤中的字體無法正確縮放,在最新版本Chrome中正常。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
tspan{
display: block;
}
</style>
</head>
<body>
<p>
<svg viewBox="0,0,1000,1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text><tspan class="st5" y="55.9" x="5.5">After all the articles, ads, fliers, etc. have been prepared for the newsletter, the document should be assembled and may require </tspan></text>
</svg>
</p>
</body>
</html>
當視窗縮小時,極速瀏覽器中字體大小縮放到12px就不會縮小了。最新chrome正常。如果打開360極速的調試工具,把display:block屬性去掉就正常縮放了。但直接在css中設定display:inline也不行。好奇怪。
只要給svg設定樣式 text-rendering="geometricPrecision" 就好了。