SVG路径 - 如何自动平移原点？

Question

我正在尝试从各种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>

我知道由于反转的坐标系统（参见相关问题：获取字体字形作为矢量，操作和生成SVG或位图），需要进行（1，-1）的比例变换。

请参见：“translate（0,1500）”。

是否有一种自动将路径原点平移以适应画布的方法？我一直在扫描这里的SVG参考文献：http://www.w3.org/TR/SVG/coords.html 谢谢

编辑：

感谢您提供使用视口的提示。我正在服务器端处理文件，因此在浏览器中呈现或使用JavaScript并不是对我而言真正的选择。我选中了adiabatic的答案，因为他们对我最有帮助。

负的min-y值是我正在寻找的。我的SVG字体每个都包含单位每em，它将作为宽度和高度，并且具有一个上升值，我将将其应用为负min-y。

- stackuser10210

Answer 1

我删除了翻译，并在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属性中。

（顺带一提，我曾经使用缩放和平移技巧来将坐标系转换为我习惯的样式 - 正是由于像这样的复杂性，我不再使用它。）

- adiabatic