SVG路徑 - 如何自動翻譯原點？

我試圖從各種SVG字體字形創建SVG路徑。這是一個例子：SVG路徑 - 如何自動翻譯原點？

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<g transform="translate(0,1500) scale(1,-1)"> 
<path d="M1879 1108Q1889 1073 1889 1038Q1889 935 1817 863T1642 791Q1604 791 1567 802L1326 561L1873 38L1655 -180L1131 367L902 137Q913 100 913 63Q913 -41 842 -113T666 -185Q631 -185 596 -175L786 
15L599 202L409 12Q399 47 399 82Q399 185 471 257T647 329Q682 329 717 320L952 554L612 909L784 1081L1138 741L1384 987Q1375 1021 1375 1056Q1375 1161 1447 1233T1622 1305Q1658 1305 1693 1295L1503 1105L1689 918L1879 1108ZM606 1258L435 1087L402 1120L573 
1291L606 1258ZM1168 1230Q1105 1255 1038 1255Q937 1255 872 1191L498 817L537 778L395 635L156 874L298 1016L342 973L714 1345Q791 1421 879 1421Q1027 1421 1168 1230Z"/> 
</g> 
</svg>

我明白（1，-1）是必需的那個尺度變換由於倒置座標系統（參見此相關的問題：Get Font Glyphs as Vectors, manipulate and product SVG or Bitmap）

參見：「翻譯（0 ，1500）」。

有沒有辦法將路徑的原點自動轉換爲適合畫布？我一直在這裏掃描SVG參考：http://www.w3.org/TR/SVG/coords.html

謝謝

編輯：

感謝您使用視框的提示。我操縱服務器端的文件，因此在瀏覽器中渲染或使用JavaScript對我來說不是一個真正的選擇。我已經勾選了絕熱的答案，因爲他們對我最有幫助。

一個負的最小值是我正在尋找的。我的SVG字體每個都包含units-per-em，它將用作寬度和高度，以及上升值，我將其作爲負值分鐘應用。

來源

2011-12-29 stackuser10210

我刪除了翻譯並在svg上添加了正確的viewBox屬性。下面是最終產品：

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg version="1.1" viewBox='156 -1421 1733 1606' xmlns="http://www.w3.org/2000/svg"> 
<g transform="scale(1, -1)"> 
<path d="M1879 1108Q1889 1073 1889 1038Q1889 935 1817 863T1642 791Q1604 791 1567 802L1326 561L1873 38L1655 -180L1131 367L902 137Q913 100 913 63Q913 -41 842 -113T666 -185Q631 -185 596 -175L786 
15L599 202L409 12Q399 47 399 82Q399 185 471 257T647 329Q682 329 717 320L952 554L612 909L784 1081L1138 741L1384 987Q1375 1021 1375 1056Q1375 1161 1447 1233T1622 1305Q1658 1305 1693 1295L1503 1105L1689 918L1879 1108ZM606 1258L435 1087L402 1120L573 
1291L606 1258ZM1168 1230Q1105 1255 1038 1255Q937 1255 872 1191L498 817L537 778L395 635L156 874L298 1016L342 973L714 1345Q791 1421 879 1421Q1027 1421 1168 1230Z"/> 
</g> 
</svg>

我通過詢問svg要素是什麼其邊框是有視框中的數字。要做到這一點，在Safari或Chrome打開圖像了，起牀給Javascript控制檯，然後輸入：

var bb = document.querySelector('svg').getBBox(); 
bb

然後，點擊三角形的bb對象的左側。這會向您顯示其x，y，寬度和高度值 - 按照該順序將它們放入viewBox屬性中。

（順便說一句，我以前做的尺度和翻譯的手段來得到的座標系的東西我已經習慣了 - 這是因爲這樣，我不這樣做了併發症）

來源

2011-12-29 10:24:17 adiabatic

SVG路徑 - 如何自動翻譯原點？

回答

相關問題