Xml SVG路径-如何自动转换原点?

Xml SVG路径-如何自动转换原点?,xml,vector,svg,coordinate-systems,Xml,Vector,Svg,Coordinate Systems,我试图从各种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

我试图从各种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)的比例变换(参见此相关问题:)

参见:“翻译(01500)”

是否有方法自动转换路径的原点,使其适合画布?我一直在这里浏览SVG参考:

多谢各位

编辑:

感谢您提供有关使用viewbox的提示。我在服务器端处理文件,所以在浏览器中渲染或使用JavaScript对我来说并不是一个真正的选项。我勾选了绝热的答案,因为他们的答案对我最有帮助


一个负的min-y值就是我想要的。我的SVG字体每个都包含每个em的单位,用作宽度和高度,以及一个上升值,我将其用作负的最小y。

我删除了翻译,并在
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>
然后,单击
bb
对象左侧的披露三角形。这将显示其x、y、width和height值-按顺序将它们放入viewBox属性中

(顺便说一句,我曾经做过缩放和平移的技巧,将坐标系转换成我习惯使用的坐标系——因为像这样的复杂情况,我不再这么做了。)

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