SVGパス - 原点を自動的にどのように変換するのですか？

Question

私はさまざまなSVGフォントグリフからSVGパスを作成しようとしています。 （「翻訳0：

参照：私はその規模が原因座標系（Get Font Glyphs as Vectors, manipulate and product SVG or Bitmapこの関連の質問を参照）逆に（1、-1）が必要とされるの変換を理解

<?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> 

：これは一例です、1500） '。

パスの原点を自動的に変換してキャンバスに収める方法はありますか？私はここでSVGの参照をスキャンしてきた：

http://www.w3.org/TR/SVG/coords.htmlありがとう

編集：

は、ビューボックスを使用してのヒントをいただき、ありがとうございます。私はファイルをサーバー側で操作しているので、ブラウザでのレンダリングやJavaScriptの使用は実際には私にとってはオプションではありません。私は断熱的な答えを刻まれてきました。

負のmin-y値が私が探していた値です。私のSVGフォントには、幅と高さとして機能するem単位、および負のmin-yとして適用される上昇値が含まれています。

Answer 1

翻訳を削除し、適切なviewBox属性を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" 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属性にその順序で入れます。

（私が以前使っていたものに座標系を使用するために、私はスケール・アンド・トランスレーション・トリックを使っていましたが、これは私がもうやらないような複雑さのためです）