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

发布于 2024-12-23 02:39:47 字数 1573 浏览 1 评论 0原文

我正在尝试从各种 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) 的缩放变换（请参阅此相关问题：获取字体字形作为向量，操作和生成 SVG 或位图）

请参阅： '翻译（0,1500）'。

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

谢谢

编辑：

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

我正在寻找负的 min-y 值。我的每个 SVG 字体都包含单位/em（用作宽度和高度）以及上升值（我将其用作负 min-y）。

原文

I'm attempting to create SVG paths from various SVG font glyphs. This is an example:

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

I understand that scale transform of (1,-1) is required due to an inverted coordinate system (see this related question: Get Font Glyphs as Vectors, manipulate and product SVG or Bitmap)

See: 'translate(0,1500)'.

Is there a way to translate the origin for the path automatically to have it fit within the canvas? I've been scanning the SVG reference here: http://www.w3.org/TR/SVG/coords.html

Thank you

Edit:

Thank you for the hints on using viewbox. I'm manipulating the files server-side, so rendering in a browser or using JavaScript isn't really an option for me. I've ticked adiabatic's answer since theirs was the most helpful to me.

A negative min-y value is what I was looking for. My SVG fonts each contain units-per-em, which will serve as width and height, and an ascent value, which I'll apply as a negative min-y.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

把回忆走一遍 2024-12-30 02:39:47

我删除了翻译并在 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、宽度和高度值 - 按顺序将它们放入 viewBox 属性中。

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

I removed the translation and added a proper viewBox attribute on svg. Here's the final product:

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

I got the viewBox numbers by asking the svg element what its bounding box was. To do this, open the image up in Safari or Chrome, get to the Javascript console, and type:

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

Then, click on the disclosure triangle to the left of the bb object. This will show you its x, y, width, and height values — put them into the viewBox attribute in that order.

(As an aside, I used to do the scale-and-translate trick to get the coordinate system to something I'm used to — it's because of complications like this that I don't do it anymore.)

回复收藏 0 原文

~没有更多了~