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>

据我所知，由于坐标系反转，需要（1，-1）的比例变换（参见相关问题：Get Font Glyphs as Vectors, manipulate and product SVG or Bitmap）

请参阅：＆＃39;翻译（0,1500）＆＃39;。

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

谢谢

修改

感谢您使用viewbox的提示。我操纵服务器端的文件，因此在浏览器中渲染或使用JavaScript并不是我的选择。我已经给出了绝热答案，因为他们对我最有帮助。

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

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元素询问其边界框是什么来获取viewBox数字。要执行此操作，请在Safari或Chrome中打开图像，转到Javascript控制台，然后键入：

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

然后，单击bb对象左侧的显示三角形。这将显示其x，y，width和height值 - 按顺序将它们放入viewBox属性。

（顺便说一下，我曾经做过缩放和翻译技巧，以便将坐标系统变成我习惯的东西 - 因为这样的复杂性我不再这样做了。）

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

1 个答案: