更好的SVG旋轉文本呈現

我想知道是否有一種方法可以更好地呈現SVG旋轉文本？更好的SVG旋轉文本呈現

<?xml version="1.0" encoding="UTF-8"?> 
<svg version="1.1" width="900" height="400" xmlns="http://www.w3.org/2000/svg"> 
    <text x="50" y="50" id="text_0" transform="rotate(17, 50, 50)"> 
     SVG text test 
    </text> 
</svg>

您可以測試渲染這裏這段代碼：http://jsfiddle.net/vbzTd/2/ 好像字符沒有關注基線，我不明白爲什麼。

非常感謝您的幫助。

來源

2013-03-13 justinbridou

我有類似的問題。當文字旋轉時所有的字母都在抽搐。它發生在所有瀏覽器中。幸運的是，我沒有太多的旋轉文本，我只是將text轉換爲path。之後，它完美的作品。但是，如果你不得不旋轉大量的文字 - svg的大小會大幅增加。

來源

2013-03-13 13:08:01 XiM

aww ...你知道任何可以完成這項工作的工具嗎？我認爲使用svg字體可以幫助（路徑？），但它不會。我的SVG圖形是用javascript的位生成的。我沒有太多的旋轉文字，但因爲它是動態內容，我不能手動進行。感謝您的回覆btw。 – justinbridou 2013-03-13 13:56:29

我的內容是靜態的，使用Inkscape很容易......在你的情況下，我可以建議通過「gliph」定義字母並嘗試使用它們。爲你一些有用的鏈接： http://stackoverflow.com/questions/2149707/get-font-glyphs-as-vectors-manipulate-and-product-svg-or-bitmap 也許： HTTP：/ /stackoverflow.com/questions/7742148/how-to-convert-text-to-svg-paths – XiM 2013-03-13 14:17:23

這與SVG字體相比要好得多，請查看http://jsfiddle.net/vbzTd/3/ 將此應用於我的項目，這是完美的！非常感謝您的幫助！ – justinbridou 2013-03-13 14:28:16

更好的SVG旋轉文本呈現

回答

相關問題