#svg #inkscape
#svg #чернильный пейзаж
Вопрос:
В настоящее время я пишу синтаксический анализатор для SVG для проекта, над которым работаю. Я использую inkscape в качестве редактора 
И простой SVG, который я получаю от inkscape, это
lt;?xml version="1.0" encoding="UTF-8" standalone="no"?gt; lt;!-- Created with Inkscape (http://www.inkscape.org/) --gt; lt;svg width="256" height="256" viewBox="0 0 25.6 25.6" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"gt; lt;defs id="defs2" /gt; lt;rect style="fill:#800080;stroke-width:0.0566834" id="rect122" width="10.274419" height="9.6836576" x="10.734594" y="-6.7066712" transform="matrix(0.84492681,0.53488194,-0.51677089,0.85612373,0,0)" /gt; lt;/svggt; Мой вопрос в том, что именно означают x и y тега rect в этом контексте? Я также не понимаю, почему координата y отрицательна?
Комментарии:
1. Итак, я думаю, что он должен представлять преобразованные координаты, Чтобы получить исходные координаты, вы должны преобразовать их обратно. Я все еще хочу уточнить, прав ли я в этом, хотя
2. Это нетрансформированные координаты с использованием блоков viewBox. Вы должны умножить их на матрицу преобразования, чтобы получить отображаемые координаты. Если бы не было матрицы преобразования, начало этой прямой было бы 107 пикселей справа и 67 пикселей выше начала SVG (то есть частично за пределами границы SVG). Что касается «почему», то это так — редакторы SVG (Illustrator,Inkscape) часто используют преобразования для изменения размера и перемещения материалов,а не для переписывания x, y, высоты. ширина. И я не знаю, почему это так.
3. Мой редактор (я использую affinity designer, но уверен, что InkScape его тоже поддерживает) позволяет вам требовать «относительные координаты» при экспорте, что позволит максимально применить все преобразования. Может быть, это и есть решение?
4. @что-то здесь я не уверен в каких-либо таких функциях экспорта в inkscape, но, возможно, мне нужно немного больше изучить их веб-сайт, чтобы узнать об этом. Спасибо!
5. @MichaelMullany Ах, я вижу, я был довольно озадачен этим некоторое время, особенно когда не нашел ничего об этом в Интернете, и на самом деле, думая об этом, то, как он преобразует координаты, кажется странным. Но даже в этом случае вопрос решен. Спасибо!
Ответ №1:
Анимация, показывающая исходное и преобразованное положение прямоугольника.
svg { border: solid 1px grey; background: linen; margin: 100px 0 0 0; overflow: visible; } rect { animation: move 3s linear infinite; } @keyframes move { 0% { transform: matrix(1, 0, 0, 1, 0, 0); } 50% { transform: matrix(0.84492681,0.53488194,-0.51677089,0.85612373,0,0); } 100% { transform: matrix(1, 0, 0, 1, 0, 0); } } lt;svg width="256" height="256" viewBox="0 0 25.6 25.6" version="1.1" id="svg5" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"gt; lt;defs id="defs2" /gt; lt;rect style="fill:#800080;stroke-width:0.0566834" id="rect122" width="10.274419" height="9.6836576" x="10.734594" y="-6.7066712" transform="matrix(0.84492681,0.53488194,-0.51677089,0.85612373,0,0)" /gt; lt;/svggt; Комментарии:
1. Полезный Ответ. Отличная демонстрация исходного и преобразованного положения прямоугольника.