SVG 路径 - 如何自动翻译原点？答案

【问题标题】：SVG Paths - How do I translate the origin automatically?SVG 路径 - 如何自动翻译原点？
【发布时间】：2012-01-29 18:06:31
【问题描述】：

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

请参阅：'translate(0,1500)'。

有没有办法自动翻译路径的原点以使其适合画布？我一直在这里扫描 SVG 参考：http://www.w3.org/TR/SVG/coords.html

谢谢

编辑：

感谢您提供有关使用 viewbox 的提示。我在服务器端操作文件，因此在浏览器中呈现或使用 JavaScript 对我来说并不是一个真正的选择。我已经勾选了绝热的答案，因为他们的答案对我最有帮助。

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

【问题讨论】：

标签： xml vector svg coordinate-systems

【解决方案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 属性中。

（顺便说一句，我曾经使用缩放和平移技巧来将坐标系转换为我习惯的东西——因为这样的复杂性，我不再这样做了。）

【讨论】：