Пути SVG - Как я могу автоматически перевести источник? - PullRequest
Новая
       27

Пути SVG - Как я могу автоматически перевести источник?

3 голосов
/ 29 декабря 2011

Я пытаюсь создать пути 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 или растровое изображение )

См. «Translate (0,1500)».

Есть ли способ автоматически перевести точку начала пути, чтобы она поместилась в холсте? Я сканировал ссылку SVG здесь: http://www.w3.org/TR/SVG/coords.html

Спасибо

Edit:

Спасибо за подсказки по использованию viewbox. Я манипулирую файлами на стороне сервера, поэтому рендеринг в браузере или использование JavaScript на самом деле не вариант для меня. Я отмечал ответ адиабаты, потому что их ответ был самым полезным для меня.

Отрицательное значение min-y - это то, что я искал. Каждый из моих SVG-шрифтов содержит единицы измерения на единицу, которые будут служить шириной и высотой, а также значение всплытия, которое я буду применять как минус мин-у.

1 Ответ

3 голосов
/ 29 декабря 2011

Я удалил перевод и добавил правильный атрибут viewBox на 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" 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>

Я получил номера viewBox, спросив элемент svg, какова его ограничительная рамка. Для этого откройте изображение в Safari или Chrome, перейдите в консоль Javascript и введите: 

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

Затем щелкните раскрывающий треугольник слева от объекта bb. Это покажет вам значения x, y, width и height - поместите их в атрибут viewBox в указанном порядке.

(Кроме того, я использовал трюк для масштабирования и перевода, чтобы получить систему координат к чему-то, к чему я привык - из-за подобных сложностей я больше этого не делаю.)

...