简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - SVG字體在低版本chrome和行動端的縮放問題。
怪我咯
怪我咯 2017-05-16 13:32:50
0
1
631

在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也不行。好奇怪。

怪我咯
怪我咯

走同样的路，发现不同的人生

全部回覆(1)
仅有的幸福
仅有的幸福2017-05-16 13:34:50 1樓

只要給svg設定樣式 text-rendering="geometricPrecision" 就好了。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！